슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

서호 양
6 years ago
Views:

1 전자정부모바일표준프레임워크실행환경컴포넌트별실습 - 1 -

2 UX Component 실습목차 Step 1. Step 2. Step 3. Step 4. Step 5. Step 6. Step 7. Step 8. Step 9. Page Structure Button Panel Internal / External Link Label / Text Tabs Form Menu Progress Dialog / Bar Step 10. Dialog Step 11. Step 12. Step 13. Step 14. Step 15. Step 16. Grid View List View Date / Time Picker Check / Radio Icon Selector / Switch - 2 -

3 Step1. Page Structure [Step 1-01] 'viewport' 설정 [Step 1-02] Library Import [Step 1-03] <body> 영역페이지구조 [Step 1-04] 테마적용 [Step 1-05] Header 영역에버튼추가 - 3 -

4 Step1. Page Structure [Step 1-01] 'viewport' 설정 모바일브라우저가각각다르기때문에이들브라우저의크기별로적절하게표현하기위해서 viewport <meta> Tag 를 <head> 영역에삽입한다. <meta> Tag 'content' 속성의 'width' 값을지정하여 viewport 의가로크기를디바이스가로크기로설정한다. <meta> Tag 'content' 속성의 'initial-scale' 값을지정하여 viewport 의기본확대비율을 100% 로설정한다. <meta name="viewport" content="width=device-width, initial-scale=1"> [Step 1-02] Library Import 전자정부모바일표준프레임워크실행환경을이용하기위해라이브러리를적용한다. <link> Tag 를이용하여 CSS 파일을 Import 한다. <script> Tag 를이용하여 JavaScript 파일을 Import 한다.  <link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.css" /> <link rel="stylesheet" href="/css/egovframework/mbl/cmm/egovmobile.css" /> <script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery min.js"></script> <script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.js"></script> <script type="text/javascript" src="/js/egovframework/mbl/cmm/egovmobile.js"></script> - 4 -

5 Step1. Page Structure [Step 1-03] <body> 영역페이지구조 전자정부모바일표준프레임워크실행환경의사용자경험 (UX) 지원기능을효과적으로적용하기위해서 <body> 를영역별로구분한다. <body> 는 data-role 속성에적용된값에따라 Page, Header, Content, Footer 영역으로구분된다. <body> <div data-role="page > </body> <div data-role="header"> <h1>header</h1> <div data-role="content"> <p>content</p> <div data-role="footer"> <h4>footer</h4> - 5 -

6 Step1. Page Structure [Step 1-04] 테마적용 'data-theme' 속성을이용하여 Page 영역에 'd' 테마 ( 흰색 ) 를, Header 와 Footer 영역에 'b' 테마를적용한다. <div data-role="page data-theme="d"> <div data-role="header data-theme="b"> <h1>header</h1> <div data-role="content"> <p>content</p> <div data-role="footer data-theme="b"> <h4>footer</h4> [Step 1-05] Header 영역에버튼추가 <a> Tag 의 'data-rel' 속성값을 back 으로지정하여 Header 영역에이전페이지로이동하는버튼을생성한다. 'data-icon' 속성값을지정하여뒤로가기모양 (back) 의아이콘을추가한다. <a data-rel="back" data-icon="back">back</a> - 6 -

7 Step2. Button [Step 2-01] 기본버튼생성 [Step 2-02] 인라인버튼생성 [Step 2-03] 버튼그룹생성 [Step 2-04] 버튼색상변경 - 7 -

Step2. Button [Step 2-01] 기본버튼생성 <a> Tag 와 'data-role' 속성을이용하여버튼을생성한다. <a data-role="button"> 기본버튼 </a> [Step 2-02] 인라인버튼생성 'data-inline' 속성을이용하여버튼의너비가텍스트에맞춰진인라인버튼을생성한다.

8 Step2. Button [Step 2-01] 기본버튼생성 <a> Tag 와 'data-role' 속성을이용하여버튼을생성한다. <a data-role="button"> 기본버튼 </a> [Step 2-02] 인라인버튼생성 'data-inline' 속성을이용하여버튼의너비가텍스트에맞춰진인라인버튼을생성한다. <a data-role="button" data-inline="true"> 인라인버튼 </a> [Step 2-03] 버튼그룹생성 'data-role' 속성을갖는 <div> Tag 를이용하여 3 개의버튼이세로로배열된버튼그룹을생성한다. 'controlgroup' 을 'data-role' 속성값으로갖는 <div> Tag 를이용하여버튼그룹을생성할수있다. <div data-role="controlgroup"> <a data-role="button"> 버튼그룹 1</a> <a data-role="button"> 버튼그룹 2</a> <a data-role="button"> 버튼그룹 3</a> - 8 -

9 Step2. Button [Step 2-04] 버튼색상변경 'data-theme' 속성을이용하여 'e' 테마 ( 노란색 ) 가적용된버튼과 'g' 테마 ( 초록색 ) 가적용된버튼을생성한다. <a data-role="button" data-theme="e"> 노란색 </a> <a data-role="button" data-theme="g"> 초록색 </a> - 9 -

