JQM과 APPSPERSSO를 <br />활용한 하이브리드 앱<br />디자인과 WAC API 사용법<br />
기초 지식<br />2<br />
JQuery ?<br />JQuery는 Javascript라이브 러리의일종<br />애니메이션, 이벤트처리, AJAX등을 위해 만듬<br />보다 쉽게 Javascript컨트롤하기 위해 만들어짐<br />Javascri...
JQueryMobile(JQM)?<br />JQM은  Jqurey를 활용하는 UI프레임워크<br />Mobile답게스마트폰과태블릿에 중점<br />여러 Device에 UI를 쉽게 만들 수 있다는 장점<br />참고 사이...
APPSPRESSO ?<br />KTH에서 개발된 최신의 프레임워크<br />풀 하이브리드 방식<br />Web View를 이용하지 않음<br />강력한 개발환경 지원<br />웹앱 표준인 WAC waikiki API를...
APPSPRESSO ?<br />참고 사이트 :<br />http://www.appspresso.com/appdev/appMain.do<br />http://www.ibare.kr/talk/358<br />6<br />
HTML5<br />W3C에서 만들고 있는 차세대 웹 표준<br />다양한 브라우저와 기기에서 똑같이 보일 수 있도록 만드는 산업 표준<br />모든 브라우저 벤더 참여<br />7<br />
HTML 5<br />참고 사이트 : <br />http://www.w3.org/TR/html5/<br />http://channy.creation.net/blog/776<br />http://html.nhndesign...
CSS3<br />HTML 문서의 양식을 지정하는 보조 문서<br />CSS3는 기존의 CSS2를 보안하여 나옴<br />HTML5와 함께 쓰이며 강력한 표현력 지원<br />다만, 아직 많은 브라우저등이 지원하지 않는...
CSS3<br />참고 사이트 : <br />http://naradesign.net/ouif/css3/<br />http://www.findmebyip.com/litmus(지원여부)<br />http://www.w3.o...
풀 Hybrid APP 구현 방식<br />Hybird<br />APP<br />네이티브<br />형식으로 패키징<br />(폰갭,<br />앱스프레소, <br />티타늄)<br />JQM 디자인 소스<br />Devi...
Hybird<br />APP<br />부분Hybrid APP 구현 방식<br />JAVA<br />소스<br />Device<br />API<br />JQM 내부 소스<br />사용자 JS<br />컴파일<br />JQ...
JQM 디자인<br />APPSPERSSO 기준으로 설명<br />13<br />
시작<br />Index.html 생성 후 Js와 css정의<br />일반적인 내용은 HTML문법 그대로 사용<br />14<br />
활용1<br />JQM 환경에서 디자인 할 때 분리된 내용은     DVI 태그로 구분 하는 것이 좋다.<br />JQM이 지원 해주는 많은 디자인 기능이    DVI단위로 많이 이루어 지기 때문이다.<br />15<b...
활용2<br />JS import 할때 반드시 JQM 보다 Jquery를 먼저 써준다.<br />이렇게 쓰지 않을 경우 JQM이 제대로 동작하지 않는다.<br />옳은 경우<br />틀린 경우<br />16<br />
CSS활용<br />HTML5가 되면서 많은 디자인 속성이 사라짐<br />CSS3가 나머지를 전부 대체함.<br />CSS 적용 방법은 속성인 ID에 이름을 적고<br />CSS에서 원하는 ID에 필요한 속성 지정<b...
사용자 JS 활용<br />개인이 JS만들 경우 ./JS 폴더에 넣은 후 Import<br />기타 JS사용 방법은 기존 홈페이지에서 활용되던    방법과 같다.<br /><scripttype="text/javascri...
활용3<br />JQM의 벤딩처리<br />비록 JQM이 여러 가지 디바이스에서 활용할 수 있긴하지만 기기의 한계상 불가피 하게 사용되지 못하는 부분도 있다. 따라서 기기 별로 활용 할 수 있도록 벤딩 처리를 해야 한다...
JQM활용<br />앱과 같은 디자인을 위하여 사용<br />태그 속성의 data-role과 data-position 사용하여 표현<br /><div data-role="content"><br /><uldata-role...
JQM활용2<br /><div data-role="footer" data-position="fixed"><br /><div data-role="navbar"><br /><uldata-inset="true"><br /><...
JQM활용3<br />디자인 커스터마이징<br />소스코드에서 특정 인자에 접근 하여 변환 가능<br />예)$.mobile.page.prototype.options.backBtnText = “뒤로가기";.<br />다...
JQM활용4<br />자체 API이용<br />이벤트, 매소드사용, 레이아웃, 테마 등<br />사용자 JS파일을 만들어 API이용<br />http://jquerymobile.com/demos/1.0b1/#/demos...
DEVICE API 사용법<br />APPSPERSSO 기준으로 설명<br />24<br />
WAC <br />Wholesale Applications Community<br />일종의 애플리케이션 도매시장<br />애플, 구글과 떨어져 통신사들이 뭉쳐 만들어낸 규격<br />OS기반이 아닌 표준화된 개발환경 ...
WAC API<br />Device API의 일종<br />Appspresso에서 사용<br />모바일 디바이스 내부의 기능들을 웹과 연동하는 API 를 제공<br /> 카메라/갤러리/연락처/일정/파일 등에 접근하게 가...
WAC API 활용 1<br />디바이스 API 이용방법<br />1. 디바이스 이용과 관련된 JS작성<br />2. 작성된 JS파일 import<br /><scripttype="text/javascript" src="...
WAC API 활용 2<br />확장 API에서 제공하는 카메라 호출 데모<br />자바 스크립트에서 이루어짐<br />//DOC: http://www.appspresso.com/appdev/doc/symbols/ax....
WAC API활용 3<br />디바이스 정보 가져오기<br />...<br />// wifi status <br />deviceapis.devicestatus.getPropertyValue( <br />function ...
기타 다른 디바이스 사용법<br />사이트 참조 : <br />http://www.appspresso.com/appdev/doc/api.html<br />30<br />
기타 참조 사이트<br /><ul><li>http://xguru.net/626
http://xguru.net/593
Upcoming SlideShare
Loading in …5
×

