First Steps in Sencha Touch

Want to develop mobile applications across all platforms? Want to develop HTML5 mobile applications? Don’t know where to start?

This article aims to help you begin your journey with the Sencha Touch HTML5 framework.

What is Sencha Touch?

Sencha Touch is an HTML5 framework for developing mobile applications. It allows you to develop mobile applications that would have the same look and feel as a native application. Sencha Touch supports Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and Blackberry devices.

Features

• UI components (Panels, Tab bar, Navigation view, buttons, pickers)
• Components can be themed depending on the target devices
• Access device capabilities like camera, accelerometer etc, with the help of PhoneGap frameworks.

How to Start

Download the free Sencha Touch SDK and Sencha Cmd from the Sencha website. Note that Sencha Cmd will also install Ant, Ruby, Sass, and Compass, all or some of which will be useful for building applications.

You will also need a web server running locally on your computer, for example XAMPP.

The Sencha website advises “If you are running the IIS web server on Windows, manually add  application/x-json as a MIME Type for Sencha Touch to work properly. For information on adding this MIME type see the following link: http://stackoverflow.com/a/1121114/273985“.

Installation

Extract the SDK zip file to your projects directory. This folder should be accessible to your HTTP server, so you can navigate to http://localhost/sencha-touch-2.n in your browser and see the Sencha Touch documentation.

Run the Sencha Cmd installer. The installer adds the Sencha command line tool to your path, enabling you to generate a fresh application template, among other things.

Confirm that Sencha Cmd is correctly installed by changing to the Sencha Touch directory, and entering a sencha command, for example:

$ cd ~/webroot/sencha-touch-2.n/
$ sencha
Sencha Cmd v3.1.n
...

Note When using the sencha command, you must be inside either the downloaded SDK directory or a generated Touch app. For further details see the Sencha Cmd documentation.

Your development and testing environment should now be ready.

Sencha Touch Project

1. Index.html – page where your application will be hosted from.
2. App Directory – the application in general is a collection of Models,Views, Controllers, Stores and Profiles
   • Model: represents the type of data that should be used/stored in the application
   • View: displays data to the user with the help of inbuilt Sencha UI components/custom components
   • Controller: handles UI Interactions and the interaction between the model and the view.
   • Store: responsible for loading data into the application
   • Profile: helps in customizing the UI for various phone and tablets.
3. Resources Directory – contains images, css and other media assets
4. App.js
   • Global settings of the application
   • Contains the app name, references to all the models, views, controllers, profiles and stores
   • Contains the app launch function that is called after the models, views, controllers, profiles and stores are loaded. App launch function is the starting point of the application wherein the first view gets instantiated and loaded.
   • Touch directory – Contains the Sencha Touch framework files.

Try a Sample

Let us create a simple navigation view with a list in it.

Home.js

Ext.define('MyFirstApp.view.Home',{

    extend:'Ext.NavigationView',

    xtype:'Home',

    config:{

        items:[]

    }

});

Let’s break that down.

The Ext.define function helps us to define a class named Home in the namespace MyFirstApp/view. All view components are placed within this namespace as per Sencha Touch MVC standards.

Extend keyword specifies that Home class is the subclass of Ext.NavigationView. So, the Home class inherits the base configuration and implementation of Ext.NavigationView class.

xtype keyword is used to instantiate the class.

Config keyword helps us to initialize the variables/components used in that particular class. In this example we should initialize the navigation view with a list.

The content of Items in the Home view is currently blank. Let us create a list view and place its reference inside the items field of the Home view.

First of all, present this home view in the app launch function

App.js

launch: function() {

    // Initialize the main view

    Ext.Viewport.add([{xtype:'Home'}]);

},

Now, Let us create a simple model class for the data in the list.

MyModel.js

Ext.define('MyFirstApp.model.MyModel',{

    extend:'Ext.data.Model',

    config:{

        fields:['name']

    }

});

Let us create a data store and map it to the above model.

MyStore.js

Ext.define('MyFirstApp.store.MyStore',{

    extend:'Ext.data.Store',

    config:{

        model:'MyFirstApp.model.MyModel',

        autoLoad:true,

        data:[

            {name:'t1'},

            {name:'t2'}

        ],

        proxy:{

        type:'localstorage'

        }

    }

});

We have initialized the store with the list data as well.

Proxy is used to load the model with the data. The Local Storage object is an HTML5 feature for storing data locally in the browser. There are other proxies as well.

Ajax – Used for request within a particular domain

Local Database – Allows creating client side database.

We can omit the proxy for this sample as we will not be using it.

MyList.js

Ext.define('MyFirstApp.view.MyList',{

    extend:'Ext.Panel',

    xtype:'MyList',

    requires:['Ext.dataview.List','Ext.data.Store'],

    config:{

        title:'My List',

        layout:'fit',

        items:[

        {

             xtype:'list',

             store:'MyStore',

             itemTpl:'<b>{name}<b>'

        }

        ]

    }

});

In the code above, MyList view is created in the namespace MyFirstApp.view and it inherits the properties of Ext.Panel.

When references to other classes are required in a particular class, those classes should be declared under the requires field. Sencha Touch ensures that the required classes are loaded.

MyList view is initialized with the title as My List, layout as fit and contents as the List component. List component is mapped to the data store.

ItemTpl represents the data template as to how the list should be displayed to the user.

Now we will add the list to our home view

Ext.define('MyFirstApp.view.Home',{

    extend:'Ext.NavigationView',

    xtype:'Home',

    config:{

        items:[xtype:'MyList']

    }

});

The above example can be tested in Chrome browser by simulating various mobile resolutions. Right click on the browser and select ‘Inspect Element’. Select Settings icon in the right corner of the Inspect Element Window. Select any user agent and the resolution.

Conclusion

The aim of this article has been to help you take your first steps in Sencha Touch development. So, what are you waiting for?

Go ahead and improvise, adapt the code, bring in your ideas, then develop and publish your own HTML5 mobile applications.