Creating Mobile Application Using Sencha Touch

Description
 
We will learn about the Sencha Touch development environment & structure.

Sencha Touch

Sencha Touch enables you to quickly and easily create HTML5 based mobile apps that work on Android, iOS and Blackberry devices and produce a native-app-like experience inside a browser.

Requirements

• Sencha Architect

You can download it from the following link to get a 30 days trial versio:

http://www.sencha.com/products/architect/download/

• A web server running locally on your computer.
• A modern web browser; Chrome and Safari are recommended.

Sencha Architect Architecture

Code for Sample Application

Open up the Project directory. The directory structure looks like this:

Here's a description of each file and directory:

• app - directory containing the Models, Views, Controllers and Stores for your app.
• app.js - the main JavaScript entry point for your app.
• app.json - your app configuration file - used by the Builder to create a minified version of your app.
• index.html - The HTML file for your app.
• packager.json - The configuration file used by the Packager to create native versions of your app for iOS and Android app stores.
• resources - directory containing the CSS and Images for your app

Open app.js, the main entry point for your app, in your editor; see:

Example

Step 1

Open Sencha Architect & select create a New Project. Give the project a name and save it in a desired location.



Step 2

Select Target orientation, iPhone(320*480) or iPad(768*1024).

Step 3

Drag a container from the Toolbox & Drop it in Design mode. Here Now View is being created.

Step 4

Give the required properties for that view from the property configurations like userClassName, scrollable(true), border, docked, height, width etc.

Step 5

Drag & drop a button and label from the Toolbox to your view and name them.

Step 6

Select the button and add a handler through property configuration window & add the following code for that handler:

Ext.getCmp('lblDisplay').setHtml('Hello!!! This is first Sencha Touch Application');

Step 7

Go to the target folder & run the app.html file in a browser (Chrome & Safari are recommended).

Output



References

http://www.sencha.com/
http://docs.sencha.com/touch/2-0/#%21/guide
http://senchaexamples.com/

Conclusion

The Sencha Touch Architect provides a good environment for developing mobile applications for Android as well as iPhone & iPad.