We will learn about the Sencha Touch development environment & structure.
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.
You can download it from the following link to get a 30 days trial versio:
- 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.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:
Open Sencha Architect & select create a New Project. Give the project a name and save it in a desired location.
Select Target orientation, iPhone(320*480) or iPad(768*1024).
Drag a container from the Toolbox & Drop it in Design mode. Here Now View is being created.
Give the required properties for that view from the property configurations like userClassName, scrollable(true), border, docked, height, width etc.
Drag & drop a button and label from the Toolbox to your view and name them.
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');
Go to the target folder & run the app.html file in a browser (Chrome & Safari are recommended).
The Sencha Touch Architect provides a good environment for developing mobile applications for Android as well as iPhone & iPad.