Home Back

egovframework

모바일 Page

모바일 Page는 브라우저의 한 화면을 뜻하는 것으로 Header/Footer bar, Content의 UX 컴포넌트 등 이 조합되어 만들어지며 링크를 통한 페이지 전환이 가능하다.

기본코드

모바일 Page는 HTML5, 및 CSS3를 기반으로 하고 있으며 문서의 시작은 HTML5의 <!DOCTYPE html> 로 시작하고 <head> 부분에 아래와 같이 선언 한다.

구성 요소

모바일 Page 의 구성요소는 HTML5의 data-* 속성을 사용하여 <body>안에 header, content, footer를 사용하여 구성한다.

페이지 Title

페이지 전환 시 Ajax를 기반으로 통신하게 되면 data-role="page" 내의 content만 불러온다.그래서 기본 웹에서 제공하는 <title>을 변경 할수 없는데 <data-role="page"> Tag 내에data-title="[title]"속성을 지정하면 활성화된 page의 title을 지정할 수 있다.

페이지 로딩

모바일 전자정부 표준 프레임워크는 페이지 내부 링크 보다는 도메인 내부 링크를 권장한다.

Prefetch 페이지
도메인 내부링크를 사용하게 되면 내부 링크 보다는 빠른 화면 전환 및 데이터 로딩을 할수 없기때문에 data-prefetch 을 선언한다. 연결하는 도메인 내부 링크에 data-prefetch를 선언하면 기본 페이지를 로딩, data-prefetch가 선언된 페이지를 읽기 위해 pagecreate 이벤트가 발생 한다.그 후 백그라운드로 대상 페이지를 로드한다. 연결 전 페이지를 미리 로드해 놓기 때문에 빠른 화면 전환이 가능하다.
Caching 페이지
모바일 전자정부 페이지는 기본적으로 페이지 전환이 되면 이전 페이지의 DOM은 삭제한다. 그러나 이전 페이지의 DOM을 삭제하고 싶지 않다면 domCache에 저장되도록 한다. 하지만 저장되는 DOM의 크기가 클 경우 화면 전환 문제 및 메모리 이슈가 있을 수 있기 때문에 필요한 경우에만 사용하도록 권장한다.

Ajax를 통한 Hash URL 제어

Ajax 통신 방식을 할 경우 hash url이 나타나는 것을 설정을 통하여 제어 할 수 있다. hash url이 필요할 때는 $.mobile.pushStateEnabled=true hash url이 필요 없다면 $.mobile.pushStateEnabled=false을 선언한다.
  *- default는 $.mobile.pushStateEnabled=true

페이지 이동

모바일 페이지 이동은 기본적으로 Ajax 를 이용하여 처리 된다. 이는 모바일에 최적화된 화면 전환 효과를 주기 위함으로 옵션 설정을 통해 변경 가능하다.

페이지 내부 이동
한 HTML 안에 여러 page 가 선언 되어 있을 경우 사용 할 수 있는 방법으로 모바일 page 구성의 기본 방식이다. 페이지 내부 이동은 Ajax 통신을 사용하며 page 로 선언된 div 태그의 id 값을 링크(#pageId)에 적용하여 사용 가능하다.
* 한 HTML 내에 여러 page가 선언 되어 있을 경우 제일 상단의 page를 첫 화면으로 인식 한다.
페이지 외부 이동
페이지 외부 이동은 Ajax 통신을 이용하며 Ajax 로 호출한 html 의 data-role="page" 영역만 읽어 들여서 호출한 html 페이지의 DOM 요소에 추가 해 준다.(페이지 내부 이동과 유사 한 구조로 DOM 관리)
* Ajax 로 호출된 HTML의 page 영역만 가져 오기 때문에 호출된 페이지에서 사용하는 Javascript, CSS 등은 호출을 한 HTML내에 존재 해야 한다.
* Ajax 통신을 사용하고 싶지 않은 경우 Link를 참조하여 변경 가능하다.

Copyright(c)2012 Ministry of Security and Public Administration.