TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
jQuery Mobile & PhoneGap
1.
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
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
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
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
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
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
33.
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
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
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
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
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
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
