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

Index.html – page where your application will be hosted from.

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.

Resources Directory – contains images, css and other media assets

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.

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.