PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry...
Transcript of PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry...
![Page 1: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/1.jpg)
PhoneGap
Easy Mobile Development
![Page 2: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/2.jpg)
Rob EllisPhoneGap.com
Nitobi.com - My Worksilentrob.me - My Site
http://twitter.com/rob_ellishttp://github.com/silentrob
![Page 3: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/3.jpg)
![Page 4: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/4.jpg)
History
iPhoneDevCamp '08
![Page 5: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/5.jpg)
What is PhoneGap?
![Page 6: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/6.jpg)
Cross Platform
Mobile Framework
![Page 7: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/7.jpg)
MIT
free as in do what you like
![Page 8: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/8.jpg)
Objective C is HARD
![Page 9: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/9.jpg)
Cluster Fork Platform Language Osim? iPhone Objective-C not really Android Java (Dalvik VM) ok BlackBerry Java (Who Knows) no Windows Mobile .Net and/or C++ sorry Nokia C++, Java,Flash, web, python sorta Palm web tech Exactly
![Page 10: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/10.jpg)
Sound Familiar?
![Page 11: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/11.jpg)
![Page 12: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/12.jpg)
HTML / CSS / JS
![Page 13: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/13.jpg)
![Page 14: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/14.jpg)
Webkit
![Page 15: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/15.jpg)
HTML 5
![Page 16: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/16.jpg)
vibrate
navigator.notification.vibrate(0);
![Page 17: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/17.jpg)
beep
navigator.notification.beep(2);
![Page 18: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/18.jpg)
telephony
<a href="tel:411">Call 411</a>
![Page 19: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/19.jpg)
geolocation (a)
navigator.geolocation.getCurrentPosition(win,fail);
![Page 20: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/20.jpg)
geolocation (b)
var getLocation = function() { var win = function(p){ alert(p.coords.latitude); alert(p.coords.longitude); }; var fail = function(){}; navigator.geolocation.getCurrentPosition(win,fail);};
...
<body onload="getLocation();">
![Page 21: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/21.jpg)
accelerometer (a)
navigator.accelerometer.watchAcceleration(win, fail, opt);
![Page 22: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/22.jpg)
accelerometer (b)
function watchAccel() { var win = function(a){ document.getElementById('x').innerHTML = a.x; document.getElementById('y').innerHTML = a.y; document.getElementById('z').innerHTML = a.z; }; var fail = function(){}; var opt = {}; opt.frequency = 100; navigator.accelerometer.watchAcceleration(win,fail,opt);}
![Page 23: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/23.jpg)
What else?
• Camera• Sound• Contact Support• and more...
![Page 24: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/24.jpg)
Where?
•iPhone•Android•Blackberry•WRT (s60)•winMO (sorta)•Palm (almost)
![Page 25: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/25.jpg)
bridging the GAP:gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value
gap://
This is a phonegap request and not a request to load a new page.
CommandHandler
This is a subset of device functionality that contains methods. An example would be Accelerometer or Notification
method
Each CommandHandler defines it’s own methods arguments a URL encoded list of arguments that are passed to the method ( varies based on the method ) Note that phonegap.js will URLEncode the parameters for you.
![Page 26: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/26.jpg)
Objective C land
stringByEvaluatingJavascriptFromString()
![Page 27: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/27.jpg)
![Page 28: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/28.jpg)
![Page 29: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/29.jpg)
XUIjQuery gone Tiny
![Page 30: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/30.jpg)
selector
x$('a.foo');
![Page 31: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/31.jpg)
more selectorsx$(window); // The Windowx$(element); // An Existing Element x$('ul#globalnav li a.selected'); // A CSS3 Selector x$(['li','div#foo']); // An Array of Selectors x$('li','.selected','#some_id'); // A comma list of CSS3 Selectors
![Page 32: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/32.jpg)
event x$('a.foo').touchstart(function(){ alert("hi") });
![Page 33: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/33.jpg)
more hotnessx$('.save').touchstart( function(evt){ alert('tee hee!')});
x$('.foo').addClass('awesome');x$('.foo').removeClass('className');
![Page 34: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/34.jpg)
xhr
x$('#tweets').xhr('/tweet.html');
![Page 35: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/35.jpg)
PhoneGap Philosophydevice agnostic / open standards / open
source
![Page 36: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/36.jpg)
Future
![Page 37: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/37.jpg)
Announcement
![Page 38: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/38.jpg)
PhoneGap
![Page 39: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/39.jpg)
Demo?
![Page 40: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/40.jpg)
Thanks
![Page 41: PhoneGap - jaoo.dkjaoo.dk/dl/qcon-sanfran-2009/slides/RobEllis_An... · •Android •Blackberry •WRT (s60) •winMO (sorta) •Palm (almost) bridging the GAP: gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value](https://reader033.fdocuments.us/reader033/viewer/2022060508/5f236a732ded8b215427f1a7/html5/thumbnails/41.jpg)
ResourcesGet involved, wiki, google group...
phonegap.com
http://twitter.com/rob_ellis http://github.com/silentrob
nitobi.com