phonegap –an overview · introduction to mobile os cross platform frameworks introduction to...
TRANSCRIPT
Introduction to Mobile OS
Cross platform frameworks
Introduction to PhoneGap
Features of PhoneGap
Developing an Android app using PhoneGap
3
4
Native (Android –java)
Web (HTML ,CSS and JS)
Hybrid (PhoneGap)
Performance Fast Moderate Moderate
Easy to learn
Hard Easy Easy
Supports native functionality
All No Most
Time to create app
Long Short Short
6
Cross-platform framework used for developing applications for mobile devices using HTML,CSS and .JavaScript.
http://phonegap.com
It’s goal is to make local Web applications to have the same functionality as native applications.
Free and open Source framework.
Bridges the gap between web applications and mobile devices.
HTML5/CSS 3 Application
UI Framework PHONEGAP API
PHONEGAP BRIDGE
GPS
FILESYSTEM SQLITE Etc..
MEDIA CAMERA
The downloaded PhoneGap library has different folder for each supported platform
The phoneGap-Android folder has two files:
◦ phoneGap.js
Used to access native API in application
◦ phonegap.jar
Includes the classes required to work with phonegap.
Accelerometer API function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); }; function onError() { alert('onError!'); }; navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
Geolocation API
//onSuccess Callback
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Timestamp: ' + new Date(position.timestamp) + '\n');
};
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
Contacts API function onDeviceReady(){ // find all contacts var options = new ContactFindOptions(); options.filter=""; //fetch all contacts var fields = ["phoneNumbers", "name"]; //which fields to fetch navigator.contacts.find(fields, onSuccess, onError, options); }
Files API
window.requestFileSystem(LocalFileSystem.PERSISTENT,0,onSuccess,onFail) function onSuccess(fileSystem) { alert(fileSystem.name); alert(fileSystem.root.name); } function onFail(event) { alert(event.target.error.code); }
Used to access some platform specific functionality
List of current plugins: ◦ http://github.com/phonegap/phonegap-
plugins Barcode Scanner ChildBrowser ClipBoard Manager PayPal Etc…
A UI development framework that allows to develop mobile web applications that work across smartphones and tablets.
http://jquerymobile.com
Pages and Dialogs
Form Controls
Buttons
Toolbars
ListView control
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div> </div>
Q & A
THANK YOU