Jqm+appspresso 기초 설명

1. JQM과 APPSPERSSO를 활용한 하이브리드 앱 디자인과 WAC API 사용법

2. 기초 지식 2

3. JQuery ? JQuery는 Javascript라이브 러리의일종 애니메이션, 이벤트처리, AJAX등을 위해 만듬 보다 쉽게 Javascript컨트롤하기 위해 만들어짐 Javascript라이브 러리들 중에서 가장 인기 Script.aculo.us, Prototype.js 등 참고 사이트 : http://docs.jquery.com/Main_Page 3

4. JQueryMobile(JQM)? JQM은 Jqurey를 활용하는 UI프레임워크 Mobile답게스마트폰과태블릿에 중점 여러 Device에 UI를 쉽게 만들 수 있다는 장점 참고 사이트 : http://jquerymobile.com/ http://w3labs.kr/?p=326 http://www.ibare.kr/tag/jquerymobile 4

5. APPSPRESSO ? KTH에서 개발된 최신의 프레임워크 풀 하이브리드 방식 Web View를 이용하지 않음 강력한 개발환경 지원 웹앱 표준인 WAC waikiki API를 지원 이클립스IDE 지원 5

6. APPSPRESSO ? 참고 사이트 : http://www.appspresso.com/appdev/appMain.do http://www.ibare.kr/talk/358 6

7. HTML5 W3C에서 만들고 있는 차세대 웹 표준 다양한 브라우저와 기기에서 똑같이 보일 수 있도록 만드는 산업 표준 모든 브라우저 벤더 참여 7

8. HTML 5 참고 사이트 : http://www.w3.org/TR/html5/ http://channy.creation.net/blog/776 http://html.nhndesign.com/blog/22882 http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html 8

9. CSS3 HTML 문서의 양식을 지정하는 보조 문서 CSS3는 기존의 CSS2를 보안하여 나옴 HTML5와 함께 쓰이며 강력한 표현력 지원 다만, 아직 많은 브라우저등이 지원하지 않는 기능이 많음 (참고사이트 활용) 9

10. CSS3 참고 사이트 : http://naradesign.net/ouif/css3/ http://www.findmebyip.com/litmus(지원여부) http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/ 10

11. 풀 Hybrid APP 구현 방식 Hybird APP 네이티브 형식으로 패키징 (폰갭, 앱스프레소, 티타늄) JQM 디자인 소스 Device API 사용자 JS JQM라이브러리 HTML5 + CSS3 소스 11

12. Hybird APP 부분Hybrid APP 구현 방식 JAVA 소스 Device API JQM 내부 소스 사용자 JS 컴파일 JQM라이브러리 XML 소스 HTML5 + CSS3 소스 WEB VIEW 기존 안드로이드 개발 방식(외부 소스) 12

13. JQM 디자인 APPSPERSSO 기준으로 설명 13

14. 시작 Index.html 생성 후 Js와 css정의 일반적인 내용은 HTML문법 그대로 사용 14

15. 활용1 JQM 환경에서 디자인 할 때 분리된 내용은 DVI 태그로 구분 하는 것이 좋다. JQM이 지원 해주는 많은 디자인 기능이 DVI단위로 많이 이루어 지기 때문이다. 15

16. 활용2 JS import 할때 반드시 JQM 보다 Jquery를 먼저 써준다. 이렇게 쓰지 않을 경우 JQM이 제대로 동작하지 않는다. 옳은 경우 틀린 경우 16

17. CSS활용 HTML5가 되면서 많은 디자인 속성이 사라짐 CSS3가 나머지를 전부 대체함. CSS 적용 방법은 속성인 ID에 이름을 적고 CSS에서 원하는 ID에 필요한 속성 지정 <divid="live-preview"></div> #live-preview { width: 100px; height: 150px; } 17

18. 사용자 JS 활용 개인이 JS만들 경우 ./JS 폴더에 넣은 후 Import 기타 JS사용 방법은 기존 홈페이지에서 활용되던 방법과 같다. <scripttype="text/javascript" src="/js/index.js"></script> 18

19. 활용3 JQM의 벤딩처리 비록 JQM이 여러 가지 디바이스에서 활용할 수 있긴하지만 기기의 한계상 불가피 하게 사용되지 못하는 부분도 있다. 따라서 기기 별로 활용 할 수 있도록 벤딩 처리를 해야 한다. //Android or IOS? varDeviceVendor = null; deviceapis.devicestatus.getPropertyValue( function (value) { if(value.indexOf('Apple') == 0){ DeviceVendor = 'IOS'; }else{ DeviceVendor = 'Android'; } }, errorCallback, { aspect: "Device", property : "vendor"} ); 벤딩처리 샘플코드 19

