====== UX/UI Controller Component ======
===== 개요 =====
전자정부에서 효율적인 스마트 전자정부 기반시스템의 구축•운영을 통해 전자정부의 서비스 품질 UX 레이어는 UI/UX Controller Component, JavaScript Module App Framework, HTML5, CSS3 서비스를 제공한다. \\
오픈소스는 JQuery Mobile을 채택하였으며 jQuery Mobile은 html5, CSS3, javascript를 제공한다.\\
오픈 소스를 Customizing 하여 UI레이어의 기능을 사용 하며 내용은 아래와 같다.\\
UI/UX Controller Component 모바일 웹 사용자 환경(UX/UI)에 대한 유연한 대응을 위해 Touch Optimized 된 필수 UI 컨트롤러 컴포넌트를 제공한다.\\
HTML5는 모바일 웹 페이지 구성 시 사용 할 수 있는 마크업 언어로서 모바일 특화 태그 밑 디바이스 API를 제공한다.\\
CSS3는 모바일 기기 및 브라우저에 따라 적합한 컴포넌트가 보여지는 기능을 제공한다. 또한 JavaScript Module App Framework UX/UI controller component의 효율성을 보장하는 javascript 및 Json 구조를 제공한다.\\
===== 모바일 실행환경 Upgrade 가이드=====
전자정부 표준프레임워크 모바일 웹 실행환경의 업데이트에 따라, jQuery 및 jQueryMobile 라이브러리의 버전이 업데이트 되었으며, 라이브러리 버전 업데이트에 따라 일부 메소드 및 컴포넌트 구성이 변화 되었다.
==== 라이브러리 업데이트 ====
기존 디렉토리의 모바일 실행환경 라이브러리(js, CSS 등) 이 교체되었다.\\
Jquery-1.9.1 -> jquery-1.11.2\\
Jquerymobile-1.3.2.js -> Jquerymobile-1.4.5.js\\
Jquerymobile-1.3.2.css -> Jquerymobile-1.4.5.css\\
EgovMobile-1.3.2.js -> EgovMobile-1.4.5.js\\
EgovMobile-1.3.2.css -> EgovMobile-1.4.5.css\\
==== jQuery 버전 업데이트에 따른 메소드 변경 ====
JQuery 버전(1.9이상)의 업데이트에 따라 기존에 사용되던, .bind() 와 .live() 메소드는 .on() 메소드로 통합 변경 되었다 따라서 해당 메소드를 다음과 같이 수정하여 사용 하여야 한다.\\
$('#main').live('pageshow', init);\\
$(document).on('pageshow', '#main', init);\\
==== jQueryMobile 버전 업데이트에 따른 컴포넌트 변경 ====
기존의 DatePicker 및 TimePicker은 HTML5 스펙내의 input=date 속성으로 대체가 가능 하므로, 컴포넌트에서 제외 되었다. 단. 기존 기능 및 브라우저 호환을 위하여 모바일 공통컴포넌트에서는 커스텀 라이브러리로 추가되어 사용하였다.
또한 progress Dialog/Bar 의 경우도 jQueryMobile 에서 제공하는 Loader Widget 으로 변경됨
===== 설명 =====
UX 처리 레이어는 모바일 환경을 화면을 담당하는 레이어로 화면 구성을 위한 Button, Panel, Internal/Externel Link, Loader Widget, Menu, Check, Radio, Label/Text, Tabs, Form, Grid, List View ICon, Selector, Collapsible Block를 제공한다.모바일 화면에 특화된 16개의 컴포넌트를 제공한다
==== 모바일 페이지 선언 ====
jQuery Mobile 은 HTML5의 doctype 으로 선언하여야 하며, jQueryMobile에서 사용하는 CSS, JS(jQuery, jQueryMobile)를 Import 함으로서 사용 할 수 있다.
jQuery Mobile은 jQuery Core를 사용하고 있다.
=== 모바일 Page Header ===
Page의 Header 선언 부분에 모바일 실행환경을 import한다.
=== 모바일 Page Body===
jQuery Mobile 의 Page 구조는 div를 사용하여 표현하며 html5의 ‘data-*' 속성을 이용하여 구조를 구분한다.
=== 모바일 Page Link===
jQuery Mobile 은 하나의 페이지를