모바일 Page
모바일 Page는 브라우저의 한 화면을 뜻하는 것으로 Header/Footer bar, Content의 UX 컴포넌트 등 이 조합되어 만들어지며
링크를 통한 페이지 전환이 가능하다.
기본코드
모바일 Page는 HTML5, 및 CSS3를 기반으로 하고 있으며 문서의 시작은 HTML5의 <!DOCTYPE html> 로
시작하고 <head> 부분에 아래와 같이 선언 한다.
- <!DOCTYPE html>
- <html>
- <head>
- <title>eGovFrame</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.3.2.css"/>
- <link rel="stylesheet" href="/css/egovframework/mbl/cmm/EgovMobile-1.3.2.css" />
- <script src="/js/egovframework/mbl/cmm/jquery-1.9.1.min.js"></script>
- <script src="/js/egovframework/mbl/cmm/jquery.mobile-1.3.2.js"></script>
- <script src="/js/egovframework/mbl/cmm/EgovMobile-1.3.2.js"></script>
- </head>
- <body>
- ...
- </body>
- </html>
구성 요소
모바일 Page 의 구성요소는 HTML5의 data-* 속성을 사용하여 <body>안에 header,
content, footer를 사용하여 구성한다.
- <body>
- <!-- 모바일 페이지 start -->
- <div data-role="page">
- <!-- header start -->
- <div data-role="header">
- <h1>header Title</h1>
- </div>
- <!-- header end -->
- <!-- content start -->
- <div data-role="content">
- <p>전자정부 모바일 표준프레임워크 default Page 화면 입니다.</p>
- </div>
- <!-- content end -->
- <!-- footer start -->
- <div data-role="footer">
- <h4>footer title</h4>
- </div>
- <!-- footer end -->
- </div>
- <!-- 모바일 페이지 end -->
- </body>
페이지 Title
페이지 전환 시 Ajax를 기반으로 통신하게 되면 data-role="page" 내의 content만 불러온다.그래서 기본 웹에서 제공하는
<title>을 변경 할수 없는데 <data-role="page"> Tag 내에data-title="[title]"속성을 지정하면 활성화된 page의 title을 지정할 수 있다.
- <div data-role="page" id="foo" data-title="Page Foo">
- <div
페이지 로딩
모바일 전자정부 표준 프레임워크는 페이지 내부 링크 보다는 도메인 내부 링크를 권장한다.
- Prefetch 페이지
- 도메인 내부링크를 사용하게 되면 내부 링크 보다는 빠른 화면 전환 및 데이터 로딩을 할수 없기때문에 data-prefetch
을 선언한다. 연결하는 도메인 내부 링크에 data-prefetch를 선언하면 기본 페이지를 로딩, data-prefetch가 선언된 페이지를 읽기 위해
pagecreate 이벤트가 발생 한다.그 후 백그라운드로 대상 페이지를 로드한다. 연결 전 페이지를 미리 로드해 놓기 때문에 빠른 화면 전환이 가능하다.
- <a href="/guide/components/pageStructure/page.do" data-prefetch> ... </a>
- Caching 페이지
- 모바일 전자정부 페이지는 기본적으로 페이지 전환이 되면 이전 페이지의 DOM은 삭제한다. 그러나 이전 페이지의 DOM을
삭제하고 싶지 않다면 domCache에 저장되도록 한다. 하지만 저장되는 DOM의 크기가 클 경우 화면 전환 문제 및 메모리 이슈가 있을 수 있기 때문에
필요한 경우에만 사용하도록 권장한다.
- < pageinit에 선언 할 경우>
- $.mobile.page.prototype.options.domCache = true;
- <페이지 에 선언 할 경우 >
- <div data-role="page" id="cacheMe" data-dom-cache="true" >
Ajax를 통한 Hash URL 제어
Ajax 통신 방식을 할 경우 hash url이 나타나는 것을 설정을 통하여 제어 할 수 있다. hash url이 필요할 때는
$.mobile.pushStateEnabled=true hash url이 필요 없다면 $.mobile.pushStateEnabled=false을 선언한다.
*- default는 $.mobile.pushStateEnabled=true
- < pageinit에 선언>
- $.mobile.pushStateEnabled=true;
페이지 이동
모바일 페이지 이동은 기본적으로 Ajax 를 이용하여 처리 된다.
이는 모바일에 최적화된 화면 전환 효과를 주기 위함으로 옵션 설정을 통해 변경 가능하다.
- 페이지 내부 이동
- 한 HTML 안에 여러 page 가 선언 되어 있을 경우 사용 할 수 있는 방법으로 모바일 page 구성의 기본 방식이다.
페이지 내부 이동은 Ajax 통신을 사용하며 page 로 선언된 div 태그의 id 값을 링크(#pageId)에 적용하여 사용 가능하다.
* 한 HTML 내에 여러 page가 선언 되어 있을 경우 제일 상단의 page를 첫 화면으로 인식 한다.
- <!-- main page -->
- <div id="main" data-role="page">
- <a href="#view" data-role="button">글쓰기</a>
- <p>Main Page 입니다.</p></div>
- <!-- view page -->
- <div id="view" data-role="page">
- <p>상세보기 페이지</p>
- </div>
- 페이지 외부 이동
- 페이지 외부 이동은 Ajax 통신을 이용하며 Ajax 로 호출한 html 의 data-role="page" 영역만 읽어 들여서 호출한 html 페이지의 DOM 요소에 추가 해 준다.(페이지 내부 이동과 유사 한 구조로 DOM 관리)
* Ajax 로 호출된 HTML의 page 영역만 가져 오기 때문에 호출된 페이지에서 사용하는 Javascript, CSS 등은 호출을 한 HTML내에 존재 해야 한다.
* Ajax 통신을 사용하고 싶지 않은 경우 Link를 참조하여 변경 가능하다.
- main.html
- <div id="main" data-role="page">
- <a href="create.html" data-role="button">글쓰기</a>
- <p>Main Page 입니다.</p></div>
- ...
- create.html
- <div id="create" data-role="page">
- <p>글쓰기 페이지</p>
- </div>
- ...