1

jQueryMobile, Android

허광남 팀장kenu@okjsp.pe.kr

데이터스냅 웹 클라이언트

2

Agenda

• jQuery, jQueryMobile client• 간단한 웹 클라이언트 예제• 웹 개발도구 , REST console• 안드로이드 예제 리뷰

3

jQuery, jQueryMobile client

• jQuery• jQueryMobile• http://www.google.com/trends/?q=jquery,jquery+mobile,extjs,sencha

4

jQuery

• JavaScript platform• John Resig 1984 년생• Find, Do something• Find

– CSS selector– tag, id, class– $('img'), $('#header'), $('.flip')

• Do something– $('img').hide();

• jQuery-ui• Ajax

5

jQueryMobile

• For Mobile Web Framework– Sencha touch for Mobile Web App Framework

• CrossBrowser• Tag attribute based

6

간단한 웹 클라이언트 예제

• Reverse String 템플릿 예제• jQueryMobile 웹프레임워크 적용

7

Reverse String

8

TPageProducer

• Tool Palette• TPageProducer

9

HTMLDoc

10

Open Browser

• 커스텀 페이지 실행

11

웹 개발도구 , REST console

• 웹 인스펙터 , Network• REST console

12

웹 개발도구

• F12• ctrl+shift+i

13

REST console

• REST 개발시 유용• 크롬 웹스토어

14

안드로이드 예제 리뷰

• 데이터스냅 서버• 모니터 콘솔• 안드로이드 클라이언트• 서버와 포트

15

데이터스냅 서버

• 들어줄 서버가 필요하죠 . 띄웁니다 .

16

모니터 콘솔

• 메시지 전송 모니터 콘솔입니다 .

17

안드로이드 클라이언트

• 포트와 서버를 맞춰줍니다 .• Utils.java• CBService.java

• ctrl+shift+R

18

안드로이드 클라이언트

• 연결 맺는 곳입니다 .• CBService.java

• ctrl+shift+G

19

안드로이드 클라이언트

• 접속 가능한 IP

20

• 서버에서 클라이언트로• 클라이언트에서 클라이언트로

메시지 전달

21

참고자료

• Delphi XE2 Boilerplate DataSnap Server and jQueryMo-bile Client

– http://edn.embarcadero.com/print/42016

• DelphiLabs with articles about DataSnap– http://www.embarcadero.com/rad-in-action/delphi-labs

• REST console– https://github.com/codeinchaos/restconsole

• 생활코딩 jQuery– http://www.opentutorials.org/course/52

• jQueryMobile Home Page: – http://jquerymobile.com