jQuery Mobile & PhoneGap

jQuery Mobile & PhoneGap

• 2.
  Matthieu Lux JavaScript: jQuery,RequireJS, BackboneJS, NodeJS Java: Spring, Spring Data, Spring MVC, Spring * Mobility: Android, PhoneGap, jQuery Mobile twitter @Swiip www swiip.github.com github github.com/swiip
• 3.
  Zenika Un cabinet deconseil et de réalisation et de formation Technologies Open Source & méthodes agiles Très forte valorisation technique : UG, partenariats, formations twitter @ZenikaLyon www zenika.com
• 4.
  jQuery Mobile &PhoneGap Create mobile cross-platform applications using the web code you know and love: HTML, CSS and JavaScript. Matthieu Lux Consultant, Zenika
• 5.
  "The" mobile cross-platformapplication
• 6.
  How to reachit?
• 8.
  Mobile Application Types 8/65
• 9.
  The project Bootstrap · Boostrapedat 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
• 10.
  The project Adobe · Adobeannounced 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.0 Apache Cordova · Apache License V2 project · Currently the same sources than PhoneGap · You can think of Apache Cordova as the engine that powers PhoneGap PhoneGap · PhoneGap is a distribution of Apache Cordova · Over time, the PhoneGap distribution may contain additional tools 10/65
• 11.
  Features 101 · Package Webapplication 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
• 12.
  Features Build 12/65
• 13.
  Features Compatibilities 13/65
• 14.
  Architecture Generic diagram 14/65
• 15.
  Architecture Android and iOSadaptations 15/65
