PhoneGap Easy Mobile Development Rob Ellis PhoneGap.com - - PowerPoint PPT Presentation

▶
phonegap
SMART_READER_LITE
LIVE PREVIEW

PhoneGap Easy Mobile Development Rob Ellis PhoneGap.com - - PowerPoint PPT Presentation

Dec 08, 2023 609 likes •1.03k views

PhoneGap Easy Mobile Development Rob Ellis PhoneGap.com Nitobi.com - My Work silentrob.me - My Site http://twitter.com/rob_ellis http://github.com/silentrob rob.ellis@nitobi.com History iPhoneDevCamp '08 What is PhoneGap? Cross Platform

slide-1
SLIDE 1

PhoneGap

Easy Mobile Development

slide-2
SLIDE 2

Rob Ellis

PhoneGap.com Nitobi.com - My Work silentrob.me - My Site http://twitter.com/rob_ellis http://github.com/silentrob rob.ellis@nitobi.com

slide-3
SLIDE 3
slide-4
SLIDE 4

History

iPhoneDevCamp '08

slide-5
SLIDE 5

What is PhoneGap?

slide-6
SLIDE 6

Cross Platform

Mobile Framework

slide-7
SLIDE 7

MIT

free as in do what you like

slide-8
SLIDE 8

Objective C is HARD

slide-9
SLIDE 9

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

slide-10
SLIDE 10

Sound Familiar?

slide-11
SLIDE 11
slide-12
SLIDE 12

HTML / CSS / JS

slide-13
SLIDE 13
slide-14
SLIDE 14

Webkit

slide-15
SLIDE 15

HTML 5

slide-16
SLIDE 16

vibrate

navigator.notification.vibrate(0);

slide-17
SLIDE 17

beep

navigator.notification.beep(2);

slide-18
SLIDE 18

telephony

<a href="tel:411">Call 411</a>

slide-19
SLIDE 19

geolocation (a)

navigator.geolocation.getCurrentPosition(win,fail) ;

slide-20
SLIDE 20

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();">

slide-21
SLIDE 21

accelerometer (a)

navigator.accelerometer.watchAcceleration(win, fail,

  • pt);
slide-22
SLIDE 22

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 = {};

  • pt.frequency = 100;

navigator.accelerometer.watchAcceleration(win,fail,opt);

}

slide-23
SLIDE 23

What else?

  • Camera
  • Sound
  • Contact Support
  • and more...
slide-24
SLIDE 24

Where?

  • iPhone
  • Android
  • Blackberry
  • WRT (s60)
  • winMO (sorta)
  • Palm (almost)
slide-25
SLIDE 25

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.

slide-26
SLIDE 26

Objective C land

stringByEvaluatingJavascriptFromString()

slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29

XUI

jQuery gone Tiny

slide-30
SLIDE 30

selector

x$('a.foo');

slide-31
SLIDE 31

more selectors

x$(window); // The Window x$(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

slide-32
SLIDE 32

event

x$('a.foo').touchstart(function(){ alert("hi") });

slide-33
SLIDE 33

more hotness

x$('.save').touchstart( function(evt){ alert('tee hee!') }); x$('.foo').addClass('awesome'); x$('.foo').removeClass('className');

slide-34
SLIDE 34

xhr

x$('#tweets').xhr('/tweet.html');

slide-35
SLIDE 35

PhoneGap Philosophy

device agnostic / open standards / open source

slide-36
SLIDE 36

Future

slide-37
SLIDE 37

Announcement

slide-38
SLIDE 38

PhoneGap

slide-39
SLIDE 39

Demo?

slide-40
SLIDE 40

Thanks

slide-41
SLIDE 41

Resources

Get involved, wiki, google group... phonegap.com

http://twitter.com/rob_ellis http://github.com/silentrob rob.ellis@nitobi.com

nitobi.com