Introduction

As with any other development, the first and foremost thing that is required before we embark on our journey is setting up the right environment so that development, deployment, and testing become easier and effective. And this calls for a list of tools that are appropriate in this context. In this chapter, we will cover topics related to setting up the environment using the right set of tools. Sencha Touch is an HTML5-based JavaScript framework to build applications for touch devices. An application built using Sencha Touch can be accessed from a web browser or can be packaged for the target touch device and run on it. Sencha Touch 2.2 supports WebKit, the IE 10 browser on Windows 8, and the following platforms:

Android

iOS

BlackBerry

Windows Phone 8

For each of these platforms, we will see what steps we need to follow to set up the complete development and deployment environment. We will be packaging our Sencha Touch-based application using Apache Cordova. Cordova is another JavaScript framework, which provides two important capabilities:

The APIs needed to access the device features, such as camera and address book

A build mechanism for writing the code once (in the form of JS, HTML and CSS) and packaging them for different platforms such as iOS and Android

Throughout the book we will be using the following software:

Sun JDK version 1.5 or above (required to run Eclipse)

Android Developer Tools (ADT-bundled Eclipse), which is required for Android development

Apache Cordova 2.4.0 (required for using device features and packaging the application for different platforms)

Apache Ant 1.8.4 or above (required to run a project build in Eclipse and Cordova tools)

Sencha Touch 2.2.1 library (Sencha Touch SDK)

Xcode 4 (required for iOS development)

BlackBerry WebWorks SDK (required for BlackBerry development)

Before we get any further, you should download and install the following, which will act as a common base for all our discussions:

Sun JDK 1.5 or above

Android Developer Tools (ADT-bundled Eclipse)

Sencha Touch 2.2.1 library

After downloading Sencha Touch library, extract it to a folder, say, C:\sencha-touch-cookbook\softwares\touch-2.2.1 . After the extraction, you should see the folders as shown in the following screenshot:

There are many files that are not required for the development and testing.

Note The docs folder contains the documentation for the library and is very handy when it comes to referring to the properties, configs, methods, and events supported by different classes. You may want to copy it to a different folder so that you can refer to the documentation whenever needed.

Since there are many files inside the SDK, let us clean it up a bit so that we remove the files that are not required for development. Delete the files and folders enclosed within the rectangles in the following screenshot:

This prepares us to get started. Since Sencha Touch is a JavaScript library, you may want to configure your Eclipse installation for JavaScript development. You may install the VJET and Sencha Eclipse plugin, which comes with Sencha Complete, and configure it for Sencha Touch development. Steps to do so are detailed on the VJET website (http://eclipse.org/vjet/) and instructions are provided as part of the Sencha Complete package; hence, they have been excluded from this book. To learn more about Sencha Complete, visit http://www.sencha.com/products/complete.

Download and install Apache Ant from http://ant.apache.org/ to a folder of your choice, say, C:\sencha-touch-cookbook\softwares\apache-ant-1.8.4 , and add this as the ANT_HOME environment variable. Also, add %ANT_HOME%\bin to the PATH environment variable.