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 de conseil 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-platform application

6. How to reach it?

8. Mobile Application Types
8/65

9. The project
Bootstrap
· 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

10. The project
Adobe
· 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.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 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

12. Features
Build
12/65

13. Features
Compatibilities
13/65

14. Architecture
Generic diagram
14/65

15. Architecture
Android and iOS adaptations
15/65

16. Architecture
Android integration
pbi 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 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 methods are 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
/ Rtr anwcnat
/ 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 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.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 with Ripple
29/65

30. Plugins
Existings
· 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

31. Plugins
Build 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

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 for the 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
· Full enhanced 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 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 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 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

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
· <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

54. Components
Toolbars example
54/65

55. Components
Forms
<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

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
· 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

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!