Today's Talkâ—Ź Why Web Development for Mobile? â—Ź Why PhoneGap?â—Ź What is PhoneGap?â—Ź Technology Map
Slides at http://goo.gl/Uf625
Follow Along
http://www.mobiledevelopersolutions.comâ—Ź Requires: Eclipse ADTâ—Ź See Get Started with AppLaud
http://www.applaudcloud.comâ—Ź Web-based developmentâ—Ź Google Chromeâ—Ź AppLaud App (install from QRcode)
OR
Eclipse Plugin for PhoneGap Android
AppLaud Cloud
About Me - Paul Beusterien
â—Ź Creating top-notch mobile development solutions
â—Ź @paulbeusterien
â—Ź http://www.mobiledevelopersolutions.comâ—Ź http://www.applaudcloud.com
Accelerometer
Captures device motion in the x, y and z direction
Methods:â—‹ getCurrentAccelerationâ—‹ watchAccelerationâ—‹ clearWatch
Capture
Provides access to the audio, image, and video capabilities of the device
Methods:â—‹ captureAudioâ—‹ captureImageâ—‹ captureVideoâ—‹ MediaFile.getFormatData
Compass
Obtain the direction the device is pointing
Methods:â—‹ getCurrentHeadingâ—‹ watchHeadingâ—‹ clearWatch
Connection
The connection object gives access to the device's cellular and wifi connection information.Properties:
â—‹ connection.type
Constants:â—‹ Connection.UNKNOWNâ—‹ Connection.ETHERNETâ—‹ Connection.WIFIâ—‹ Connection.CELL_2Gâ—‹ Connection.CELL_3Gâ—‹ Connection.CELL_4Gâ—‹ Connection.CELL_NONE
Device
The device object describes the device's hardware and software
Properties:â—‹ device.nameâ—‹ device.phonegapâ—‹ device.platformâ—‹ device.uuidâ—‹ device.version
Events
PhoneGap Lifecycle events
Event Types:â—Ź devicereadyâ—Ź pauseâ—Ź resumeâ—Ź onlineâ—Ź offlineâ—Ź backbuttonâ—Ź batterycriticalâ—Ź batterylowâ—Ź batterystatus
â—Ź menubuttonâ—Ź searchbuttonâ—Ź startcallbuttonâ—Ź endcallbuttonâ—Ź volumedownbuttonâ—Ź volumeupbutton
File
An API to read, write and navigate file system hierarchies.
Objects and Methods for:â—‹ Directory Navigationâ—‹ File Readâ—‹ File Writeâ—‹ File Transfer
Geolocation
Provide location information for the device
Methods:â—‹ getCurrentPositionâ—‹ watchPositionâ—‹ clearWatch
Media
Provide the ability to record and play back audio files on a device
Methods:â—‹ getCurrentPositionâ—‹ getDurationâ—‹ playâ—‹ pauseâ—‹ releaseâ—‹ seekToâ—‹ startRecordâ—‹ stopRecordâ—‹ stop
Notification
Visual, audible and tactile device notifications
Methods:â—‹ alertâ—‹ confirmâ—‹ beepâ—‹ vibrate
Storage
Provide access to the device's storage options.
Web Storage Methods:â—‹ openDatabaseâ—‹ transactionâ—‹ changeVersionâ—‹ executeSqlâ—‹ item
Local Storage Methods:â—‹ keyâ—‹ getItemâ—‹ setItemâ—‹ removeItemâ—‹ clear
PhoneGap Implementationâ—Ź Embeds a chromeless browser in a native appâ—Ź Creates a bridge from the browser to native via a set
of JavaScript APIs
Android Implementation
â—Ź Was (pre Android 2.3)â—‹ WebView â—‹ addJavaScriptInterface
â—Ź Nowâ—‹ onJsPrompt override
PhoneGap Bridge
PhoneGap Goals and Principles
â—Ź "The purpose of PhoneGap is for PhoneGap to cease to exist."
- Brian LeRoux, Adobe PhoneGap Lead
â—Ź Embrace web technology - HTML5â—Ź Build a first-class development environment around web technology
PhoneGap vs Titanium
Thanks -> Tony Lukasavage http://savagelook.com/blog/portfolio/phonegap-is-web-based-appcelerator-is-pure-javascript
PhoneGap Plugins
Extending PhoneGap
â—Ź Provide JavaScript APIs for native capabilities
â—Ź Examples include Bluetooth, Speech Recognizer, ChildBrowser, TTS, Status Bar Notification and ftp
â—Ź Many are open sourced at https://github.com/phonegap/phonegap-plugins
Plugin Basics1. Native Part - Java on Android
â—‹ Add Java Class, Include Java Code2. JavaScript Part
â—‹ Add JS file to project, Edit index.html3. Connect Plugin to App
â—‹ Edit res/xml/plugins.xml4. README file
â—‹ Permissions - AndroidManifest.xmlâ—‹ Plugin-specific instructions: init calls, resourcesâ—‹ API description and usage examples
Mobile UI Paradigm
â—Ź Optimized for Touchâ—‹ Finger-sized controlsâ—‹ Minimize typing
â– Smart forms - buttons, sliders, etc.â—‹ Swipe and tap events
â– No mouse-overs and clicksâ—Ź Orientation/Layout Changeâ—Ź Themes and Transitions
jQuery Mobile
Touch-Optimized Web Framework for Smartphones & Tablets
"A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design."
Today's Talkâ—Ź Why Web Development for Mobile? â—Ź Why PhoneGap?â—Ź What is PhoneGap?â—Ź Technology Mapâ—Ź Live Demos
Slides at http://goo.gl/qoyk4
More ...
â—Ź http://www.phonegap.com â—Ź https://groups.google.com/forum/#!forum/phonegapâ—Ź http://stackoverflow.com/questions/tagged/phonegapâ—Ź http://incubator.apache.org/projects/callback.htmlâ—Ź http://www.mobiledevelopersolutions.comâ—Ź http://www.applaudcloud.comâ—Ź twitter @paulbeusterien
Slides at http://goo.gl/Uf625
* Some images from Creative Commons* Thanks to Brian LeRoux of Adobe for input