Phonegap with Android
and Sencha Touch 2


aka "The awesome mobile web stack"



12/04/2012, Paris Phonegap Meetup

Why Phonegap ?


Why Android ?


Why Sencha Touch ?


Why Sencha Touch 2 ?


Android fragmentation

Hardware fragmentation

Tweetdeck, 2010

Hardware profusion




Software fragmentation


Google

Fragmentation
means slow updates



Google, April 2012, 6 months OS evolution

WebKit to the rescue !

Android good news

Express Phonegap Android app



Android webview startup 


  package org.apache.cordova.example;

  import android.app.Activity;
  import android.os.Bundle;
  import org.apache.cordova.*;

  public class cordovaExample extends DroidGap
  {
      @Override
      public void onCreate(Bundle savedInstanceState)
      {
          super.onCreate(savedInstanceState);
          super.loadUrl("file:///android_asset/www/index.html");
      }
  }

Express Sencha Touch app


Slides and code available on github




http://github.com/revolunet/phonegap-sencha-demo

Android AND iOS compatible

Update assets/www/index.html 


<!DOCTYPE html>
<html>

    <head>
        <meta charset='utf-8'>
        <title>Phonegap+Sencha demo</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="sencha-touch.js"></script>
        <script src="cordova-android-1.6.0.js"></script>

        <script type="text/javascript" src="app.js"></script>
    </head>

    <body></body>

</html>

Sencha app.js startup 

Ext.application({
    name: 'PhonegapDemo',
    views: ['Main'],
    models: ['Contact'],
    stores: ['Contacts'],
    controllers: ['Main'],

    launch: function() {
        // first view displayed
        var mainPanel = Ext.Viewport.add({
            xclass: 'PhonegapDemo.view.Main'
        });
        // load phonegap stuff
        document.addEventListener("deviceready", function () {
            mainPanel.fireEvent("deviceready");
        } , true);
    }
});

MVC architecture


Views are independant and decoupled.
Interactions are defined in the controller.

Controller example (1/2) 

Ext.define('PhonegapDemo.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        refs: { // defines 'shortcuts' to views elements
            mainPanel: 'mainpanel',
            listButton: 'mainpanel button[title=Contacts]'
            [...]
        },
        control: { // listen to 'refs' events
            mainPanel: {
                deviceready: 'onDeviceReady'
            },
            listButton: {
                tap: 'onListButtonTap'
            },
            [...]
        }
    },

Controller example (2/2) 

    // some of the controller methods
    onDeviceReady: function() {
        // get phonegap contacts when ready
        // save scope for phonegap callback
        var me = this;
        navigator.contacts.find(['*'], function(contacts) {
            var store = Ext.getStore('Contacts');
            store.add(contacts);
            me.updateHomeInfo(store.getCount());
        }, function() {
            navigator.notification.alert("cannot access phone contacts :/");
        });
    },
    onListButtonTap: function() {
        var button = this.getListButton();
        button.setBadgeText(false);
    },
    [...]

Demo time !

Questions ?



Thank you



twitter: @revolunet

github: revolunet



Thanks to Phonegap Paris meetup & IESA for hosting