Getting Started with Sencha Touch

As with the other frameworks we have worked with so far, we first need to download Sencha Touch. As Sencha Touch is the only framework in this chapter that is covered by

a commercial license (when used for commercial development), you will need to register your details before downloading. You can, however, download the GPL version if you intend to release an application built with Sencha Touch under a GPL license.

Either way, head to the Sencha Touch product page and follow the instructions to download the library. Once you have the library, extract the archive, and you should see

a folder structure similar to what is displayed in Figure 11–17.

Figure 11–17. The Sencha Touch 1.0 release folder structure The Sencha Touch distribution contains quite a large number of files, including the

source files for the library and some pretty useful tools for working with the library. We

CHAPTER 11: Mobile UI Frameworks Compared

won’t go into detail on these here, but if you have the time they are definitely worth investigating.

For the purposes of the challenge, let’s take the files that we need and copy them into the Moundz challenge directory. For this exercise, we will take the JavaScript files from the main directory, and the css directory from the resources folder. Once we have done this, the Sencha Moundz directory should look something like Figure 11–18.

Figure 11–18. After adding the required Sencha Touch files to the Moundz directory, we will have a css directory and a few extra JavaScript files.

With the required files in places, let’s now modify our HTML to include the required files. As with our earlier example with Jo, we will remove the HTML elements from the body tag, as Sencha uses a declarative style to create the required HTML elements.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

CHAPTER 11: Mobile UI Frameworks Compared

</script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> function initialize() {

// MOUNDZ.init();

} // initialize </script> </head> <body onload="initialize()"> </body> </html>

In the preceding code, we included the android.css stylesheet, which is part of the Sencha Touch distribution, and commented out moundz.css to prevent any CSS conflicts. We then included the sencha-touch-debug.js file so we can work through any problems that might arise during the integration effort (this file would be replaced with sencha-touch.js before being released). Finally, we commented out the call to MOUNDZ.init() from the initialize function. We did this because Sencha Touch has its own “ready” event that we will need to hook into to properly initialize the application.

Getting Started with Sencha Touch