10 Step3. Panel [Step 3-01] Panel 생성및색상지정 [Step 3-02] Panel 무늬변경

11 Step3. Panel [Step 3-01] Panel 생성및색상지정 <div> Tag 에 class 속성을지정하여 'e' 테마가적용된 Panel 을생성한다. <div> Tag 에 class 속성을지정하여 'f' 테마가적용된 Panel 을생성한다. Panel의 class 속성값을 'ui-body-[a~g]' 으로지정하여 Panel에색상을적용할수있다. Panel 내부의텍스트크기는 <h3> 으로지정한다.  <div class="ui-body-e"> <h3>panel E</h3>  <div class="ui-body-f"> <h3>panel F</h3>

12 Step3. Panel [Step 3-02] Panel 무늬변경 <div> Tag 에 class 속성을추가하여 'f' 테마가적용된 Panel에 'f' 테마의무늬를적용한다. <div> Tag 에 class 속성을추가하여 'e' 테마가적용된 Panel에 'g' 테마의무늬를적용한다. Panel의 class 속성값에 'egov-panel-pattern-[a~g]' 을추가하여 Panel에무늬를적용할수있다. Panel 내부의텍스트크기는 <h3> 으로지정한다.  <div class="ui-body-f egov-panel-pattern-f"> <h3>panel F with Pattern F</h3>  <div class="ui-body-e egov-panel-pattern-g"> <h3>panel E with Pattern G</h3>

13 Step4. Internal / External Link [Step 4-01] 외부링크생성 [Step 4-02] 도메인내부링크생성

