Saturday, July 30, 2011

Hybrid applications using phonegap and sencha touch

Before you start off with developing a mobile application, make sure that you clearly know the benefits and limitations of both a native application and a HTML5 application ad choose which best fits into your requirements. This video from google IO would be helpful in making the correct decision.

Phonegap is an application which bridges the divide between native and HTML5 applications for mobiles and can be used to create hybrid applications for 6 popular platforms.In this tutorial, I create a simple application for android using phonegap and sencha touch which is a popular javascript platform providing great support for making html5 applications for touch devices.
Firstly, create a new android project in eclipse (refer this post on how do create a simple project in android) and include the phonegap jar to the project. Also create a folder "/assets/www" wherein we will put all the html5 content(for details refer to the phonegap setup page). Replace the main activity code with the following code:

public class SenchaPhoneGap extends DroidGap {
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {

Now the application has been setup and any kind HTML content in the "www" folder would be displayed as an android application and an .apk file will also be generated.
Next, we create some pages using sencha touch for our application.For this, create an "index.js" file and also put the "sencha-touch-debug.js" and "sencha-touch.css file" from the sencha touch sdk to you "www" folder.Also include these in the "index.html" file. The folder structure for your android application looks somewhat like this now:

and the index.html file will look somewhat lie this

<!DOCTYPE html>
     <meta charset="utf-8">
     <title>Sencha Phonegap</title>
     <link rel="stylesheet" href="sencha-touch.css" type="text/css">
     <script type="text/javascript" src="sencha-touch-debug.js"></script>
     <script type="text/javascript" src="index.js"></script>

Now, all the presentation part and the logic part of the app goes into the index.js  . In this example, i use the code explained in this video which explains the panels in sencha touch. I dock 3 panels in a Tablayout which is a special layout for arranging the content in tabs. Below is the code for index.js
    onReady: function() {
        var twitter ={
        style:"background-color: #000099;color:white;",
        title: "twitter",
        html: "some content from twitter comes here"
        var plus ={
        style:"background-color: #aaaaa;color:black;",
        title: "Google Plus",
        html: "some content from Google Plus comes here"
        var facebook ={
        style:"background-color: #aaaa55;color:white;",
        title: "facebook",
        html: "some content from Facebook comes here"
        var rootPanel= new Ext.TabPanel({
        fullscreen: true,
        layout: 'fit',
        items: [twitter,plus,facebook]

You can run the application on the android emulator to check if the code is working.It would look similar to the below screenshot.

The combination of sencha and phonegap provides a super way of porting the applications to all the popular platforms.Follow the steps to create a simple phonegap application from and copy the contents for the "www" folder. Also, if you want to use the native capabilities of the phone such as location,database,filesystem,camera,accelerometer the you can also add the phonegap.js file from the phonegap sdk. You can download the code of this application from here
Watchout this space for more tutorials on how to create hybrid applications!

Update : 30 Dec 2012: I just bought an Android developers account and as an experiment I have uploaded this tutorial to play store at this location  :)