Installing the Sencha Touch framework (iPhone JavaScript)

This framework allows to build web applications for iOS and Android based on devices with a native look and feel. It uses the new HTML5 standard, CSS3, and techniques such as AJAX, DHTML, and DOM scripting. By reading through this recipe, you’ll learn how to install it.

Getting ready

Sencha Touch is distributed based on a dual licensing model. If you’re planning to develop an open source application with a license compatible with the GNU GPL License v3, you can download it for free. Otherwise, you must pay for using a commercial license. Prices and information about commercial licenses of this framework can be found

at http://www.sencha.com/store/touch/.

How to do it…

Open your browser and type the following URL:

http://www.sencha.com/products/touch/

After loading, you’ll see a Download button at the top of the web page. This button allows to download a ZIP file corresponding to the latest released version of the framework. You can find two different versions for Sencha Touch, one for the Open Source version and the other for the Commercial Upgrade. For the recipes of this topic, we’ll be using the Open Source version. If you need to use the command line to decompress the ZIP file, you can execute a command as follows:

tmp1A32_thumb


Now it’s time to copy only the required files to our web server. For instance, to do that on Ubuntu Linux, you should execute the following commands:

tmp1A33_thumb

How it works…

In order to use the Sencha Touch in your web projects for iPhone, you’ll need to use two files at least. The two files are ext-touch.css and ext-touch.js. The first one is located inside the css subfolder, which is inside the resources folder. The other one can be found in the root directory. Your HTML files should contain these lines inside the head section for loading the required files:

tmp1A34_thumb

Sencha Touch requires an additional JavaScript file for your application. This file will contain the needed code for creating the user interface. For example, if this file is called main.js, the reference on the HTML files will be a line as follows:

tmp1A35_thumb

The developers of this framework recommend using the ext-touch.js JavaScript file only for the production environment. Instead of this file, we can use the ext-touch-debub.js file, which is located in the same root folder.

tmp1A-36

The examples folder contains some good examples to learn how to use this framework. You can load the index.html file inside the examples folder on your WebKit-compatible browser or, of course, directly on the iPhone.

A complete API can be found at

http://dev.sencha.com/deploy/touch/docs/.

Next post:

Previous post: