Delphi XE2 datasnap and RESTful client with jQueryMobile

1. 데이터스냅
웹 클라이언트
jQueryMobile, Android
허광남 팀장
kenu@okjsp.pe.kr
1

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

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

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
4

5. jQueryMobile
• For Mobile Web Framework
– Sencha touch for Mobile Web App Framework
• CrossBrowser
• Tag attribute based
5

6. 간단한 웹 클라이언트 예제
• Reverse String 템플릿 예제
• jQueryMobile 웹프레임워크 적용
6

7. Reverse String
7

8. TPageProducer
• Tool Palette
• TPageProducer
8

9. HTMLDoc
9

10. Open Browser
• 커스텀 페이지 실행
10

11. 웹 개발도구, REST console
• 웹 인스펙터, Network
• REST console
11

12. 웹 개발도구
• F12
• ctrl+shift+i
12

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

14. 안드로이드 예제 리뷰
• 데이터스냅 서버
• 모니터 콘솔
• 안드로이드 클라이언트
• 서버와 포트
14

15. 데이터스냅 서버
• 들어줄 서버가 필요하죠. 띄웁니다.
15

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

17. 안드로이드 클라이언트
• 포트와 서버를 맞춰줍니다.
• Utils.java
• CBService.java
• ctrl+shift+R
17

18. 안드로이드 클라이언트
• 연결 맺는 곳입니다.
• CBService.java
• ctrl+shift+G
18

19. 안드로이드 클라이언트
• 접속 가능한 IP
19

20. 메시지 전달
• 서버에서 클라이언트로
• 클라이언트에서 클라이언트로
20

21. 참고자료
• Delphi XE2 Boilerplate DataSnap Server and
jQueryMobile 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
21