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
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.