• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating and Distributing Mobile Web Applications with PhoneGap
 

Creating and Distributing Mobile Web Applications with PhoneGap

on

  • 13,054 views

An introduction to using PhoneGap to creative native applications using Sencha Touch

An introduction to using PhoneGap to creative native applications using Sencha Touch

Statistics

Views

Total Views
13,054
Views on SlideShare
12,949
Embed Views
105

Actions

Likes
23
Downloads
512
Comments
4

4 Embeds 105

http://lanyrd.com 87
http://rnnadafwebsite.blogspot.in 10
http://192.168.1.113 7
http://www.techgig.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice presentation ! But could you explain me what does 'linkable' and 'discoverable' means on slides 6 and 7 ?
    Thanks for your help
    Are you sure you want to
    Your message goes here
    Processing…
  • I am currently developing the native application for the android using eclipse phonegap and jquerymobile. But dont know how to develop mobile web application which will run on the browser and i need the help regarding this. And i dont know about the support of the sqlite db in the browser of the mobile.
    Are you sure you want to
    Your message goes here
    Processing…
  • I am currently developing the native application for the android using eclipse phonegap and jquerymobile. But dont know how to develop mobile web application which will run on the browser and i need the help regarding this. And i dont know about the support of the sqlite db in the browser of the mobile.
    Are you sure you want to
    Your message goes here
    Processing…
  • its mac machine you are using i need the windows tutorial for the phonegap web mobile application for the android in eclipse with jquerymobile. Is there any thing who can guide me for the eclipse+phonegap+webapplication for the android no matter which UI we use.??
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Creating and Distributing Mobile Web Applications with PhoneGap Creating and Distributing Mobile Web Applications with PhoneGap Presentation Transcript

    • James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com
    • Creating and distributingmobile web applications with PhoneGap
    • Web appsare the future
    • Native appsare the present
    • Native WebCross-platform ✘ ✔ Linkable ✘ ✔ Discoverable ✔ ✘ Device APIs ✔ ✘
    • Native Web HybridCross-platform ✘ ✔ ✔ Linkable ✘ ✔ ✔ Discoverable ✔ ✘ ✔ Device APIs ✔ ✘ ✔
    • What is a hybrid app?
    • A simple hybrid application UIWebView WebViewHTML CSS Stores JS
    • PhoneGaphttp://phonegap.com MIT
    • +
    • A PhoneGap application UIWebView WebViewHTML CSS Stores JS JS APIs
    • PhoneGap APIsAccelerometer FileTap into the device’s motion sensor. Hook into native file system through JavaScript.Camera GeolocationCapture a photo using the devices camera. Make your application location aware.Compass MediaObtain the direction that the device is pointing. Record and play back audio files.Contacts NetworkWork with the devices contact database. Quickly check the network state.Device NotificationGather device specific information. Visual, audible, and tactile device notifications.Events StorageHook into native events through JavaScript. Hook into the device’s native storage options.
    • Getting Started with iOS
    • http://phonegap.com
    • $> ./xcode4.sh seattlebars . http://sencha.com/x/b9
    • How it works@implementation PhoneGapDelegate...+ (NSString*) wwwFolderName {! return @"www";}+ (NSString*) startPage {! return @"index.html";}...NSString* startPage = [[self class] startPage];NSURL *appURL = [NSURL URLWithString:startPage];if(![appURL scheme]) { appURL = [NSURL fileURLWithPath:[[self class] pathForResource:startPage]];}...NSURLRequest *appReq = [NSURLRequest requestWithURL:appURL ...];[webView loadRequest:appReq];
    • Getting Started with Android
    • How it workspackage com.phonegap.exampleapp;import android.os.Bundle;import com.phonegap.*;public class exampleapp extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); }}
    • Using aSencha Touch Application
    • $> rm -r www$> ln -s myapp www
    • Don’t symlink yoursource controlDon’t symlink theentire SDK, thanks
    • NB these are nowin the symlink dir
    • Ext.setup({ tabletStartupScreen: tablet_startup.png, phoneStartupScreen: phone_startup.png, icon: icon.png, glossOnIcon: false, ...
    • <aside> + = Pacifist </aside>
    • $> rm -r assets/www$> ln -s myapp assets/www
    • So we’re done, right?
    • No.
    • UsingDevice APIs
    • Accelerometer FileTap into the device’s motion sensor. Hook into native file system through JavaScript.Camera GeolocationCapture a photo using the devices camera. Make your application location aware.Compass MediaObtain the direction that the device is pointing. Record and play back audio files.Contacts NetworkWork with the devices contact database. Quickly check the network state.Device NotificationGather device specific information. Visual, audible, and tactile device notifications.Events StorageHook into native events through JavaScript. Hook into the device’s native storage options.
    • That’s what this was for
    • but...
    • Android iOSphonegap.js phonegap.js
    • Alter entry pointspackage com.phonegap.exampleapp;import android.os.Bundle;import com.phonegap.*;public class exampleapp extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index_a.html"); }}
    • index.html<!doctype html><html> <head> <script type="text/javascript" src="app/app.js"> </script> <script type="text/javascript" src="phonegap.0.9.5.js"> </script> ...
    • index_a.html<!doctype html><html> <head> <script type="text/javascript" src="app/app.js"> </script> <script type="text/javascript" src="phonegap_a.0.9.5.js"> </script> ...
    • deviceready eventdocument.addEventListener( "deviceready", onDeviceReady, false);function onDeviceReady() {    // Now safe to use the PhoneGap API}
    • Avoiding race conditionsdocument.addEventListener( "deviceready", app.mainLaunch, false);Ext.regApplication({ name: "app", launch: function() { this.launched = true; this.mainLaunch(); }, mainLaunch: function() { if (!device || !this.launched) {return;} ... }});
    • http://docs.phonegap.com
    • Cameranavigator.camera.getPicture( function(imageData) {    var img = document.getElementById(img);    img.src = "data:image/jpeg;base64," + imageData; }, function (message) {    alert(Failed because: + message); }, { quality: 50 });
    • File I/Ovar paths = navigator.fileMgr.getRootPaths();var file = paths[0] + "write.txt";var writer = new FileWriter(file);writer.onwrite = function () {};writer.write("Hello Croatia!");var reader = new FileReader();reader.onload = function (e) { alert(e.target.result);};reader.readAsText(file);
    • Contactsnavigator.service.contacts.create( { "displayName": "James Pearce", "organizations": ["Sencha"] }).save();
    • Contacts Demohttp://vimeo.com/23358554
    • Final thoughts
    • Plugins
    • http://pmuellr.github.com/weinre/
    • Hybrid appsXcode + EclipseNative wrapper Native APIs
    • James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com