• 16.
  Architecture Android integration pbi casCroaeVeetnsWbiw{ 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 object's public methods to be accessed from JavaScript. 16/65
• 17.
  Packaging Android application packaging 17/65
• 18.
  Packaging iOS application packaging 18/65
• 19.
  Packaging iOS application packaging 19/65
• 20.
  Packaging PhoneGap Builder 20/65
• 21.
  Packaging PhoneGap Builder Pricing 21/65
• 22.
  PhoneGap API Principles <cittp=tx/aacit cast"t-"sc"odv-...s>/cit srp ye"etjvsrp" hre=uf8 r=croa210j"<srp> HM TL nvgtr{opnn}{cin(sces,{ro}; aiao.cmoet.ato}{ucs} err) JVSRP AACIT 22/65
• 23.
  PhoneGap API Overview 23/65
• 24.
  PhoneGap API Capture API nvgtrdvc.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
• 25.
  PhoneGap API Documentation Each methodsare documented with · Supported platforms · Permissions for each platforms · Full example · Platforms quircks Example for capture · http://docs.phonegap.com/en/2.1.0/cordova_media_capture_capture.md.html#Capture 25/65
• 26.
  PhoneGap API Geolocation, Accelerometer /Cretpsto / urn oiin JVSRP AACIT nvgtrgooaingturnPsto(ucs,[ro] [pin]; aiao.elcto.eCretoiinsces err, otos) / Wthn psto / acig oiin vrwthD=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 ceeain nvgtraclrmtrgturnAclrto(ucs,err; aiao.ceeoee.eCretceeainsces ro) / Wthaclrto / ac ceeain vrwthD=nvgtrcmaswthedn(ucs,err {rqec:10) a acI aiao.ops.acHaigsces ro, feuny 0}; nvgtrcmascerac(acI) aiao.ops.laWthwthD; 26/65
• 27.
  PhoneGap API Contacts / Rtranwcnat / eun e otc JVSRP AACIT vrcnat=nvgtrcnat.rae{ipaNm:"atiu,"ae:"u") a otc aiao.otcscet(dslyae Mthe" nm" Lx}; / Soenwcnati tedvc / tr e otc n h eie cnatsv(; otc.ae) / Sac fle / erh itr vrotos=nwCnatidpin(; a pin e otcFnOtos) otosfle ="atiu; pin.itr Mthe" otosmlil =tu; pin.utpe re vrfed =[dslyae,"ae,"raiain"; a ils "ipaNm" nm" ognztos] / Sac / erh nvgtrcnat.idfed,oSces oErr otos; aiao.otcsfn(ils nucs, nro, pin) 27/65
• 28.
  PhoneGap API Storage basedon 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.xctSl'RPTBEI EIT dsbad) xeeueq(DO AL F XSS ahor'; t.xctSl'RAETBEI NTEIT dsbad(duiu,dt)) xeeueq(CET AL F O XSS ahor i nqe aa'; t.xctSl'NETIT dsbad(d dt)VLE (,"aa)) xeeueq(ISR NO ahor i, aa AUS 1 tt"'; t.xctSl'NETIT 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
• 29.
  PhoneGap API Simulation withRipple 29/65
• 30.
  Plugins Existings · https://github.com/phonegap/phonegap-plugins · Adirectory by platform · Android and iOS a LOT more populated · Interesting examples: - AccountList - AugmentedReality - Bluetouth - DatePicker - FileUploader - ScreenShot - ... 30/65
• 31.
  Plugins Build one · Entrypoint 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
• 32.
  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
• 34.
  JavaScript frameworks forthe mobile Web Touch events JavaScript Libraries Mobile WebApps JavaScript Frameworks 34/65
• 35.
  The project jQuery Project ·Non-profit trade association dedicated to supporting development of jQuery projects · jQuery, jQuery UI, jQuery Mobile, QUnit, Sizzle · http://jquery.org jQuery 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
• 36.
  Features HTML5-based user interface 36/65
• 37.
  Features Easily themable design 37/65
• 38.
  Features Seriously cross-platform A-grade · Fullenhanced experience with Ajax-based animated page transitions. · Large majority of modern OS and browsers B-grade · Enhanced experience except without Ajax navigation features · Blackberry 5.0*, Opera Mini 7, Nokia Symbian^3 C-grade · Basic, non-enhanced HTML experience that is still functional · Blackberry 4.x, Windows Mobile, All older smartphone platforms and featurephones 38/65
• 39.
  Features Lightweight code jQuery core 31 KB jQuery Mobile CSS 7 KB jQuery Mobile JS 21 KB jQuery Mobile Images 80 KB 39/65
• 40.
  Guetting started Download 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
• 41.
  Guetting started Basic 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
• 42.
  Guetting started Result 42/65
• 43.
  Pages · single page ·local internal linked "pages" within a page · dialogs · animated transitions · prefetching and caching pages · ajax, hashes & history 43/65
• 44.
  Pages local 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
• 45.
  Pages dialogs < he=fohm"dt-e=dao"Oe dao<a a rf"o.tl aarl"ilg>pn ilg/> HM TL 45/65
• 46.
  Pages JavaScript? · The pageinitevent 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 you'd like to manipulate a page's 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
• 47.
  Pages Transitions · Setting atransition 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
• 48.
  Lists · basic linked · nested · numbered · read-only lists · divider · search filter · ... 48/65
• 49.
  Lists HTML <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
• 50.
  Lists HTML + 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
• 51.
  Lists JavaScript · 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'.itiw'ers'; (.eetr)lsve(rfeh) JS · Events: create · $ "slco")lsve( ( .eetr .itiw{ JS cet:fnto(vn,u){..} rae ucineet i . }; ) 51/65
• 52.
  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
• 53.
  Components Toolbars · Header · <idt-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
• 54.
  Components Toolbars example 54/65
• 55.
  Components Forms <omato=# mto=gt> frcin"" 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
• 56.
  Components Forms Demo 56/65
• 57.
  Components Tools 57/65
• 58.
  Theme framework · enhance all default HTML components · takes advantage of CSS3 properties · multiple color "swatches" · theme roller to build your own 58/65
• 59.
  Theme framework Swatches · themesinclude 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
• 60.
  Theme framework ThemeRoller 60/65
• 61.
  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.dEetitnr'eieed' oDvcRay fle; ouetadvnLsee(dvcray, neieed, as) }; ) fnto oDvcRay){ ucin neieed( $mbl.ntaieae) .oieiiilzPg(; } <srp> /cit .. . 61/65
• 62.
  PhoneGap JavaScript · 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
• 63.
  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
• 64.
  Thank You!