/ Contents Review Ajax jQuery Ajax jQuery Mobile Hybrid App 2 / 67.

Presentation on theme: "/ Contents Review Ajax jQuery Ajax jQuery Mobile Hybrid App 2 / 67."— Presentation transcript:

1 / 67 1 1

2 Contents Review Ajax jQuery Ajax jQuery Mobile Hybrid App 2 / 67

3 $() 팩터리 함수 3 Tag Name –$(‘p’) : Document 내의 모든 HTML 단락요소 (p) ID –$(‘#some-id’) : Document 내의 some-id 의 ID 를 가지는 단일 요소 Class –$(‘.some-class’) : Document 내의 some-class 의 클래스 이름을 가진 모든 요소 / 67

4 4 $('td:contains("Henry")').parent().find('td:eq(1)').addClass('highlight').end().find('td:eq(2)').addClass('highlight') Chain Henry V 비극 : / 67

5 5

6 synchronous avaScript ml 6 / 67 nd

7 Keepalive Http 1.0 Http 1.1 7 / 67

8 Ajax 표현 정보를 위한 HTML 과 CSS DOM(Document Object Model) 을 이용한 동적인 Display and Interconnection Web Server 와 Asynchorous 데이터 교환 및 조작 XML 을 이용한 데이터 교환와 조작 XMLHttpRequest 를 이용한 비동기식 데이터 검색 8 / 67

9 Origin Web Page 9 Web Server Receive request Handle request Create HTML / 67

10 웹 앱 모델과 Ajax 모델 비교 10 / 67

11 웹 앱 모델과 Ajax 모델 비교 time client server User activity Data transmission System processing Classic web application model(synchronous) 11 / 67

12 Ajax Web Page 12 Web Server Receive request Handle request Create XML, TEXT.. Ajax Engine (XHR) / 67

13 13 웹 앱 모델과 Ajax 모델 비교 / 67

14 time client server Ajax web application model(asynchronous) input display input display input display input display Data transmission browser UI Ajax engine User activity Client-side processing 14 웹 앱 모델과 Ajax 모델 비교 / 67

15 15 / 67

16 var xhr; if(window.ActiveXObject) xhr = new ActiveXObject("Msxml2.XMLHTTP"); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); else throw new Error(“Ajax 를 지원하지 않습니다.”); xhr. onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 300) document.getElementById(‘txtHint ').innerHTML = xhr.responseText; } xmlhttp.open("GET", "php_ajax.php?q="+$str, true); xhr.send(''); 16 XMLHttpRequest 인스턴스 / 67

17 XMLHttpRequest 인스턴스 var xhr; if(window.ActiveXObject) xhr = new ActiveXObject("Msxml2.XMLHTTP"); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); else throw new Error(“Ajax 를 지원하지 않습니다.”); xhr. onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 300) document.getElementById(‘txtHint ').innerHTML = xhr.responseText; } xmlhttp.open("GET", "php_ajax.php?q="+$str, true); xhr.send(''); 17 / 67

18 XMLHttpRequest 인스턴스 var xhr; if(window.ActiveXObject) xhr = new ActiveXObject("Msxml2.XMLHTTP"); else if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); else throw new Error(“Ajax 를 지원하지 않습니다.”); xhr. onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 300) document.getElementById(txtHint').innerHTML = xhr.responseText; } } xmlhttp.open("GET", "php_ajax.php?q="+$str, true); xhr.send(''); $('#txtHint').load('php_ajax.php?q='+$str); 18 / 67

19 load Function $.load (url [, data] [, fn]) – url : (String) server URL – data : definition - post Method not - get Method – fn : (Function) requested Callback after load 19 / 67

20 get, post Function 20 $.get, $.post (url [, data] [, fn]) – url : (String)server URL – data : (Map) name / value – fn : (Function) requested Callback after load / 67

21 Ajax Function 21 $.ajax (options) –return : XHR Instance –options : 이름타입설명 urlString 요청 url typeStringPOST, GET dataObjectName/Value asyncBoolean 동기화 successFunction 응답 성공시 호출 / 67

22 요청 데이터 처리 (Server) <?php $q=$_GET["q"]; $sql="SELECT * FROM client_infor WHERE userid='".$q."'"; echo " Userid Password Name Birthdate Nickname Email "; 22 while($row = mysql_fetch_array($result)) { echo " "; echo " ". $row['userid']. " "; echo " ". $row['password']. " "; echo " ". $row['name']. " "; echo " ". $row['birthdate']. " "; echo " ". $row['nickname']. " "; echo " ". $row['email']. " "; echo " "; } echo " "; mysql_close($con); ?> / 67

23 23 데이터 (DB) / 67

24 24 / 67

25 25 PROS CONS / 67

26 Ajax pros 26 –Translation screen without moving page –Asynchronous Request –Dispersion possibility –Reduce data / 67

27 Ajax cons 27 –Cross Browser –Browser which can’t use Ajax –Trouble diiferentiation –Security / 67

28 28 / 67

29 Intro jQuery Mobile : : Touch-Optimized WEB FRAMEWORK for Smartphones & Tablets 29 / 67

30 Intro JQUERY PROJECTTHE JQUERY PROJECT IS PROUD TO ANNOUNCE THE JQUERY MOBILE PROJEC T August 13th, 2010 30 / 67

31 Goals and Strategy CROSS-PLATFORM & CROSS-DEVICECROSS-PLATFORM & CROSS-DEVICE Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework support for all major mobile platforms and devices that understand HTML 31 / 67

32 Goals and Strategy TOUCH-OPTIMIZED LAYOUTS & UI WIDGETSTOUCH-OPTIMIZED LAYOUTS & UI WIDGETS to provide tools to build dynamic touch interfaces LAYOUTS LAYOUTS (lists, detail panes, overlays) FORM CONTROLS a rich set of FORM CONTROLS UI WIDGETS UI WIDGETS (toggles, sliders, tabs). 32 / 67

33 Feature AUTOMATIC INITIALIZATION AUTOMATIC INITIALIZATION HTML Tag 의 Attribute 정의만으로 jQuery Mobile 의 Component 를 초기화 Example:: <a href="#SecondPage" data-role="button" data-transition ="pop"> 33 / 67

34 Feature HTML5 MARKUP-DRIVEN CONFIGURATION HTML Tag 의 Attribute 정의를 통해 jQuery Mobile 의 Component 를 설정 Example:: Two 34 / 67

35 Feature POWERFUL THEMING FRAMEWORK jQuery Mobile 의 Component 마다 Themes & swatches 적용 가능 Example:: <a href=“#" data-role="button" data-theme=“b">Button 35 / 67

36 Feature Example:: 36 :: jquery.mobile-1.0a4.1.css ….ui-bar-a { css property }.ui-body-a { css property }.ui-btn-hover-a { css property }.ui-btn-down-a { css property } ….ui-bar- 사용자정의테마 { css property } 자신 정의한 테마로 확장 / 67

37 Setting jQuery Mobile 설정 jQuery 설정 CSS 설정 <link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" /> 37 / 67

38 P ag e ‘ 38 / 67

39 Hello Untoc! Untoc Jquery Mobile Hello Untoc!! <div data-role="footer" data-position="fixed"> footer Page Structure 39 Page Container Header Content Footer / 67

40 Hello Untoc! Untoc Jquery Mobile Hello Untoc!! <div data-role="footer" data-position="fixed"> footer Page Structure 40 / 67

41 Change Page MultiPage 구성, #1 click :: bar 라는 id 를 가진 Page 로 이동 41 Page 1 Page 2 Page 3 / 67

42 Change Page #2 changePage( Page ( jQuery Object or URL ), Transition ( “pop”, “slide”, “none ”) ); Example:: $.mobile.changePage("#bar", "pop"); 42 / 67

43 Page Theme :: data-theme { a=default, b, c, d, e } 43 / 67

44 Page Transition <a href="#bar“ data-transition =“fade" >click :: data-transition { pop=default, slide, slideup, slidedown, pop, fade, flip } DEMO 44 / 67

45 C om p o n e n t 45 / 67

46 Button #1 <a href="#ID“ data-role="button" data-transition =“fade">Move #2 Button 46 / 67

47 Navbars 1 2 3 4 47 / 67

48 Form Elements Text or Password inputs Slider <input type="range“ value="0" min="0" max="100" /> 48 / 67

49 Form Elements Radio buttons <input type="radio" id="radio-choice-1" value="choice-1" /> Checkboxes <input type="checkbox“ id="checkbox”/> 49 / 67

50 List views <ul data-role="listview“ data-inset="false" data-theme="a“ data-dividertheme="b"> Title item … 50 / 67

51 H y br i d A p p ` 51 / 67

52 Chrome Web Store 52 / 67

53 HTML5 53 / 67

54 HTML5 스마트폰의 확산 모바일 페이지가 필요 54 / 67

55 Javascript FRAMEWORK FOR CROSS PLATFORM 55 / 67

56 56 웹 APP 웹 으로 APP 을 만들면, 플랫폼 지원 문제 를 해결 할 수 있지 않을까요 ? 웹 APP 웹 으로 APP 을 만들면, 플랫폼 지원 문제 를 해결 할 수 있지 않을까요 ? 자바, Objective-C 모르는데 웹 APP 웹 으로 APP 을 구현 할 수 없을까 ? 자바, Objective-C 모르는데 웹 APP 웹 으로 APP 을 구현 할 수 없을까 ? / 67

57 Web App WEB APP 웹 기술을 이용하여 만들어진 어플리케이션 57 Listen, To the song here in my heart A melody I've start But can't complete Listen, to the sound from deep within It's only beginning To find release Oh, the time has come for my dreams to be heard They will not be pushed aside and turned Into your own all cause you won't Listen.... [Chorus] Listen, I am alone at a crossroads I'm not at home, in my own home And I tried and tried To say whats on my mind You should have known Oh, Now I'm done believin you You don't know what I'm feelin I'm more than what, you made of me Reading Interaction with Audio/Video/Animation / 67

58 App WEB APP 모바일장치에 최적화된 웹사이트 NATIVE APP 모바일장치 전용 앱 58 / 67

59 App 59 / 67

60 Hybrid App Native App :: 외형 + Web App :: 내용 60 Device OS Native App / HYBRID FRAMEWORK Native App / HYBRID FRAMEWORK Web Browser Web Application HTML/JS/CSS ( HTML/JS/CSS ) Web Application HTML/JS/CSS ( HTML/JS/CSS ) Web Server Web Application Device 기능 활용 / 67

61 Hybrid App 61 / 67

62 Hybrid App 62 NATIVE WEB HYBRID HYBRID FRAMEWORK NATIVE+WEBVIEW 서버 접속 웹 앱 실행 / 67

63 Appspresso WRITE ONCE, SELL ANYWHEREWRITE ONCE, SELL ANYWHERE 63 / 67

64 PhoneGap WRITE ONCE, RUN ANYWHEREWRITE ONCE, RUN ANYWHERE 64 / 67

65 W3C Device API 65 / 67 Javascript 이용, 달력, 주소록, 카메라 등의 디바이스에 접 근할 수 있는 웹기반 API 를 제공하는 것이 목표

66 “ 앱스토어는 하향세로 접어들 것, 이제는 웹을 준비해야 ” - MCKINSEY - MCKINSEY “ 모바일 웹 앱의 시대가 오고 있다 !” - KDF2010 66 / 67

67 Q & A ‘ 67 / 67