Jqm+appspresso

3,642 views

Published on

Jqm+appspresso 기초 설명

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,642
On SlideShare
0
From Embeds
0
Number of Embeds
735
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Jqm+appspresso

  1. 1. JQM과 APPSPERSSO를 <br />활용한 하이브리드 앱<br />디자인과 WAC API 사용법<br />
  2. 2. 기초 지식<br />2<br />
  3. 3. JQuery ?<br />JQuery는 Javascript라이브 러리의일종<br />애니메이션, 이벤트처리, AJAX등을 위해 만듬<br />보다 쉽게 Javascript컨트롤하기 위해 만들어짐<br />Javascript라이브 러리들 중에서 가장 인기<br />Script.aculo.us, Prototype.js 등<br />참고 사이트 : http://docs.jquery.com/Main_Page<br />3<br />
  4. 4. JQueryMobile(JQM)?<br />JQM은 Jqurey를 활용하는 UI프레임워크<br />Mobile답게스마트폰과태블릿에 중점<br />여러 Device에 UI를 쉽게 만들 수 있다는 장점<br />참고 사이트 :<br />http://jquerymobile.com/<br />http://w3labs.kr/?p=326<br />http://www.ibare.kr/tag/jquerymobile<br />4<br />
  5. 5. APPSPRESSO ?<br />KTH에서 개발된 최신의 프레임워크<br />풀 하이브리드 방식<br />Web View를 이용하지 않음<br />강력한 개발환경 지원<br />웹앱 표준인 WAC waikiki API를 지원<br />이클립스IDE 지원<br />5<br />
  6. 6. APPSPRESSO ?<br />참고 사이트 :<br />http://www.appspresso.com/appdev/appMain.do<br />http://www.ibare.kr/talk/358<br />6<br />
  7. 7. HTML5<br />W3C에서 만들고 있는 차세대 웹 표준<br />다양한 브라우저와 기기에서 똑같이 보일 수 있도록 만드는 산업 표준<br />모든 브라우저 벤더 참여<br />7<br />
  8. 8. HTML 5<br />참고 사이트 : <br />http://www.w3.org/TR/html5/<br />http://channy.creation.net/blog/776<br />http://html.nhndesign.com/blog/22882<br />http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html<br />8<br />
  9. 9. CSS3<br />HTML 문서의 양식을 지정하는 보조 문서<br />CSS3는 기존의 CSS2를 보안하여 나옴<br />HTML5와 함께 쓰이며 강력한 표현력 지원<br />다만, 아직 많은 브라우저등이 지원하지 않는 기능이 많음 (참고사이트 활용)<br />9<br />
  10. 10. CSS3<br />참고 사이트 : <br />http://naradesign.net/ouif/css3/<br />http://www.findmebyip.com/litmus(지원여부)<br />http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/<br />10<br />
  11. 11. 풀 Hybrid APP 구현 방식<br />Hybird<br />APP<br />네이티브<br />형식으로 패키징<br />(폰갭,<br />앱스프레소, <br />티타늄)<br />JQM 디자인 소스<br />Device<br />API<br />사용자 JS<br />JQM라이브러리<br />HTML5 + CSS3 소스<br />11<br />
  12. 12. Hybird<br />APP<br />부분Hybrid APP 구현 방식<br />JAVA<br />소스<br />Device<br />API<br />JQM 내부 소스<br />사용자 JS<br />컴파일<br />JQM라이브러리<br />XML<br />소스<br />HTML5 + CSS3 소스<br />WEB VIEW<br />기존 안드로이드 개발 방식(외부 소스)<br />12<br />
  13. 13. JQM 디자인<br />APPSPERSSO 기준으로 설명<br />13<br />
  14. 14. 시작<br />Index.html 생성 후 Js와 css정의<br />일반적인 내용은 HTML문법 그대로 사용<br />14<br />
  15. 15. 활용1<br />JQM 환경에서 디자인 할 때 분리된 내용은 DVI 태그로 구분 하는 것이 좋다.<br />JQM이 지원 해주는 많은 디자인 기능이 DVI단위로 많이 이루어 지기 때문이다.<br />15<br />
  16. 16. 활용2<br />JS import 할때 반드시 JQM 보다 Jquery를 먼저 써준다.<br />이렇게 쓰지 않을 경우 JQM이 제대로 동작하지 않는다.<br />옳은 경우<br />틀린 경우<br />16<br />
  17. 17. CSS활용<br />HTML5가 되면서 많은 디자인 속성이 사라짐<br />CSS3가 나머지를 전부 대체함.<br />CSS 적용 방법은 속성인 ID에 이름을 적고<br />CSS에서 원하는 ID에 필요한 속성 지정<br /><divid="live-preview"></div><br />#live-preview { width: 100px; height: 150px; }<br />17<br />
  18. 18. 사용자 JS 활용<br />개인이 JS만들 경우 ./JS 폴더에 넣은 후 Import<br />기타 JS사용 방법은 기존 홈페이지에서 활용되던 방법과 같다.<br /><scripttype="text/javascript" src="/js/index.js"></script><br />18<br />
  19. 19. 활용3<br />JQM의 벤딩처리<br />비록 JQM이 여러 가지 디바이스에서 활용할 수 있긴하지만 기기의 한계상 불가피 하게 사용되지 못하는 부분도 있다. 따라서 기기 별로 활용 할 수 있도록 벤딩 처리를 해야 한다.<br />//Android or IOS? <br />varDeviceVendor = null;<br />deviceapis.devicestatus.getPropertyValue( <br />function (value) { <br />if(value.indexOf('Apple') == 0){<br />DeviceVendor = 'IOS';<br />}else{<br />DeviceVendor = 'Android';<br />}<br />}, <br />errorCallback, <br />{ aspect: "Device", property : "vendor"}<br />); <br />벤딩처리 샘플코드<br />19<br />
  20. 20. JQM활용<br />앱과 같은 디자인을 위하여 사용<br />태그 속성의 data-role과 data-position 사용하여 표현<br /><div data-role="content"><br /><uldata-role="listview"><br /><li><a href="camera.html"><br /><h1>Camera</h1><br /><p>Photo, Camera, Video, File and more...</p><span<br />class="ui-li-count">3</span></a><br /></li><br /></ul><br /></div><br />Content(본문) 부분에 listview형식의 내용 삽입<br />내용은 <li>의 내용에 의해 구분<br />20<br />
  21. 21. JQM활용2<br /><div data-role="footer" data-position="fixed"><br /><div data-role="navbar"><br /><uldata-inset="true"><br /><li><a id="main_btn" href="/main.html" data-role="button"<br />data-icon="star" data-iconpos="top">Main</a></li><br /><li><a id="plus_btn" href="/camera.html" data-role="button"<br />data-icon="plus" data-iconpos="top">Plus</a></li><br /><li><a id="arrow_btn" href="/arrow.html" data-role="button"<br />data-icon="arrow-d" data-iconpos="top">Arrow</a></li><br /><li><a id="gear_btn" href="/gear.htmml" data-role="button"<br />data-icon="gear" data-iconpos="top">Setting</a></li><br /><li><a id="info_btn" href="/info.html" data-role="button"<br />data-icon="info" data-iconpos="top">Info</a></li><br /></ul><br /></div><br /></div><br />footer(결론, 하단) 부분에 navbar형식의 내용 삽입<br />내용은 <li>의 내용에 의해 구분<br />21<br />
  22. 22. JQM활용3<br />디자인 커스터마이징<br />소스코드에서 특정 인자에 접근 하여 변환 가능<br />예)$.mobile.page.prototype.options.backBtnText = “뒤로가기";.<br />다른 다양한 UI 표현 방법들<br />http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/참조<br />22<br />
  23. 23. JQM활용4<br />자체 API이용<br />이벤트, 매소드사용, 레이아웃, 테마 등<br />사용자 JS파일을 만들어 API이용<br />http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/api/globalconfig.html참조.<br />23<br />
  24. 24. DEVICE API 사용법<br />APPSPERSSO 기준으로 설명<br />24<br />
  25. 25. WAC <br />Wholesale Applications Community<br />일종의 애플리케이션 도매시장<br />애플, 구글과 떨어져 통신사들이 뭉쳐 만들어낸 규격<br />OS기반이 아닌 표준화된 개발환경 제공<br />다양한 디바이스에 사용가능<br />25<br />
  26. 26. WAC API<br />Device API의 일종<br />Appspresso에서 사용<br />모바일 디바이스 내부의 기능들을 웹과 연동하는 API 를 제공<br /> 카메라/갤러리/연락처/일정/파일 등에 접근하게 가능<br />26<br />
  27. 27. WAC API 활용 1<br />디바이스 API 이용방법<br />1. 디바이스 이용과 관련된 JS작성<br />2. 작성된 JS파일 import<br /><scripttype="text/javascript" src="/js/camera-capture-video.js"></script><br />27<br />
  28. 28. WAC API 활용 2<br />확장 API에서 제공하는 카메라 호출 데모<br />자바 스크립트에서 이루어짐<br />//DOC: http://www.appspresso.com/appdev/doc/symbols/ax.ext.media.html<br />ax.ext.media.captureImage({}, function (filename) {<br />deviceapis.filesystem.resolve( function(file) {<br /> $("#user-capture-image").html("<imgsrc=""+file.toURI()+"" alt="" width="100%" />");<br />ax.ext.ui.alert($("#user-capture-image").html(),function(){});<br /> }, errorCallback, filename, "r");<br />}, errorCallback);<br />28<br />
  29. 29. WAC API활용 3<br />디바이스 정보 가져오기<br />...<br />// wifi status <br />deviceapis.devicestatus.getPropertyValue( <br />function (value) { $("#device .wifi-status").html(value); }, <br />getDeviceErrorCallback, { aspect: "WiFiNetwork", property : "networkStatus"}); <br />// device vender <br />deviceapis.devicestatus.getPropertyValue( <br />function (value) { $("#device .device-vendor").html(value); }, <br />getDeviceErrorCallback, { aspect: "Device", property : "vendor"}); <br />// O/S version<br />deviceapis.devicestatus.getPropertyValue( <br />function (value) { $("#device .os-version").html(value); }, <br />getDeviceErrorCallback, { aspect: "OperatingSystem", property : "version"}); <br />...<br />29<br />
  30. 30. 기타 다른 디바이스 사용법<br />사이트 참조 : <br />http://www.appspresso.com/appdev/doc/api.html<br />30<br />
  31. 31. 기타 참조 사이트<br /><ul><li>http://xguru.net/626
  32. 32. http://xguru.net/593
  33. 33. http://dayofjs.com/
  34. 34. http://www.slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks
  35. 35. http://code.google.com/p/jslibs/wiki/JavascriptTips#language_advanced_Tips_&_Tricks</li></ul>31<br />
  36. 36. 끝.<br />32<br />

×