20. JQM활용 앱과 같은 디자인을 위하여 사용 태그 속성의 data-role과 data-position 사용하여 표현 <div data-role="content"> <uldata-role="listview"> <li><a href="camera.html"> <h1>Camera</h1> <p>Photo, Camera, Video, File and more...</p><span class="ui-li-count">3</span></a> </li> </ul> </div> Content(본문) 부분에 listview형식의 내용 삽입 내용은 <li>의 내용에 의해 구분 20

21. JQM활용2 <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <uldata-inset="true"> <li><a id="main_btn" href="/main.html" data-role="button" data-icon="star" data-iconpos="top">Main</a></li> <li><a id="plus_btn" href="/camera.html" data-role="button" data-icon="plus" data-iconpos="top">Plus</a></li> <li><a id="arrow_btn" href="/arrow.html" data-role="button" data-icon="arrow-d" data-iconpos="top">Arrow</a></li> <li><a id="gear_btn" href="/gear.htmml" data-role="button" data-icon="gear" data-iconpos="top">Setting</a></li> <li><a id="info_btn" href="/info.html" data-role="button" data-icon="info" data-iconpos="top">Info</a></li> </ul> </div> </div> footer(결론, 하단) 부분에 navbar형식의 내용 삽입 내용은 <li>의 내용에 의해 구분 21

22. JQM활용3 디자인 커스터마이징 소스코드에서 특정 인자에 접근 하여 변환 가능 예)$.mobile.page.prototype.options.backBtnText = “뒤로가기";. 다른 다양한 UI 표현 방법들 http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/참조 22

23. JQM활용4 자체 API이용 이벤트, 매소드사용, 레이아웃, 테마 등 사용자 JS파일을 만들어 API이용 http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/api/globalconfig.html참조. 23

24. DEVICE API 사용법 APPSPERSSO 기준으로 설명 24

25. WAC Wholesale Applications Community 일종의 애플리케이션 도매시장 애플, 구글과 떨어져 통신사들이 뭉쳐 만들어낸 규격 OS기반이 아닌 표준화된 개발환경 제공 다양한 디바이스에 사용가능 25

26. WAC API Device API의 일종 Appspresso에서 사용 모바일 디바이스 내부의 기능들을 웹과 연동하는 API 를 제공 카메라/갤러리/연락처/일정/파일 등에 접근하게 가능 26

27. WAC API 활용 1 디바이스 API 이용방법 1. 디바이스 이용과 관련된 JS작성 2. 작성된 JS파일 import <scripttype="text/javascript" src="/js/camera-capture-video.js"></script> 27

28. WAC API 활용 2 확장 API에서 제공하는 카메라 호출 데모 자바 스크립트에서 이루어짐 //DOC: http://www.appspresso.com/appdev/doc/symbols/ax.ext.media.html ax.ext.media.captureImage({}, function (filename) { deviceapis.filesystem.resolve( function(file) { $("#user-capture-image").html("<imgsrc=""+file.toURI()+"" alt="" width="100%" />"); ax.ext.ui.alert($("#user-capture-image").html(),function(){}); }, errorCallback, filename, "r"); }, errorCallback); 28

29. WAC API활용 3 디바이스 정보 가져오기 ... // wifi status deviceapis.devicestatus.getPropertyValue( function (value) { $("#device .wifi-status").html(value); }, getDeviceErrorCallback, { aspect: "WiFiNetwork", property : "networkStatus"}); // device vender deviceapis.devicestatus.getPropertyValue( function (value) { $("#device .device-vendor").html(value); }, getDeviceErrorCallback, { aspect: "Device", property : "vendor"}); // O/S version deviceapis.devicestatus.getPropertyValue( function (value) { $("#device .os-version").html(value); }, getDeviceErrorCallback, { aspect: "OperatingSystem", property : "version"}); ... 29

30. 기타 다른 디바이스 사용법 사이트 참조 : http://www.appspresso.com/appdev/doc/api.html 30

32. http://xguru.net/593

33. http://dayofjs.com/

34. http://www.slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks

35. http://code.google.com/p/jslibs/wiki/JavascriptTips#language_advanced_Tips_&_Tricks31

36. 끝. 32