Before starting how to use sencha for web development let’s understand what is Web Development and it’s advantages.
Why to prefer Web Development?
|Platform specific||Platform independent|
|Respective Development tools||Tools – TML%, CSS3, JS|
|Time Consuming||Quick development|
|Expensive Development||Less Development cost and direct access to native API’s with Cordova.|
To create web applications we need a Apache Cordova platform and Sencha Touch library.
- Buttons with device specific themes and effects;
- Form elements such as text fields for email, date picker, and address; sliders, selectors, and combo-boxes;
- List component with momentum-scrolling and an index bar; a minimal icon set;
- Toolbars and Menus;
- Movable tabs;
- Bottom toolbars;
- Map component with support for multi-touch gestures such as pinch and zoom.
All the components can be themed according to the target device. This is done using Sass, a stylesheet language built over CSS.
Sencha Touch has eight in-built transition effects including slide over or under the current element, pop, flip, and cube. It supports common touch gestures built from touch events, which are Web standards but supported only by Android, iOS, and some touch enabled devices. These are tap, double tap, swipe, scroll, and pinch.
Getting Started with Sencha touch
Step 1 : Install NodeJS .
Step 2 : Install Apache Cordova ( Works for all platform )
To package the Sencha Touch app using Cordova install it using following command in terminal
npm install -g cordova
Step 3 : Generate Sencha Touch app
Generate the Sencha Touch app by following below commands:
In sencha touch folder
Touch :> sencha generate app AppName folder/to/save/AppName(path)
Step 4 : Enable Cordova support to app
To enable the Apache Cordova support to generated app change to app directory and run the following command,
AppName:>sencha cordova init com.package.name AppName
After running above command you will see that sencha build process added following piece of code to your app.json file
Step 5: Change the app.json file property for building native package
Uncomment the following line for packaging iOS and Android
//"platforms": "ios android",
Note : You can edit this configuration to package for specific platform
Step 6 : Prepare native package, Install app and have native feel
To prepare the native platform package run the following command in terminal,
AppName:> sencha app build –run native
Basic app will appear on your device as shown below:-
Sencha Touch can be used along with Cordova or Phonegap or its own native packager, to create applications native to a mobile device that have access to currently native-only components, and which can be made available from app marketplaces. As of Sencha Touch 2.3, Cordova is the favored packaging technology.
I hope this blog article helped you with a clearer understanding of Sencha touch. I would like to hear your views on the subject and blog and expecting your suggestions if any.