Build mobile web applications with Sencha Touch
In the software development world, two important trends are increasingly important: mobile application development and standards-based HTML5 web development. The learning curve for either type of development can be steep. Developing a native mobile application often requires knowledge of specific platforms and skills, such as Objective-C for iPhone and Java™ for Android (and these are only two platforms). HTML5 development has gained traction lately because it is standards-based. While vendors are working rapidly to incorporate and comply with these early specifications, HTML5 is still rather immature.
The recent release of Sencha Touch 1.0 fuses the cutting-edge worlds of mobile application development with HTML5 web development to form a simple, accessible framework for building mobile web applications. In this article, learn everything you'll need to know to start working with the Sencha Touch framework.
Learning to build mobile applications—especially from the perspective of a web developer—can be troublesome. A variety of platforms to choose from and technologies to learn are available. HTML5 support, though gaining momentum quickly, is still not quite ready to be used for complex web applications, particularly line-of-business applications.
Sencha is a company with a core commercial product offering, but it also supports open source software. Sencha Touch 1.0 is free for both personal and commercial use.
Sencha Touch is currently supported on WebKit browsers, including the popular Apple iOS and Google Android platforms. Some might contend that this support isn't enough—that all platforms must be supported for Sencha Touch to be taken seriously. When adopting a framework in the mobile web development realm, it's wise to look for two things: platform richness and feature richness. A framework that abstracts the most from HTML5/CSS3 in a form that’s developer-friendly, and with a wide reach, is desirable. In this aspect, Sencha is astute in supporting the two most popular platforms and using their resources to provide rich, easy-to-use features for developers.
What you need to know
If you want to explore further, and perhaps build your own custom components or modify styles for your own brand, you need more in-depth skills in HTML5 and CSS3. For more information, see the Related topics section.
To get started with Sencha Touch:
- Download the framework from Sencha. (See Related topics.)
- Extract the contents to the root of your development website.
Consider renaming the extracted folder to a generic name, such as sencha-touch, so that you can use this same folder name for future framework versions without updating other files that reference it.
- Using a WebKit browser, such as Google Chrome, open the examples page at http://localhost/sencha-touch/examples/. Though your environment might look slightly different, you should see a screen similar to Figure 1.
Figure 1. Sencha Touch Examples
Explore some of the framework features by building a Sencha Touch application.
- Create a new HTML file named index.html in the root of your site with
the source code from Listing 1.
Listing 1. Sample HTML5 document
<!DOCTYPE HTML> <html> <head> <title>Touch Test</title> </head> <body> </body> </html>
Once you create that single file, you are officially an HTML5 developer. The
<!DOCTYPE HTML>doctype at the top is the key; it ensures the document is interpreted as HTML5.
- Modify the code from Listing 1 as shown in Listing
Listing 2. Installing Sencha Touch scripts and styles
Start by modifying your code to resemble Listing
Listing 3. The simplest Sencha Touch application
- Run the page in Google Chrome, and you should see something similar to
Figure 2. The simplest Sencha Touch application
The code in Listing 3 introduces a block of
features. If you've used Ext JS, this code might look familiar. The
Ext.setup function is the starting point for your
Sencha Touch applications. It accepts an object with a number of
configuration options. The example uses the
onReady option, which takes a function to evaluate when the
document is ready. The
onReady function creates
the root panel of the application. The root panel takes up all available
space and contains a simple string by using the
Running applications in an Android emulator
- Download the most recent Android SDK for your
operating system platform and extract it to disk.
The SDK includes all the utilities required for getting an emulator up and running, but a few more steps are necessary.
- Android emulators require that you create an Android Virtual Device
(AVD), which is basically configuration options that model an actual
Android-powered device. To create an AVD, run the
androidutility in the tools folder of the Android SDK.
The Android SDK and AVD Manager should open and look similar to Figure 3.
Figure 3. Android SDK and AVD Manager
At this point, if you try to create a new virtual device using the New… button, notice an important field labeled Target, which is disabled. Before you can create a new virtual device, download an add-on to the SDK.
- Select Available Packages from the left menu.
- Expand the site labeled https://dl-ssl.google.com/android/repository/repository.xml to reveal the list of available packages to install.
- Select the most recent SDK platform, as shown in Figure 4, and then click Install Selected.
Figure 4. Available packages for Android SDK
- Accept the installation by clicking the Install button in the next window.
- When the download and installation finish, click Close.
You just installed a potential target for any AVDs you want to create. This target is an Android device running version 2.2. The next step is to create the AVD.
- Select Virtual Devices from the left menu in the AVD Manager, and click New….
sencha-avdfor the Name and select the Android 2.2 target you just installed as the Target. Leave all other defaults.
- Click Create AVD.
Click OK at the confirmation window, then close the AVD Manager.
Everything you need to run an emulator is now in your local development environment. To run the emulator: open a terminal window, change directories to the root of your Android SDK installation, and enter the command in Listing 4.
Listing 4. Invoking the Android emulator
tools/emulator -avd sencha-avd
You can use the web browser in the Android emulator to browse to your test
application at http://localhost/, but you'll get a big
404. This is because referencing
127.0.0.1, in the
emulator is actually within the context of the emulator itself. To
reference your local development environment, use the address
10.0.2.2, which yields the screen shown in Figure 5.
Figure 5. Example running in the Android emulator
A tour of Sencha Touch UI components
Now that you have the basics, this section provides a tour through some of the Sencha Touch UI components.
You can create a number of button styles by using just a few configuration options. The code in Listing 5 creates a vertically stacked collection of all available buttons. The example application is expanded to include an array of items to be added to the root panel—in this case, a single panel with a vertically stacked collection of buttons.
The buttons are styled based on the
configuration option. Supported button types are
Listing 5. Buttons
Figure 6 shows the result.
Figure 6. Available button styles in Sencha Touch
The forms suite contains all the usual suspects and more. It is apparent that HTML5-specific functions are being handled and incorporated. Support is available for field types (such as e-mail, web addresses, and date pickers) and attributes (such as placeholder text) in HTML5; Sencha Touch just makes it easier to use. Listing 6 shows some of the features.
Listing 6. Sampling of form controls
Running the code in Listing 6 should yield a screen similar to Figure 7. The Date field is focused, revealing the date picker control docked at the bottom.
Figure 7. Sampling of available form fields
When developing mobile web applications, you're working with limited real estate. Support for list-based UI components becomes important. Sencha Touch is equipped with support for various types of lists, including simple, grouped, and nested. Figure 8, which is taken from the Kitchen Sink demo in the framework download, demonstrates a grouped list. The vertical stack of letters at the right of the list exposes a useful method for jumping to specific portions of the list.
Figure 8. A grouped list from the Kitchen Sink demo
Icons and toolbars
Sencha Touch ships with an impressive repository of icons built in and ready to use. All you need to do is specify a string representing a CSS class for the icon you want. Listing 7 shows how to build two toolbars: one docked to the top of the root panel, and one docked to the bottom. Each toolbar is configured with a small sample of the icons available out of the box.
Many more icons are available. Check out the API docs and examples for more information.
Listing 7. Icons in toolbars
After running the code from Listing 7, you should see a screen similar to Figure 9.
Figure 9. Sampling of icons and styles
Carousels and tabs
Carousels and tabs are easy to implement using coding patterns you've already explored. Listing 8 shows a tabbed interface and a carousel.
Listing 8. Constructing carousels and tabs
Carousels and tabs are similar in code and function. The carousel moves between cards by either performing a sliding gesture from side to side, or by clicking one of the circular icons docked at the bottom. By default, both controls transition between cards using a slide animation.
Figure 10 shows the tab interface.
Figure 10. Sample tab interface
Figure 11 shows the carousel interface.
Figure 11. Sample carousel interface
You can use several overlay controls. Your options include standard alert, confirm, and prompt controls, as well as plain modal controls.
In mobile web development, one of the more popular components is maps.
Sencha Touch makes it very simple to include a map in your application
Ext.Map component. Listing 9 shows how to include a map in the
Maps API for this example to work.
Listing 9. Using maps
The resulting map window is shown in Figure 12.
Figure 12. Example map control
Events and data access
Sencha Touch has support for several key events you might expect in a mobile application, such as touch start/end, scroll start/end, tap, double tap, swipe, and pinch. Data access will look familiar if you've done Ext JS work in the past.
The Sencha Touch framework supports JSON with padding (JSONP), Yahoo! query language (YQL), and Ajax requests. Combined with the Sencha Touch data package, they provide a flexible mechanism for binding data to your UI components.
Style and design
Creating your own theme can be a rather difficult undertaking. The Sencha Touch framework has key features that make it much easier to modify the default styles and design.
The framework uses Syntactically Awesome Stylesheets (Sass), which is an extension of CSS3 that, among other things, lets you use variables and selector inheritance to add more power to theme development. Changing a single variable can impact the entire theme—and it's that easy.
Creating a new theme is outside the scope of this article. Related topics has several links to help you get started.
This article is merely an introduction to the Sencha Touch framework. Now that you know the basics, consider diving deeper into the concepts using the Related topics below.
- Learn all about Sencha: read API docs, check out the blog, explore the forums, download demos, and more.
- Read "Dive into HTML5," by Mark Pilgrim, to get a jumpstart on HTML5 development.
- Learn more about Android. The Android Dev Guide has reference information and step-by-step instructions for common tasks.
- Download Sencha Touch.
- Download the latest version of the Google Chrome browser.
- Get the latest Android SDK.
- Download and learn more about Sass.
- Evaluate IBM products in the way that suits you best: Download a product trial, try a product online, use a product in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement Service Oriented Architecture efficiently.