14 Step4. Internal / External Link [Step 4-01] 외부링크생성 <a> Tag 를이용하여모바일실행환경가이드사이트 ( 로이동하는외부링크를생성한다. 생성된외부링크를클릭하여해당링크로의연결을확인한다. <a href=" 모바일실행환경가이드 </a> [Step 4-02] 도메인내부링크생성 <a> Tag 를이용하여 Home("/sample/home.do") 으로이동하는도메인내부링크를생성한다. 생성된도메인내부링크를클릭하여해당링크로의연결과각종페이지전환효과를확인한다. <a href="/sample/home.do">home</a> [Step 4-03] Ajax 사용해제 내부링크로연결되는 <a> Tag에 'data-ajax' 속성값을 'false' 로지정하여 Ajax 방식을사용하지않고페이지를이동한다. Ajax 방식을사용하지않고페이지를이동하면각종페이지전환효과가나타나지않는다. 생성된내부링크를클릭하여해당링크로의연결과페이지전환효과가나타나지않는것을확인한다. <a href="/sample/home.do" data-ajax="false">home</a>

15 Step4. Internal / External Link [Step ] 페이지내부링크버튼생성 <a> Tag 를이용하여페이지 Id 가 'page2' 인 <div> 페이지 (data-role="page") 로이동하는페이지내부링크를생성한다. <a> Tag 에 'data-role' 속성을추가하여버튼형태의링크를생성한다. <a href="#page2" data-role="button">button for Page 2</a> [Step ] 페이지내부링크버튼생성 'data-role' 속성으로정의된페이지에 Id 속성을부여하여페이지를구분한다. [Step ] 에서생성한페이지내부링크버튼을클릭하여해당링크로의연결을확인한다. <div id="page2" data-role="page" data-theme="d">

16 Step5. Label / Text [Step 5-01] 텍스트정렬 [Step 5-02] 폰트설정 [Step 5-03] 텍스트색상변경

17 Step5. Label / Text [Step 5-01] 텍스트정렬 <div> Tag 에 class 속성을지정하여텍스트를왼쪽정렬한다. <div> Tag 에 class 속성을지정하여텍스트를가운데정렬한다. <div> Tag 에 class 속성을지정하여텍스트를오른쪽정렬한다. class 속성값을 'egov-align-[left, center, right]' 로지정하여텍스트를정렬할수있다. <div class="egov-align-left"><h3> 왼쪽정렬 </h3> <div class="egov-align-center"><h3> 가운데정렬 </h3> <div class="egov-align-right"><h3> 오른쪽정렬 </h3> [Step 5-02] 폰트설정 <div> Tag 에 class 속성을지정하여 'egov-font-tahoma' 으로텍스트의폰트를변경한다. <div> Tag 에 class 속성을지정하여 'egov-font-verdana' 으로텍스트의폰트를변경한다. <div class="egov-font-tahoma"><h3>tahoma Font</h3> <div class="egov-font-verdana"><h3>verdana Font</h3>

18 Step5. Label / Text [Step 5-03] 텍스트색상변경 <div> Tag 에 class 속성을지정하여텍스트를초록색으로변경한다. <div> Tag 에 class 속성을지정하여텍스트를빨간색으로변경한다. <div> Tag 에 class 속성을지정하여텍스트를파란색으로변경한다. class 속성값을 'egov-color-[green, red, blue]' 로지정하여텍스트의색상을변경할수있다. <div class="egov-color-green"><h3> 초록색 </h3> <div class="egov-color-red"><h3> 빨간색 </h3> <div class="egov-color-blue"><h3> 파란색 </h3>

19 Step6. Tabs [Step 6-01] Header Tab 생성 [Step 6-02] 탭아이콘추가

Step6. Tabs [Step 6-01] Header Tab 생성 Header 영역에 'navbar' 를 'data-role' 속성값으로갖는 Tab을생성한다. Tab이 2개의항목을갖고 1번째항목이기본적으로활성화되도록설정한다. Tab 첫번째항목의 <a> Tag에 Home("/sample/home.do") 으로이동하는링크를추가한다.

20 Step6. Tabs [Step 6-01] Header Tab 생성 Header 영역에 'navbar' 를 'data-role' 속성값으로갖는 Tab을생성한다. Tab이 2개의항목을갖고 1번째항목이기본적으로활성화되도록설정한다. Tab 첫번째항목의 <a> Tag에 Home("/sample/home.do") 으로이동하는링크를추가한다. Tab 두번째항목의 <a> Tag에 Page Structure("/sample/page.do") 으로이동하는링크를추가한다. <div data-role="header"> <h1>header</h1> <div data-role="navbar"> <ul> <li><a href="/sample/home.do" class="ui-btn-active">home</a></li> <li><a href="/sample/page.do">page Structure</a></li> </ul>

21 Step6. Tabs [Step 6-02] 탭아이콘추가 Tab 항목의 <a> Tag 에 'data-icon' 속성을적용하여순서대로 Gear, Star, Grid 형태의아이콘을 Tab 에추가한다. Tab 이 3 개의항목을갖고 3 번째항목이기본적으로활성화되도록설정한다. <div data-role="navbar"> <ul> <li><a data-icon="gear">gear</a></li> <li><a data-icon="star">star</a></li> <li><a data-icon="grid" class="ui-btn-active">grid</a></li> </ul>

22 Step7. Form [Step 7-01] 기본폼배열 [Step 7-02] 폼구성요소

Step7. Form [Step 7-01] 기본폼배열 폼구성요소들을 'data-role' 속성값이 'fieldcontain' 인 <div> Tag 내부에위치시켜기본배열이갖춰진폼을생성한다. <label> Tag 의 'for' 속성값과폼구성요소의 'id' 속성값을동일하게부여하여 Label 과폼구성요소가짝을이룰수있도록한다.

23 Step7. Form [Step 7-01] 기본폼배열 폼구성요소들을 'data-role' 속성값이 'fieldcontain' 인 <div> Tag 내부에위치시켜기본배열이갖춰진폼을생성한다. <label> Tag 의 'for' 속성값과폼구성요소의 'id' 속성값을동일하게부여하여 Label 과폼구성요소가짝을이룰수있도록한다. Text Input 한개를구성요소로갖는폼을생성한다. Label 로해당 Text Input 에대한타이틀을명시한다. <form> <div data-role="fieldcontain"> <label for="textinput">text Input : </label> <input id="textinput" type="text" /> </form>

Step7. Form [Step 7-02] 폼구성요소 폼구성요소의종류는 Text Inputs, Search Inputs, Sliders, Switches, Radio Buttons, Check Boxes, Selectors 가있다. 기본폼배열에 Text Input, Search Input, Slider, Form Button 를폼구성요소로추가한다.

24 Step7. Form [Step 7-02] 폼구성요소 폼구성요소의종류는 Text Inputs, Search Inputs, Sliders, Switches, Radio Buttons, Check Boxes, Selectors 가있다. 기본폼배열에 Text Input, Search Input, Slider, Form Button 를폼구성요소로추가한다. <input> Tag 의 'type' 속성값을 'search' 로지정하여 Search Input 을생성할수있다. <input>tag 의 'type' 속성값을 'range' 로지정하여 Slider 를생성할수있다. Slider 는 'min', 'max' 속성을추가로지정해주어야한다. <button> Tag 의 'type' 속성을 'submit' 으로지정하여 Submit Button 을생성한다. <form> <div data-role="fieldcontain"> <label for="text">text Input : </label> <input id="text" type="text" /> <div data-role="fieldcontain"> <label for="search">search Input : </label> <input id="search" type="search" /> <div data-role="fieldcontain"> <label for="slider">slider : </label> <input id="slider" type="range" min="0" max="100" /> <div data-role="fieldcontain"> <button type="submit" id="submit">submit Button</button> </form>

25 Step8. Menu [Step 8-01] Accordion 형식의메뉴구성

26 Step8. Menu [Step 8-01] Accordion 형식의메뉴구성 모바일페이지의메뉴기능은 Dialog, Grid, List, Collapsible 의기능을활용하여구현할수있다. Collapsible 기능을이용하여 Accordion 형식의메뉴를구성한다. 'data-role' 속성값이 'collapsible-set' 인 <div> Tag 내부에 'data-role' 속성값이 'collapsible' 인 <div> Tag를추가하여상위메뉴를생성한다. 상위메뉴의 <div> Tag에리스트를추가하여하위메뉴를구성한다. 상위메뉴의텍스트는 <h3> 으로지정한다.<form>

27 Step8. Menu [Step 8-01] Accordion 형식의메뉴구성 <div data-role="collapsible-set"> <div data-role="collapsible"> <h4> 과일 </h4> <ul data-role="listview" data-inset="true"> <li> 사과 </li> <li> 바나나 </li> <li> 포도 </li> <li> 딸기 </li> <li> 수박 </li> </ul> <div data-role="collapsible"> <h4> 야채 </h4> <ul data-role="listview" data-inset="true"> <li> 토마토 </li> <li> 오이 </li> <li> 배추 </li> <li> 양배추 </li> <li> 양파 </li> </ul> <div data-role="collapsible"> <h4> 생선 </h4> <ul data-role="listview" data-inset="true"> <li> 고등어 </li> <li> 꽁치 </li> <li> 갈치 </li> <li> 광어 </li> <li> 연어 </li> </ul>

28 Step9. Progress Dialog / Bar [Step 9-01] Progress Bar 설정 [Step 9-02] Progress Dialog / Bar 색상변경

Step9. Progress Dialog / Bar [Step 9-01] Progress Bar 설정 기본적으로 Progress Dialog 가나타나는설정을 JavaScript 코드를추가하여 Progress Bar 로변경한다. Test 버튼을클릭하여 Progress Bar 가기본적으로나타나는지확인한다.

29 Step9. Progress Dialog / Bar [Step 9-01] Progress Bar 설정 기본적으로 Progress Dialog 가나타나는설정을 JavaScript 코드를추가하여 Progress Bar 로변경한다. Test 버튼을클릭하여 Progress Bar 가기본적으로나타나는지확인한다. <script type="text/javascript" > $(document).bind("mobileinit", function(){ $.mobile.progressbar = true; }); </script> [Step 9-02] Progress Dialog / Bar 색상변경 JavaScript 코드의 $.mobile.progresstheme 값을 'f' 로지정하여빨간색으로색상을변경한다. Test 버튼을클릭하여 Progress Dialog / Bar 의색상이빨간색으로나타나는지확인한다. <script type="text/javascript" > $(document).bind("mobileinit", function(){ $.mobile.progresstheme = 'f'; }); </script>

30 Step10. Dialog [Step 10-01] Dialog 페이지이동 [Step ] Action Sheet 생성 [Step ] Action Sheet 생성 [Step ] Alert Dialog 생성 [Step ] Alert Dialog 생성

31 Step10. Dialog [Step 10-01] Dialog 페이지이동 <a> Tag 의 'data-rel' 속성을 'dialog' 로지정하여 Dialog 형식으로페이지를이동한다. 버튼형식으로 Home("/sample/home.do") 으로이동하는 Dialog 링크를생성한다. <a> Tag 에 'data-transition' 속성을추가하여페이지전환효과를 'flip' 으로설정한다. <a href="/sample/home.do" data-rel="dialog" data-transition="flip" data-role="button">home</a> [Step ] Action Sheet 생성 JavaScript 코드를추가하여 Action Sheet 를생성한다. btmitem 변수를수정하여 2개의선택항목을갖고각각의값이 ' 선택1', ' 선택2' 인 Action Sheet 를생성한다. jactionsheet 메소드의첫번째인자값을변경하여 ' 선택하세요!' 라는메시지가나타나도록설정한다. <script type="text/javascript"> $(document).ready( function() { $("#actionsheet_dialog").click( function() { var btmitem = [{id : 'button1', value: " 선택 1"}, {id : 'button2', value: " 선택 2"}]; jactionsheet(' 선택하세요!', 'Action sheet Dialog', 'a', btmitem, function(r) { $('#actionsheetout').text(r); }); }); }); </script>

Step10. Dialog [Step 10-02-2] Action Sheet 생성 'button' type 의 <input> Tag 에 id 속성값을 'actionsheet_dialog' 로지정하여 Action Sheet 를호출할수있도록한다. id 속성값이 'actionsheetout' 인 Tag 를추가하여선택된값이화면에출력될수있도록한다.

32 Step10. Dialog [Step ] Action Sheet 생성 'button' type 의 <input> Tag 에 id 속성값을 'actionsheet_dialog' 로지정하여 Action Sheet 를호출할수있도록한다. id 속성값이 'actionsheetout' 인 Tag 를추가하여선택된값이화면에출력될수있도록한다. 버튼을클릭하여 Action Sheet 가나타나는지확인한다. <label for="actionsheet_dialog" class="center">you Entered : <strong id="actionsheetout"></strong></label> <input id="actionsheet_dialog" type="button" value="action Sheet" /> [Step ] Alert Dialog 생성 JavaScript 코드를추가하여 Alert Dialog 를생성한다. jalert 메소드의첫번째인자값을변경하여 ' 주의하세요!' 라는메시지가나타나도록설정한다. <script type="text/javascript"> $(document).ready( function() { $("#alert_dialog").click( function() { jalert(' 주의하세요!', 'Alert Dialog', 'a'); }); }); </script>

33 Step10. Dialog [Step ] Alert Dialog 생성 'button' type 의 <input> Tag 에 id 속성값을 'alert_dialog' 로지정하여 Alert Dialog 를호출할수있도록한다. 버튼을클릭하여 Alert Dialog 가나타나는지확인한다. <input id="alert_dialog" type="button" value="alert Dialog" />

34 Step11. Grid View [Step 11-01] 기본 Grid View 생성 [Step 11-02] 다중행 Grid View 생성 [Step 11-03] Grid View 버튼배열

35 Step11. Grid View [Step 11-01] 기본 Grid View 생성 <div> Tag 에 class 속성을추가하여 3 개의셀을갖고화면을 3 등분하는 Grid View 를생성한다. <div class="ui-grid-b"> <div class="ui-block-a">a1 <div class="ui-block-b">b1 <div class="ui-block-c">c1-35 -

36 Step11. Grid View [Step 11-02] 다중행 Grid View 생성 Gird View 의셀내용에 Panel 을적용하여 Panel 이배경으로적용된 Grid View 를생성한다. 2 개의행을갖고화면을 2 등분하는 Grid View 를생성한다. class 속성값이 "ui-grid-" 으로시작하는 <div> Tag 내부에 class 속성값이 "ui-block-" 으로시작하는 <div> Tag 를반복적으로배치하여다중행 Grid View 를생성한다. 첫번째행에 'a' 테마가적용된 Panel 을추가하여검정색으로지정한다. 두번째행에 'g' 테마가적용된 Panel 을추가하여초록색으로지정한다. <div class="ui-grid-a"> <div class="ui-block-a"><div class="ui-body-f egov-align-center"><h3>a1</h3> <div class="ui-block-b"><div class="ui-body-f egov-align-center"><h3>b1</h3> <div class="ui-block-a"><div class="ui-body-e egov-align-center"><h3>a2</h3> <div class="ui-block-b"><div class="ui-body-e egov-align-center"><h3>b2</h3>

Step11. Grid View [Step 11-03] Grid View 버튼배열 Grid 선언클래스내컴포넌트를추가하면해당컴포넌트가그크기에맞게나타난다. Grid View 의셀내용으로버튼을추가하여화면을 4 등분하고 2 개의행을갖는 Grid View 버튼배열을생성한다.

37 Step11. Grid View [Step 11-03] Grid View 버튼배열 Grid 선언클래스내컴포넌트를추가하면해당컴포넌트가그크기에맞게나타난다. Grid View 의셀내용으로버튼을추가하여화면을 4 등분하고 2 개의행을갖는 Grid View 버튼배열을생성한다. <div class="ui-grid-b"> <div class="ui-block-a"><a data-role="button">a1</a> <div class="ui-block-b"><a data-role="button">b1</a> <div class="ui-block-c"><a data-role="button">c1</a> <div class="ui-block-a"><a data-role="button">a2</a> <div class="ui-block-b"><a data-role="button">b2</a> <div class="ui-block-c"><a data-role="button">c2</a>

38 Step12. List View [Step 12-01] 기본 List View 생성 (Read Only) [Step 12-02] 기본 List View 생성 (Link) [Step 12-03] List Content Formatting [Step 12-04] Split Button & Search Filter 생성 [Step 12-05] Nested List 생성

Step12. List View [Step 12-01] 기본 List View 생성 (Read Only) <ul> Tag 에 'data-role' 속성을추가하여기본 List View 를생성한다. <ul> Tag 에 'data-inset' 속성을추가하여화면레이아웃에알맞는 List View 를생성한다.

39 Step12. List View [Step 12-01] 기본 List View 생성 (Read Only) <ul> Tag 에 'data-role' 속성을추가하여기본 List View 를생성한다. <ul> Tag 에 'data-inset' 속성을추가하여화면레이아웃에알맞는 List View 를생성한다. 'Home', 'Page Structure', 'List View' 를항목으로갖는 List View 를생성한다. <ul data-role="listview" data-inset="true"> <li>home</li> <li>page Structure</li> <li>list View</li> </ul> [Step 12-02] 기본 List View 생성 (Link) 'Home', 'Page Structure', 'List View' 를항목으로갖는 List View 를생성한다. 리스트항목 (<li> Tag) 에 <a> Tag 를추가하여해당페이지로연결될수있도록한다. Home(/sample/home.do), Page Structure(/sample/page.do), List View(/sample/list.do) <ul data-role="listview" data-inset="true"> <li><a href="/sample/home.do">home</a></li> <li><a href="/sample/page.do">page Structure</a></li> <li><a href="/sample/list.do">list View</a></li> </ul>

40 Step12. List View [Step 12-03] List Content Formatting List Divider 로구분된 List View 를생성한다. List View 의 'data-dividertheme' 속성을추가하여 List Divider 에 'f' 테마를적용하여빨간색으로변경한다. List Divider 로구분된 List 의첫번째카테고리의항목들에 Count Bubble 을추가한다. <h3> Tag 와 <p> Tag 를이용하여 List View 텍스트에다양한효과를적용한다

41 Step12. List View [Step 12-03] List Content Formatting <ul data-role="listview" data-inset="true" data-dividertheme="f"> <li data-role="list-divider"> 과일 </li> <li><a> <h3> 사과 </h3> <p> 무기질이풍부한과일 </p> <span class="ui-li-count">apple</span> </a></li> <li><a> <h3> 바나나 </h3> <p> 탄수화물이풍부한과일 </p> <span class="ui-li-count">banana</span> </a></li> <li data-role="list-divider"> 야채 </li> <li><a> <h3> 오이 </h3> <p> 수분이많은야채 </p> </a></li> <li><a> <h3> 양배추 </h3> <p> 위궤양에도움이되는야채 </p> </a></li> <li><a> <h3> 당근 </h3> <p> 지용성비타민이풍부한야채 </p> </a></li> </ul>

42 Step12. List View [Step 12-04] Split Button & Search Filter 생성 [Step 12-01] 의 List View 에 Split Button 과 Search Filter 를추가하여과제를수행한다. List 항목에두개의 <a> Tag 를추가하여 Split Button 을생성한다. Split Button 의링크가 Home("/sample/home.do") 으로연결되도록설정한다. List 에 'data-split-icon' 속성을추가하여 Split Button 의아이콘을집모양 (home) 으로변경한다. List 에 'data-filter' 속성을추가하여 List 상단에 Search Filter 를생성한다. <ul data-role="listview" data-inset="true" data-split-icon="home" data-filter="true"> <li><a href="/sample/home.do">home</a><a href="/sample/home.do">home</a></li> <li><a href="/sample/page.do">page Structure</a><a href="/sample/home.do">home</a></li> <li><a href="/sample/list.do">list View</a><a href="/sample/home.do">home</a></li> </ul>

43 Step12. List View [Step 12-05] Nested List 생성 하나의 List 를 List 항목 (<li> Tag) 으로갖는 Nested List 를생성한다. [Step 12-02] List View 의 List Divider 타이틀을상위 List 로갖는 Nested List 를생성한다. 상위 List 의항목을클릭하여 List 의하위항목페이지로이동하는것을확인한다

44 Step12. List View [Step 12-05] Nested List 생성 <ul data-role="listview" data-inset="true"> <li> 과일 <ul data-role="listview"> <li><a> <h3> 사과 </h3> <p> 무기질이풍부한과일 </p> <span class="ui-li-count">apple</span> </a></li> <li><a> <h3> 바나나 </h3> <p> 탄수화물이풍부한과일 </p> <span class="ui-li-count">banana</span> </a></li> </ul> </li> <li> 야채 <ul data-role="listview"> <li><a> <h3> 오이 </h3> <p> 수분이많은야채 </p> </a></li> <li><a> <h3> 양배추 </h3> <p> 위궤양에도움이되는야채 </p> </a></li> <li><a> <h3> 당근 </h3> <p> 지용성비타민이풍부한야채 </p> </a></li> </ul> </li> </ul>

Time Picker 설정 [Step 13-01-2] Date / Time

45 Step13. Date / Time Picker [Step ] Date / Time Picker 설정 [Step ] Date / Time Picker 설정 [Step 13-02] 달력형태 Date Picker 호출 [Step 13-03] 12 시간단위 Time Picker 호출

Step13. Date / Time Picker [Step 13-01-1] Date / Time Picker 설정 Date / Time Picker 사용을위하여 JavaScript 코드를순서대로추가한다. <script type="text/javascript"> $( document ).bind( "mobileinit", function(){ $.

46 Step13. Date / Time Picker [Step ] Date / Time Picker 설정 Date / Time Picker 사용을위하여 JavaScript 코드를순서대로추가한다. <script type="text/javascript"> $( document ).bind( "mobileinit", function(){ $.mobile.page.prototype.options.degradeinputs.date = 'text'; }); </script> [Step ] Date / Time Picker 설정 Date / Time Picker 사용을위하여 JavaScript 코드를순서대로추가한다. <script type="text/javascript" src="/js/egovframework/mbl/cmm/datepicker/jquery.mobile.datebox.js"></script>

47 Step13. Date / Time Picker [Step 13-02] 달력형태 Date Picker 호출 <input> Tag 에 'name', 'id', 'type', 'data-role', 'data-options' 속성을지정하여달력형태의 Date Picker 를호출한다. <input name="mydate" id="defandroid" type="date" data-role="datebox" data-options='{"mode": "calbox"}' /> [Step 13-03] 12 시간단위 Time Picker 호출 <input> Tag 에 'name', 'id', 'type', 'data-role', 'data-options' 속성을지정하여 12 시간단위의 Time Picker 를호출한다. <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "timebox", "timeformat": 12}' />

48 Step14. Check / Radio [Step 14-01] Check Box 생성 [Step 14-02] Radio Button 생성 [Step ] Radio Button 새로고침 [Step ] Radio Button 새로고침

Step14. Check / Radio [Step 14-01] Check Box 생성 <input> Tag 의 'type' 속성을 'checkbox' 로지정하여 Check Box 를생성한다. 동일 Check Box 에속해있는각항목의 'name' 속성을동일하게부여하여다중선택이가능하도록설정한다.

49 Step14. Check / Radio [Step 14-01] Check Box 생성 <input> Tag 의 'type' 속성을 'checkbox' 로지정하여 Check Box 를생성한다. 동일 Check Box 에속해있는각항목의 'name' 속성을동일하게부여하여다중선택이가능하도록설정한다. <legend> Tag 를추가하여 Check Box 의타이틀을명시한다. <fieldset> Tag 에 'data-role' 속성을추가하여 Check Box 그룹을생성한다. 기본적으로두번째항목에체크된효과가나타나도록설정하여두개의항목을갖는 Check Box 를생성한다. <fieldset data-role="controlgroup"> <legend>check Box : </legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1">check Box 1</label> <input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked"/> <label for="checkbox-2">check Box 2</label> </fieldset>

Step14. Check / Radio [Step 14-02] Radio Button 생성 <input> Tag 의 'type' 속성을 'radio' 로지정하여 Radio Button 을생성한다. 동일 Radio Button 에속해있는각항목의 'name' 속성을유일하게부여하여단일선택이가능하도록설정한다.

50 Step14. Check / Radio [Step 14-02] Radio Button 생성 <input> Tag 의 'type' 속성을 'radio' 로지정하여 Radio Button 을생성한다. 동일 Radio Button 에속해있는각항목의 'name' 속성을유일하게부여하여단일선택이가능하도록설정한다. <legend> Tag 를추가하여 Radio Button 의타이틀을명시한다. <fieldset> Tag 에 'data-role' 속성을추가하여가로로형성된 Radio Button 그룹을생성한다. 기본적으로첫번째항목에체크된효과가나타나도록설정하여 3 개의항목을갖는 Radio Button 을생성한다. <fieldset data-role="controlgroup" data-type="horizontal"> <legend>radio Button : </legend> <input type="radio" name="radio-1" id="radio-1" value="choice-1" checked="checked" /> <label for="radio-1">radio 1</label> <input type="radio" name="radio-1" id="radio-2" value="choice-2" /> <label for="radio-2">radio 2</label> </fieldset>

Step14. Check / Radio [Step 14-03-1] Radio Button 새로고침 Radio Button 을새로고침할수있는 JavaScript 를추가하여 'id' 속성값이 'radio' 인 Radio Button 을새로고침한다.

51 Step14. Check / Radio [Step ] Radio Button 새로고침 Radio Button 을새로고침할수있는 JavaScript 를추가하여 'id' 속성값이 'radio' 인 Radio Button 을새로고침한다. <script type="text/javascript" > function radiorefresh() { $("#radio input[type='radio']").attr("checked",false).checkboxradio("refresh"); } </script> [Step ] Radio Button 새로고침 ' 새로고침 ' 버튼을클릭하여 Radio Button 이새로고침되는것을확인한다

52 Step15. Icon [Step 15-01] Icon 생성 [Step 15-02] Icon 위치변경 [Step 15-03] Icon 형태및색상변경

53 Step15. Icon [Step 15-01] Icon 생성 버튼에 'data-icon' 속성을추가하여집모양 (home) 의 Icon 을생성한다. <a href="/sample/home.do" data-role="button" data-icon="home">home</a> [Step 15-02] Icon 위치변경 버튼에 'data-iconpos' 속성을추가하여버튼의위쪽에 Icon 을위치시킨다. 버튼에 'data-iconpos' 속성을추가하여버튼의아래쪽에 Icon 을위치시킨다. 버튼에 'data-iconpos' 속성을추가하여 Icon 만존재하는버튼을생성한다. 별모양 (star) 의 Icon 을생성한다. <a data-role="button" data-icon="star" data-iconpos="top"> 위쪽 </a> <a data-role="button" data-icon="star" data-iconpos="bottom"> 아래쪽 </a>

54 Step15. Icon [Step 15-03] Icon 형태및색상변경 버튼에 'data-iconpos' 속성을추가하여 Icon 만존재하는버튼을생성한다. 버튼에 'data-theme' 속성을변경하여 Icon 의색생을변경한다. 버튼에 'data-inline' 속성을추가하여 Icon 이나란히배열될수있도록한다. 돋보기모양 (search) 의 Icon 만존재하는버튼을생성하고 'a' 테마를적용하여검정색으로색상을변경한다. 느낌표모양 (info) 의 Icon 만존재하는버튼을생성하고 'g' 테마를적용하여초록색으로색상을변경한다. 휴대폰모양 (phone) 의 Icon 만존재하는버튼을생성하고 'e' 테마를적용하여노란색으로색상을변경한다. 격자모양 (grid) 의 Icon 만존재하는버튼을생성하고 f' 테마를적용하여빨간색으로색상을변경한다. <a data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true"> 돋보기 </a> <a data-role="button" data-icon="info" data-iconpos="notext" data-theme="g" data-inline="true"> 느낌표 </a> <a data-role="button" data-icon="phone" data-iconpos="notext" data-theme="e" data-inline="true"> 휴대폰 </a> <a data-role="button" data-icon="grid" data-iconpos="notext" data-theme="f" data-inline="true"> 격자모양 </a>

55 Step16. Selector / Switch [Step 16-01] Selector 생성 [Step 16-02] Selector 형태변경 [Step 16-03] Switch 생성

56 Step16. Selector / Switch [Step 16-01] Selector 생성 <select> Tag 내부에네개의 <option> 을추가하여네가지를선택할수있는 Selector 를생성한다. <label> Tag 를추가하여 Selector 의타이틀을명시한다. 'fieldcontain' 속성을갖는 <div> Tag 로 <label> Tag 와 <select> Tag 를알맞게배열한다. <div data-role="fieldcontain"> <label for="select-choice-1" class="select">selector : </label> <select name="select-choice-1" id="select-choice-1"> <option value="selector 1">Selector 1</option> <option value="selector 2">Selector 2</option> <option value="selector 3">Selector 3</option> <option value="selector 4">Selector 4</option> </select>

Step16. Selector / Switch [Step 16-02] Selector 형태변경 [Step 16-01] 의 Selecotr 에 'data-native-menu' 속성을추가하여 Selector 의형태를변경한다. Selector 에 'multiple' 속성을추가하여다중선택이가능하도록설정한다.

57 Step16. Selector / Switch [Step 16-02] Selector 형태변경 [Step 16-01] 의 Selecotr 에 'data-native-menu' 속성을추가하여 Selector 의형태를변경한다. Selector 에 'multiple' 속성을추가하여다중선택이가능하도록설정한다. 'fieldcontain' 속성을갖는 <div> Tag 로 <label> Tag 와 <select> Tag 를알맞게배열한다. <div data-role="fieldcontain"> <label for="select-choice-2" class="select">selector :</label> <select name="select-choice-2" id="select-choice-2" data-native-menu="false" multiple="multiple"> <option value="selector 1">Selector 1</option> <option value="selector 2">Selector 2</option> <option value="selector 3">Selector 3</option> <option value="selector 4">Selector 4</option> </select>

Step16. Selector / Switch [Step 16-03] Switch 생성 <select> Tag 의 'data-role' 속성값을 'slider' 로지정하여 Switch 를생성한다. <label> Tag 를추가하여타이틀을명시하고 <option> 값을 'On', 'Off' 로설정한다.

58 Step16. Selector / Switch [Step 16-03] Switch 생성 <select> Tag 의 'data-role' 속성값을 'slider' 로지정하여 Switch 를생성한다. <label> Tag 를추가하여타이틀을명시하고 <option> 값을 'On', 'Off' 로설정한다. 'fieldcontain' 속성을갖는 <div> Tag 로 <label> Tag 와 <select> Tag 를알맞게배열한다. <div data-role="fieldcontain"> <label for="slider">switch :</label> <select name="slider" id="slider" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select>

59 Step17. Collapsible Block [Step 17-01] Collapsible Block 생성 [Step 17-02] Collapsible Block 형태변경

Step17. Collapsible Block [Step 17-01] Collapsible Block 생성 <collapsible> div Tag 를 2개생성한다. <H3> Tag 를추가하여 collapsible 의타이틀을명시한다. <p> Tag를추가하여 collapsible 를펼쳤을때내용을명시한다.

60 Step17. Collapsible Block [Step 17-01] Collapsible Block 생성 <collapsible> div Tag 를 2개생성한다. <H3> Tag 를추가하여 collapsible 의타이틀을명시한다. <p> Tag를추가하여 collapsible 를펼쳤을때내용을명시한다. <div data-role="collapsible"> <h3>default collapsible header</h3> <p>default collapsible header content</p> <div data-role="collapsible" data-collapsed="false"> <h3>open collapsible header</h3> <p>open collapsible header content</p>

Step17. Collapsible Block [Step 17-02] Collapsible Block 형태변경 [Step 17-01] 의 collapsible 에 <data-role= collapsible-set> Tag 를추가하여 Collapsible 를그룹형태로변경한다.

61 Step17. Collapsible Block [Step 17-02] Collapsible Block 형태변경 [Step 17-01] 의 collapsible 에 <data-role= collapsible-set> Tag 를추가하여 Collapsible 를그룹형태로변경한다. <div data-role="collapsible-set"> <div data-role="collapsible"> <h3>default collapsible header</h3> <p>default collapsible header content</p> <div data-role="collapsible" data-collapsed="false"> <h3>open collapsible header</h3> <p>open collapsible header content</p>

슬라이드 1

슬라이드 1 전자정부모바일표준프레임워크실행환경 ( 모바일 ) - 1 - 1. 개요 2. 배경 3. 실행환경특징 4. 실행환경구성 5. 실행환경구조 6. UX Component 7. 가이드프로그램 (UX Code Generator) 8. 참고사이트 - 2 - 1. 개요 전자정부모바일표준프레임워크실행환경의사용자경험 (UX) 지원기능은스마트기반모바일환경에서최적화된화면처리기능,