jQuery Mobile & PhoneGap

3 604 vues

Publié le

Présentation des outils jQuery Mobile et PhoneGap

Publié dans : Technologie
0 commentaire
1 j’aime
  • Soyez le premier à commenter

Aucun téléchargement
Nombre de vues
3 604
Sur SlideShare
Issues des intégrations
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

jQuery Mobile & PhoneGap

  1. 1. Matthieu LuxJavaScript: jQuery, RequireJS, BackboneJS, NodeJSJava: Spring, Spring Data, Spring MVC, Spring *Mobility: Android, PhoneGap, jQuery Mobiletwitter @Swiipwww swiip.github.comgithub github.com/swiip
  2. 2. ZenikaUn cabinet de conseil et de réalisation et de formationTechnologies Open Source & méthodes agilesTrès forte valorisation technique : UG, partenariats, formationstwitter @ZenikaLyonwww zenika.com
  3. 3. jQuery Mobile & PhoneGapCreate mobile cross-platform applications using the web code you know andlove: HTML, CSS and JavaScript.Matthieu LuxConsultant, Zenika
  4. 4. "The" mobile cross-platform application
  5. 5. How to reach it?
  6. 6. Mobile Application Types 8/65
  7. 7. The projectBootstrap· Boostraped at the San Francisco iPhoneDevCamp in August 2008· "Make native iphone features available to web apps"· Brock Whitten, Rob Ellis and Andre Charland· October 2008: support of Android and BlackBerry· February 2009: first stable release 0.6· Support of Windows Mobile, Symbial, WebOS, approval for AppStore· July 2011: relase of version 1.0 9/65
  8. 8. The projectAdobe· Adobe announced the acquisition of Nitobi Software in October 2011· PhoneGap code is contributed to the Apache Software Foundation· PhoneGap and Apache Cordova current versions is 2.1.0Apache Cordova· Apache License V2 project· Currently the same sources than PhoneGap· You can think of Apache Cordova as the engine that powers PhoneGapPhoneGap· PhoneGap is a distribution of Apache Cordova· Over time, the PhoneGap distribution may contain additional tools 10/65
  9. 9. Features101· Package Web application in native mobile applications· Embed static resources (HTML, CSS, JS) in application· Seriously cross-platform: iOS, Android, Windows Phone, BlackBerry, Bada, WebOS, Symbian even Tizen· JavaScript API to access (all) native features· Compatible with all Mobile Web Frameworks· Approved for all major markets including AppStore 11/65
  10. 10. FeaturesBuild 12/65
  11. 11. FeaturesCompatibilities 13/65
  12. 12. ArchitectureGeneric diagram 14/65
  13. 13. ArchitectureAndroid and iOS adaptations 15/65
  14. 14. ArchitectureAndroid integrationpbi casCroaeVe etnsWbiw{ ulc ls odvWbiw xed eVe JV AA .. . piaevi stp){ rvt od eu( .. . ti.dJvsrpItraenwEpsdsp(lgnaae,jMsaeuu) "croaaie hsadaacitnefc(e xoeJAipuiMngr sesgQee, _odvNtv" } .. .}· Official Android JavaDoc: pbi vi adaacitnefc (betojc,Srn nm) ulc od dJvsrpItrae Ojc bet tig ae JV AA Injects the supplied Java object into this WebView. The object is injected into the JavaScript context of the main frame, using the supplied name. This allows the Java objects public methods to be accessed from JavaScript. 16/65
  15. 15. PackagingAndroid application packaging 17/65
  16. 16. PackagingiOS application packaging 18/65
  17. 17. PackagingiOS application packaging 19/65
  18. 18. PackagingPhoneGap Builder 20/65
  19. 19. PackagingPhoneGap Builder Pricing 21/65
  20. 20. PhoneGap APIPrinciples<cittp=tx/aacit cast"t-"sc"odv-...s>/cit srp ye"etjvsrp" hre=uf8 r=croa210j"<srp> HM TLnvgtr{opnn}{cin(sces,{ro}; aiao.cmoet.ato}{ucs} err) JVSRP AACIT 22/65
  21. 21. PhoneGap APIOverview 23/65
  22. 22. PhoneGap APICapture APInvgtrdvc.atr.atrAdo aiao.eiecpuecpueui( JVSRP AACIT CpueBcpueucs,CpueroC cpuero, [atrAdopin otos atrC atrSces atrErrB atrErr CpueuiOtos pin]);nvgtrdvc.atr.atrIae aiao.eiecpuecpuemg( JVSRP AACIT CpueBcpueucs,CpueroC cpuero,[atrIaepin otos atrC atrSces atrErrB atrErr CpuemgOtos pin]);nvgtrdvc.atr.atrVdo aiao.eiecpuecpueie( JVSRP AACIT CpueBcpueucs,CpueroC cpuero,[atrVdopin otos atrC atrSces atrErrB atrErr CpueieOtos pin]); 24/65
  23. 23. PhoneGap APIDocumentationEach methods are documented with· Supported platforms· Permissions for each platforms· Full example· Platforms quircksExample for capture· http://docs.phonegap.com/en/2.1.0/cordova_media_capture_capture.md.html#Capture 25/65
  24. 24. PhoneGap APIGeolocation, Accelerometer/ Cretpsto / urn oiin JVSRP AACITnvgtrgooaingturnPsto(ucs,[ro] [pin]; aiao.elcto.eCretoiinsces err, otos)/ Wthn psto / acig oiinvrwthD=nvgtrgooainwthoiinsces err { a acI aiao.elcto.acPsto(ucs, ro, mxmmg:30,tmot 50,ealHgAcrc:tu aiuAe 00 ieu: 00 nbeihcuay re}; )nvgtrgooaincerac(acI) aiao.elcto.laWthwthD;/ Cretaclrto / urn ceeainnvgtraclrmtrgturnAclrto(ucs,err; aiao.ceeoee.eCretceeainsces ro)/ Wthaclrto / ac ceeainvrwthD=nvgtrcmaswthedn(ucs,err {rqec:10) a acI aiao.ops.acHaigsces ro, feuny 0};nvgtrcmascerac(acI) aiao.ops.laWthwthD; 26/65
  25. 25. PhoneGap APIContacts/ Rtr anwcnat / eun e otc JVSRP AACITvrcnat=nvgtrcnat.rae{ipaNm:"atiu,"ae:"u") a otc aiao.otcscet(dslyae Mthe" nm" Lx};/ Soenwcnati tedvc / tr e otc n h eiecnatsv(; otc.ae)/ Sac fle / erh itrvrotos=nwCnatidpin(; a pin e otcFnOtos)otosfle ="atiu; pin.itr Mthe"otosmlil =tu; pin.utpe revrfed =[dslyae,"ae,"raiain"; a ils "ipaNm" nm" ognztos]/ Sac / erhnvgtrcnat.idfed,oSces oErr otos; aiao.otcsfn(ils nucs, nro, pin) 27/65
  26. 26. PhoneGap APIStorage based on W3C· Web SQL Storage idwoeDtbs(dsbad, 10, dsbad, 000; J V S R P vrd =wno.pnaaae"ahor" "." "ahor" 200) a b AACIT d.rnato(ucint){ btascinfnto(x t.xctSlRPTBEI EIT dsbad) xeeueq(DO AL F XSS ahor; t.xctSlRAETBEI NTEIT dsbad(duiu,dt)) xeeueq(CET AL F O XSS ahor i nqe aa; t.xctSlNETIT dsbad(d dt)VLE (,"aa)) xeeueq(ISR NO ahor i, aa AUS 1 tt"; t.xctSlNETIT dsbad(d dt)VLE (,"oo)) xeeueq(ISR NO ahor i, aa AUS 2 tt"; } errB scesB; , roC, ucsC)· Web Storage wno.oaSoaesttm"ahor-" "aa) idwlcltrg.eIe(dsbad1, tt"; JVSRP AACIT vrvle=wno.oaSoaegttm"ahor-"; a au idwlcltrg.eIe(dsbad1) wno.oaSoaermvIe(dsbad1) idwlcltrg.eoetm"ahor-"; wno.oaSoaecer) idwlcltrg.la(; 28/65
  27. 27. PhoneGap APISimulation with Ripple 29/65
  28. 28. PluginsExistings· https://github.com/phonegap/phonegap-plugins· A directory by platform· Android and iOS a LOT more populated· Interesting examples: - AccountList - AugmentedReality - Bluetouth - DatePicker - FileUploader - ScreenShot - ... 30/65
  29. 29. PluginsBuild one· Entry point is JavaScript croaee(ucinwnaa){,fnto(ro){,"evc" odv.xcfnto(iPrm } ucinerr } srie, JVSRP AACIT "cin,[frtruet,"eodruet,4,fle) ato" "isAgmn" scnAgmn" 2 as];· Example for Android: pbi PuiRsl eeueSrn ato,JOAryag,Srn clbcI){ A A ulc lgneut xct(tig cin SNra rs tig alakd J V ty{ r i (cineul(be"){ f ato.qas"ep) ti.epag.eLn(); hsbe(rsgtog0) } rtr nwPuiRsl(lgneutSau.K "eut) eun e lgneutPuiRsl.ttsO, rsl"; }cth(SNxeto e { ac JOEcpin ) rtr nwPuiRsl(lgneutSau.SNECPIN; eun e lgneutPuiRsl.ttsJO_XETO) } } 31/65
  30. 30. Feedback · Dev with Android, iOS compatibility at first try · Comprehensive API with lots of parameters · No surprises with tests · Memory and performance difficult to apprehend with emulators · Many specificities by platforms · Become difficult if not a standard features · Browser differences 32/65
  31. 31. JavaScript frameworks for the mobile WebTouch events JavaScript LibrariesMobile WebApps JavaScript Frameworks 34/65
  32. 32. The projectjQuery Project· Non-profit trade association dedicated to supporting development of jQuery projects· jQuery, jQuery UI, jQuery Mobile, QUnit, Sizzle· http://jquery.orgjQuery Mobile· Project lead : Todd Parker (Filament Group)· Started in 2010· Last stable version : 1.2.0 (10/02/12)· http://jquerymobile.com· http://github.com/jquery/jquery-mobile 35/65
  33. 33. FeaturesHTML5-based user interface 36/65
  34. 34. FeaturesEasily themable design 37/65
  35. 35. FeaturesSeriously cross-platformA-grade· Full enhanced experience with Ajax-based animated page transitions.· Large majority of modern OS and browsersB-grade· Enhanced experience except without Ajax navigation features· Blackberry 5.0*, Opera Mini 7, Nokia Symbian^3C-grade· Basic, non-enhanced HTML experience that is still functional· Blackberry 4.x, Windows Mobile, All older smartphone platforms and featurephones 38/65
  36. 36. FeaturesLightweight code jQuery core 31 KB jQuery Mobile CSS 7 KB jQuery Mobile JS 21 KB jQuery Mobile Images 80 KB 39/65
  37. 37. Guetting startedDownload http://jquerymobile.com/download/· Good old zip (deprecated) http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.zip· CDN Hosted (recomanded) < i k r l " t l s e t h e = h t : / o e j u r . o / o i e 1 2 0 j u r . o i e 1 2L m n c s l n e = s y e h e " r f " t p / c d . q e y c m m b l / . . / q e y m b l - .M . i . s " H. T0 <citsc"tp/cd.qeycmjur-...i.s> srp r=ht:/oejur.o/qey182mnj" <citsc"tp/cd.qeycmmbl/../qeymbl-...i.s> srp r=ht:/oejur.o/oie120jur.oie120mnj"· Download builder (alpha) http://jquerymobile.com/download-builder/ 40/65
  38. 38. Guetting startedBasic page<DCYEhm> !OTP tl HM TL<tl hm><ed ha> <il>yPg<tte tteM ae/il> <eanm=vepr"cnet"it=eiewdh iiilsae1> mt ae"iwot otn=wdhdvc-it, nta-cl=" <ikrl"tlset he=ht:/oejur.o/oie111jur.oie111mncs ln e=syehe" rf"tp/cd.qeycmmbl/../qeymbl-...i.s" <citsc"tp/cd.qeycmjur-...i.s>/cit srp r=ht:/oejur.o/qey171mnj"<srp> <citsc"tp/cd.qeycmmbl/../qeymbl-...i.s>/cit srp r=ht:/oejur.o/oie111jur.oie111mnj"<srp><ha> /ed<oy bd> <i dt-oe"ae> dv aarl=pg" <i dt-oe"edr><1M Tte/1 <dv dv aarl=hae" h>y il<h> /i> <i dt-oe"otn" <>el wrd/><dv dv aarl=cnet> pHlo ol<p /i> <dv /i><bd> /oy<hm> /tl 41/65
  39. 39. Guetting startedResult 42/65
  40. 40. Pages· single page· local internal linked "pages" within a page· dialogs· animated transitions· prefetching and caching pages· ajax, hashes & history 43/65
  41. 41. Pageslocal internal linked "pages" within a page<i dt-oe"ae i=fo> dv aarl=pg" d"o" HM TL <i dt-oe"edr>h>o<dv dv aarl=hae"<1Fo/i> <i dt-oe"otn" dv aarl=cnet> <> frti tesuc odrs Imsona tepg./> pIm is n h ore re o hw s h ae<p <>iwitra pg cle < he=#a"br/>/> pVe nenl ae ald a rf"br>a<a<p <dv /i> <i dt-oe"otr>h>aeFoe<h>/i> dv aarl=foe"<4Pg otr/4<dv<dv /i><i dt-oe"ae i=br> dv aarl=pg" d"a" <i dt-oe"edr>h>a<h>/i> dv aarl=hae"<1Br/1<dv <i dt-oe"otn" dv aarl=cnet> <> tescn i tesuc odrs Imhde we tepg las<p pIm h eod n h ore re o idn hn h ae od./> <>ahe=#o"Bc t fo/>/> p< rf"fo>ak o o<a<p <dv /i> <i dt-oe"otr>h>aeFoe<h>/i> dv aarl=foe"<4Pg otr/4<dv<dv /i> 44/65
  42. 42. Pagesdialogs< he=fohm"dt-e=dao"Oe dao<a a rf"o.tl aarl"ilg>pn ilg/> HM TL 45/65
  43. 43. PagesJavaScript?· The pageinit event is triggered on a page when it is initialized $ dcmn )dlgt(#buPg" "aent,fnto( { ( ouet .eeae"aotae, pgii" ucin) JS aet pg wt a I o "buPg"wsjs cetdb jur Mbl!) lr(A ae ih n D f aotae a ut rae y Qey oie; }; )· If youd like to manipulate a pages contents before the pageinit event fires $ dcmn )dlgt(#buPg" "aeeoerae,fnto( { ( ouet .eeae"aotae, pgbfrcet" ucin) JS aet pg wt a I o "buPg"i aott b cetdb jur Mbl!) lr(A ae ih n D f aotae s bu o e rae y Qey oie; }; )· Changing pages $mbl.hneae "bu/shm" {tasto:"ldu" ) .oiecagPg( aotu.tl, rniin siep} ; JS· To load an external page, enhance its content, and insert it into the DOM $mbl.odae "bu/shm") .oielaPg( aotu.tl ; JS 46/65
  44. 44. PagesTransitions· Setting a transition on a link or form submit < he=idxhm"dt-rniin"o"Il pp a rf"ne.tl aatasto=pp>l o HM TL· Global configuration of transitions $dcmn)bn(mblii" fnto({ (ouet.id"oient, ucin) JS $mbl.ealPgTasto =o .oiedfutaerniin pp; }; )· Browser support and performance - All transitions are built with CSS keyframe animations - include both -webkit & -moz rules - default exclusion of browsers that lack 3D transforms - No guarantee that every browser will be 100% flicker-free 47/65
  45. 45. Lists· basic linked· nested· numbered· read-only lists· divider· search filter· ... 48/65
  46. 46. ListsHTML<ldt-oe"itiw> u aarl=lsve" HM TL <i< he=auahm"Aua/>/i l>a rf"cr.tl>cr<a<l> <i< he=ad.tl>ui/>/i l>a rf"uihm"Ad<a<l> <i< he=bwhm"BW/>/i l>a rf"m.tl>M<a<l><u> /l 49/65
  47. 47. ListsHTML + image + split button<i l> HM TL < he=idxhm"<m sc"mgsabmb.p"/<3Boe Bls/3<>rknBls/>/ a rf"ne.tl>ig r=iae/lu-bjg >h>rkn el<h>pBoe el<p<a < he=lsssltprhs.tl dt-e=dao"dt-rniin"ldu"Prhs abm a rf"it-pi-ucaehm" aarl"ilg aatasto=siep>ucae lu<l> /i<i l> < he=idxhm"<m sc"mgsabmh.p"/<3Wrig/3<>o Ci<p<a a rf"ne.tl>ig r=iae/lu-cjg >h>ann<h>pHt hp/>/> < he=lsssltprhs.tl dt-e=dao"dt-rniin"ldu"Prhs abm a rf"it-pi-ucaehm" aarl"ilg aatasto=siep>ucae lu<l>.. /i . 50/65
  48. 48. ListsJavaScript· Options: countTheme, dividerTheme, filter, filterCallback, filterPlaceHolder, filterTheme, headerTheme, inset, splitIcon, splitTheme, theme· $ dcmn )bn("oient,fnto({ ( ouet .id mblii" ucin) JS $mbl.itiwpooyeotos<oto >=<vle> .oielsve.rttp.pin. pin au ; }; )· Methods: childPages, refresh· $slco.itiwers; (.eetr)lsve(rfeh) JS· Events: create· $ "slco")lsve( ( .eetr .itiw{ JS cet:fnto(vn,u){..} rae ucineet i . }; ) 51/65
  49. 49. Components· toolbars: header, footer, navigation· buttons: icons, inline, grouped· layout· forms - text input, text area, search input - flip switch (checkbox) - slider - radio as list - combo box 52/65
  50. 50. ComponentsToolbars· Header· <i dt-oe"edr> dv aarl=hae" HM TL < he=idxhm"dt-cn"eee>acl/> a rf"ne.tl aaio=dlt"Cne<a <1Ei Cnat/1 h>dt otc<h> < he=idxhm"dt-cn"hc"Sv<a a rf"ne.tl aaio=cek>ae/> <dv /i>· Navbar· <i dt-oe"otr> dv aarl=foe" HM TL <i dt-oe"abr><l dv aarl=nva" u> <i< he=#>n<a<l> l>a rf""Oe/>/i <i< he=#>w<a<l> l>a rf""To/>/i <i< he=#>he<a<l> l>a rf""Tre/>/i <u><dv /l /i> <dv /i> 53/65
  51. 51. ComponentsToolbars example 54/65
  52. 52. ComponentsForms<omato=# mto=gt> fr cin"" ehd"e" HM TL <i dt-oe"ilcnan> dv aarl=fedoti" <ae fr"etra>etra<lbl lbl o=txae"Txae:/ae> <etracl=4"rw=8 nm=txae"i=txae"<txae> txae os"0 os"" ae"etra d"etra>/etra <dv /i> <i dt-oe"ilcnan> dv aarl=fedoti" <ae fr"erh>erhIpt<lbl lbl o=sac"Sac nu:/ae> <nu tp=sac"nm=pswr"i=sac"vle" / ipt ye"erh ae"asod d"erh au=" > <dv /i> <i dt-oe"ilcnan> dv aarl=fedoti" <ae fr"ldr"Fi sic:/ae> lbl o=sie2>lp wth<lbl <eetnm=sie2 i=sie2 dt-oe"ldr> slc ae"ldr" d"ldr" aarl=sie" <pinvle"f"Of/pin <pinvle"n>n/pin oto au=of>f<oto> oto au=o"O<oto> <slc> /eet <dv /i><fr> /om 55/65
  53. 53. ComponentsForms Demo 56/65
  54. 54. ComponentsTools 57/65
  55. 55. Theme framework· enhance all default HTML components· takes advantage of CSS3 properties· multiple color "swatches"· theme roller to build your own 58/65
  56. 56. Theme frameworkSwatches· themes include multiple color "swatches"· each consisting of a header bar, content body, and button states· can be freely mixed and matched to create visual texture· each swatches is identified by a letter· < he=idxhm"dt-oe"utn dt-hm=a>wtha/> a rf"ne.tl aarl=bto" aatee""Sac <a HM TL 59/65
  57. 57. Theme frameworkThemeRoller 60/65
  58. 58. PhoneGap.. . HM TL<ikrl"tlset he=cstee/eal/qeymbl-..i.s"tp=tx/s"/ ln e=syehe" rf"s/hmsdfutjur.oie10mncs ye"etcs ><ikrl"tlset he=cstee/eal/utmcs tp=tx/s"/ ln e=syehe" rf"s/hmsdfutcso.s" ye"etcs ><cittp=tx/aacit cast"t-"sc"sjur-...i.s>/cit srp ye"etjvsrp" hre=uf8 r=j/qey171mnj"<srp><cittp=tx/aacit cast"t-"sc"spoea-...s>/cit srp ye"etjvsrp" hre=uf8 r=j/hngp181j"<srp><cittp=tx/aacit cast"t-"sc"scso-ntj"<srp> srp ye"etjvsrp" hre=uf8 r=j/utmii.s>/cit<cittp=tx/aacit cast"t-"sc"sjur.oie10mnj"<srp> srp ye"etjvsrp" hre=uf8 r=j/qeymbl-..i.s>/cit<cittp=tx/aacit cast"t-"sc"scso.s>/cit srp ye"etjvsrp" hre=uf8 r=j/utmj"<srp><cittp=tx/aacit cast"t-" srp ye"etjvsrp" hre=uf8> $dcmn)rayfnto( { (ouet.ed(ucin) dcmn.dEetitnreieed oDvcRay fle; ouetadvnLsee(dvcray, neieed, as) }; ) fnto oDvcRay){ ucin neieed( $mbl.ntaieae) .oieiiilzPg(; }<srp> /cit.. . 61/65
  59. 59. PhoneGapJavaScript· custom-init.js: $dcmn)bn(mblii" fnto({ (ouet.id"oient, ucin) HM TL / Atrs lsrqee cosdmi / uoie e euts rs-oan $mbl.loCosoanae =tu; .oiealwrsDmiPgs re / Idqeqel Bosrspot l CosOii Rsuc Saig / niu u e rwe upre e rs-rgn eore hrn $spotcr =tu; .upr.os re / Bou liiilsto e lafcaedspgs / lqe ntaiain t fihg e ae, / jsualapld $mbl.ntaieae) / uq pe e .oieiiilzPg(; $mbl.uontaieae=fle .oieatIiilzPg as; }; )· PhoneGap integration is fully documented· http://jquerymobile.com/test/docs/pages/phonegap.html 62/65
  60. 60. Feedback· Pros - Easy to use - Quick results - Good UI quality - Good performances (if done carefully) - PhoneGap integration· Cons - Make use of prefetching (data-prefetch) - Difficult to think outside the box - Security - Page loading timeout with Android & Phonegap 63/65
  61. 61. Thank You!