This recipe describes the detailed steps we need to follow to set up the environment for the Android-based development. The steps do not include setting up the production environment.
Install JDK and set the following environment variables correctly:
JAVA_HOMEPATH
Install Apache Ant and set the following environment variables correctly:
ANT_HOMEPATH
Follow these steps to set up your Android-based development environment:
Download Android SDK ADT Bundle for your platform from http://developer.android.com/sdk/index.html and install it inside the
softwaresfolder,C:\sencha-touch-cookbook\softwares\adt-bundle-windows-x86_64.The installed folder contains two folders,
sdkandeclipse.sdkcontains Android SDK whereaseclipsecontains ADT-bundled Eclipse.Add the following folder paths to the
PATHenvironment variable:platform-toolstools
Download Apache Cordova from http://cordova.apache.org/ and extract it to a folder or your choice, say,
C:\sencha-touch-cookbook\softwares\cordova-2.4.0. We will refer to this asCORDOVA_HOME.Go to the
CORDOVA_HOMEfolder and extract the following in it:cordova-android: This is an Android application library that allows for Cordova-based projects to be built for the Android platformcordova-cli: This is the command-line tool to build, deploy, and manage Cordova-based applicationscordova-js: This contains a unified JavaScript layer for Cordova-based projects
Launch the command prompt and go to
<CORDOVA_HOME>\cordova-android\bin.Run the following command to create our project:
create c:\sencha-touch-cookbook\projects\SenchaTouch com.senchatouch.book SenchaTouch
You shall see the following messages, which shows that everything went well:
The syntax of the command
create <project folder> <default package> <project name>.This will create a
SenchaTouchfolder inside theprojectsfolder.Go to the
eclipsefolder inside the ADT installed folder.Launch Eclipse and use
C:\sencha-touch-cookbook\workspaceas the workspace folder.Click on the File menu and select Import. Select Existing Android Code Into Workspace under the Android section.
Click on the Next button; this will take you to the Import Projects window. Click on the Browse... button, next to Root Directory, and select the
SenchaTouchproject that we created in the previous step.
Click on the Finish button to import the project.
Expand the
assets\wwwfolder and delete the files as shown in the following screenshot:
Copy the
wwwdirectory and located atC:\sencha-touch-cookbook\softwares\touch-2.2.1folder to theassetsdirectory and rename it totouch.Create and open a new file named
ch01_01.jsfile in theassets/www/ch01directory. Paste the following code in it:Ext.application({ name: 'MyApp', launch: function() { Ext.Msg.alert("INFO", "Welcome to the world of Sencha Touch!"); } });Now create and open a new file named
index.htmlin theassets\wwwdirectory. Paste the following code in it:<!DOCTYPE HTML> <html> <head> <title>Sencha Touch Cookbook - Sample</title> <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"> <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script> <script type="text/javascript" charset="utf-8" src="touch/sencha-touch-all-debug.js"></script> <script type="text/javascript" charset="utf-8" src="ch01/ch01_01.js"></script> </head> <body></body> </html>
Deploy the project to the simulator:
Right-click the project, go to Run As, and click on Android Application.
Eclipse will ask you to select an appropriate AVD. If there isn't one, you'll need to create it. To create an AVD, follow these steps:
In Eclipse, go to Window | Android Virtual Device Manager.
Select the Android Virtual Devices tab and click on the New… button.
Enter your virtual device detail. For example, the following screenshot shows the virtual device detail for the Samsung Galaxy Ace running Android 2.2:
Click on the OK button.
Deploy the project to the device:
Make sure USB debugging is enabled on your device and plug it into your system. You may enable it by going to Settings | Applications | Development.
Right-click on the project, go to Run As, and click Android Application. This will launch the Android Device Chooser window.
Select the device and click on the OK button.
With these steps, now you will be able to develop and test your application.
From steps 1 to 5, we downloaded and installed Android SDK, the ADT-bundled Eclipse plugin, and Apache Cordova, which are required for the development of the Android-based application. The SDK contains the Android platform-specific files, an Android emulator, and various other tools required for the packaging, deployment, and running of Android-based applications. The ADT plugin for Eclipse allows us to create Android-based applications and to build, test, and deploy them using Eclipse.
In steps 6 and 7, we created an Android project using Apache Cordova's command-line utility. It creates a project that is completely compatible with the ADT plugin.
From steps 9 to 13, we imported the Cordova-created project into the ADT-bundled Eclipse.
In steps 14 and 15, we removed the unwanted files and folders and copied Sencha Touch SDK to the www folder of the project. This is required to run the touch-based applications. We kept the Cordova JavaScript file, which contains the implementation of the Cordova APIs. You shall do this if you intend to use the Cordova APIs in your application (for example, to get the contacts list in your application). For this book, this is an optional step; however, interested readers may find details about the API at http://docs.phonegap.com/en/2.4.0rc1/index.html.
In step 16, we created the ch01_01.js JavaScript file that contains the entry point for our Sencha Touch application. The Ext.application class registers the launch function as the entry point to the application, which the framework calls during the application startup.
In step 17, we modified the index.html file to include the Sencha-Touch-related JavaScript (sencha-touch-all-debug.js), CSS files (sencha-touch.css) and our application-specific JavaScript files (ch01_01.js). sencha-touch-all-debug.js is very useful during development as it contains well-formatted code, which can be used to analyze application errors during development. You also need to include the Cordova JS file in case you intend to use its APIs in your application. The Cordova-related JS and CSS files need to be included first, then come Sencha-Touch-related JS and CSS files, and finally the application-specific JS and CSS files.
In step 18, we created an Android virtual device (an emulator) and deployed and tested the application on it.
Finally, in step 19, we deployed the application on a real Android 2.2-compatible device.
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.