an html5 mobile javascript framework for webkit browsers · specifications, html5 is still rather...

© Copyright IBM Corporation 2011 TrademarksBuild mobile web applications with Sencha Touch of 19

Build mobile web applications with Sencha TouchAn HTML5 mobile JavaScript framework for WebKit browsers

Brice Mason February 22, 2011

Sencha Touch is a mobile web application framework that was built using HTML5, CSS3, andthe JavaScript language. In this article, learn to apply your current web development skills tomobile web development. Download and set up Sencha Touch, and explore the basics using asample application. Learn everything you need to know to start working with the Sencha Touchframework.

OverviewIn the software development world, two important trends are increasingly important: mobileapplication development and standards-based HTML5 web development. The learning curve foreither type of development can be steep. Developing a native mobile application often requiresknowledge 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 isstandards-based. While vendors are working rapidly to incorporate and comply with these earlyspecifications, HTML5 is still rather immature.

The recent release of Sencha Touch 1.0 fuses the cutting-edge worlds of mobile applicationdevelopment with HTML5 web development to form a simple, accessible framework for buildingmobile web applications. In this article, learn everything you'll need to know to start working withthe Sencha Touch framework.

Sencha TouchLearning to build mobile applications—especially from the perspective of a web developer—can betroublesome. A variety of platforms to choose from and technologies to learn are available. HTML5support, though gaining momentum quickly, is still not quite ready to be used for complex webapplications, particularly line-of-business applications.

Frequently used abbreviationsAjax: Asynchronous JavaScript + XMLAPI: application programming interface

http://www.ibm.com/legal/copytrade.shtml

https://www.ibm.com/developerworks/ibm/trademarks/

developerWorks® ibm.com/developerWorks/

Build mobile web applications with Sencha Touch of 19

CSS: Cascading Style SheetsHTML: Hypertext Markup LanguageJSON: JavaScript Object NotationSDK: software development kitUI: user interface

Sencha Touch combines the rich platforms of HTML5 and mobile web application developmentinto a happy medium. The framework is developer-friendly and similar to using the Ext JSJavaScript framework. If you have moderate to advanced JavaScript experience, then SenchaTouch is approachable. If you already have skills as a JavaScript and CSS developer, SenchaTouch can immediately turn you into a mobile application developer, too.

Sencha is a company with a core commercial product offering, but it also supports open sourcesoftware. Sencha Touch 1.0 is free for both personal and commercial use.

Platform support

Sencha Touch is currently supported on WebKit browsers, including the popular Apple iOS andGoogle Android platforms. Some might contend that this support isn't enough—that all platformsmust be supported for Sencha Touch to be taken seriously. When adopting a framework in themobile web development realm, it's wise to look for two things: platform richness and featurerichness. 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 thetwo most popular platforms and using their resources to provide rich, easy-to-use features fordevelopers.

What you need to know

To start using Sencha Touch, all you need is working knowledge of the JavaScript language andCSS. As mentioned, the framework abstracts many of the features and styles you'd normally beassembling from scratch.

If you want to explore further, and perhaps build your own custom components or modify styles foryour own brand, you need more in-depth skills in HTML5 and CSS3. For more information, see theRelated topics section.

Getting startedTo get started with Sencha Touch:

1. Download the framework from Sencha. (See Related topics.)2. 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 youcan use this same folder name for future framework versions without updating other files thatreference it.

3. 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, youshould see a screen similar to Figure 1.

ibm.com/developerWorks/ developerWorks®


Figure 1. Sencha Touch Examples

Explore some of the framework features by building a Sencha Touch application.

1. Create a new HTML file named index.html in the root of your site with the source code fromListing 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.

2. Modify the code from Listing 1 as shown in Listing 2.

Listing 2. Installing Sencha Touch scripts and styles

<!DOCTYPE HTML><html><head><title>Touch Test</title>

<link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/sencha-touch-debug.css" />

<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

</head>


The above code adds the CSS and JavaScript files for the Sencha Touch framework. Youhooked in the debug versions of these files, which is recommended for development purposessince they yield better error messages. To deploy, simply swap out the debug versions forthe minified versions. You can also add your own custom CSS file and a JavaScript file forbuilding your application.

3. To keep the example simple, include some embedded JavaScript code. Start by modifyingyour code to resemble Listing 3.

Listing 3. The simplest Sencha Touch application

<!DOCTYPE HTML><html><head><title>Touch Test</title>



<script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.Panel({ fullscreen: true, html: "Sencha Touch is ready!" }); } });</script>



</head>


4. Run the page in Google Chrome, and you should see something similar to Figure 2.

Figure 2. The simplest Sencha Touch application

Ext.setupSeveral other useful configuration options for the Ext.setup function are available; see theAPI documents, found in the docs folder of your Sencha Touch installation, for details.

The code in Listing 3 introduces a block of JavaScript code you'll reuse throughout this article toexplore framework features. If you've used Ext JS, this code might look familiar. The Ext.setupfunction is the starting point for your Sencha Touch applications. It accepts an object with anumber of configuration options. The example uses the onReady option, which takes a functionto evaluate when the document is ready. The onReady function creates the root panel of theapplication. The root panel takes up all available space and contains a simple string by using thefullscreen and html options, respectively.

Running applications in an Android emulator

So far you've used the Google Chrome browser to work through development. It's a goodapproach, especially when trying to deal with JavaScript and CSS bugs. Use a device emulator tostart application testing. This section shows how to install an Android emulator.

1. Download the most recent Android SDK for your operating system platform and extract it todisk.



The SDK includes all the utilities required for getting an emulator up and running, but a fewmore steps are necessary.

2. Android emulators require that you create an Android Virtual Device (AVD), which is basicallyconfiguration options that model an actual Android-powered device. To create an AVD, run theandroid utility 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 importantfield labeled Target, which is disabled. Before you can create a new virtual device, download anadd-on to the SDK.

1. Select Available Packages from the left menu.2. Expand the site labeled https://dl-ssl.google.com/android/repository/repository.xml to

reveal the list of available packages to install.3. Select the most recent SDK platform, as shown in Figure 4, and then click Install Selected.



Figure 4. Available packages for Android SDK

4. Accept the installation by clicking the Install button in the next window.5. 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 Androiddevice running version 2.2. The next step is to create the AVD.

1. Select Virtual Devices from the left menu in the AVD Manager, and click New….2. Enter sencha-avd for the Name and select the Android 2.2 target you just installed as the

Target. Leave all other defaults.3. 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 theemulator: 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 localhost, or 127.0.0.1, in theemulator is actually within the context of the emulator itself. To reference your local developmentenvironment, 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 componentsNow that you have the basics, this section provides a tour through some of the Sencha Touch UIcomponents.

ButtonsYou can create a number of button styles by using just a few configuration options. The code inListing 5 creates a vertically stacked collection of all available buttons. The example application isexpanded to include an array of items to be added to the root panel—in this case, a single panelwith a vertically stacked collection of buttons.

The buttons are styled based on the ui configuration option. Supported button types are normal,back, round, action, and forward.

Listing 5. Buttons<script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.Panel({ fullscreen: true, items: [ // add a panel to the root panel // this will contain a vertical layout of buttons { xtype: "panel", layout: "vbox", items: [ { xtype: "button",



ui: "normal", text: "Normal" }, { xtype: "button", ui: "back", text: "Back" }, { xtype: "button", ui: "round", text: "Round" }, { xtype: "button", ui: "action", text: "Action" }, { xtype: "button", ui: "forward", text: "Forward" } ] } ] }); } });</script>

Figure 6 shows the result.

Figure 6. Available button styles in Sencha Touch



Forms

The forms suite contains all the usual suspects and more. It is apparent that HTML5-specificfunctions 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; SenchaTouch just makes it easier to use. Listing 6 shows some of the features.

Listing 6. Sampling of form controls

<script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.Panel({ fullscreen: true, items: [ // add a panel to the root panel { xtype: "form", items: [ { xtype: "textfield", name: "name", label: "Name", placeHolder: "your name here" }, { xtype: "emailfield", name: "email", label: "Email", placeHolder: "[email protected]" }, { xtype: "urlfield", name: "url", label: "Url", placeHolder: "http://www.example.com" }, { xtype: "datepickerfield", name: "date", label: "Date", picker: { yearFrom: 2010 } } ] } ] }); } });</script>

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

Lists

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 varioustypes of lists, including simple, grouped, and nested. Figure 8, which is taken from the KitchenSink demo in the framework download, demonstrates a grouped list. The vertical stack of letters atthe 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 toolbarsSencha Touch ships with an impressive repository of icons built in and ready to use. All you needto do is specify a string representing a CSS class for the icon you want. Listing 7 shows how tobuild two toolbars: one docked to the top of the root panel, and one docked to the bottom. Eachtoolbar 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<script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.Panel({ fullscreen: true, dockedItems: [ { xtype: "toolbar", dock: "top", items: [ { iconMask: true, ui: "plain", iconCls: "add" }, { iconMask: true,



ui: "plain", iconCls: "delete" }, { iconMask: true, ui: "plain", iconCls: "star" }, { iconMask: true, ui: "plain", iconCls: "home" } ] }, { xtype: "toolbar", dock: "bottom", items: [ { iconMask: true, iconCls: "download" }, { iconMask: true, iconCls: "favorites" }, { iconMask: true, iconCls: "search" }, { iconMask: true, iconCls: "user" } ] } ] }); } });</script>

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 tabsCarousels and tabs are easy to implement using coding patterns you've already explored. Listing 8shows a tabbed interface and a carousel.

Listing 8. Constructing carousels and tabs<script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.TabPanel({ fullscreen: true, items: [ { title: "Tab 1", html: "First tab" }, { title: "Tab 2", html: "Second tab" }, { title: "Tab 3", html: "Third tab" } ] }); } });</script>

<script type="text/javascript">



Ext.setup( { onReady: function() { // create the root panel new Ext.Carousel({ fullscreen: true, items: [ { html: "First item" }, { html: "Second item" }, { html: "Third item" } ] }); } });</script>

Carousels and tabs are similar in code and function. The carousel moves between cards by eitherperforming a sliding gesture from side to side, or by clicking one of the circular icons docked at thebottom. 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

OverlaysYou can use several overlay controls. Your options include standard alert, confirm, and promptcontrols, as well as plain modal controls.

MapsIn mobile web development, one of the more popular components is maps. Sencha Touch makesit very simple to include a map in your application using the Ext.Map component. Listing 9 showshow to include a map in the sample application. Remember to include the JavaScript file for theGoogle Maps API for this example to work.

Listing 9. Using maps<!DOCTYPE HTML><html><head><title>Touch Test</title>


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


<script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.Panel({ fullscreen: true, items: [



{ xtype: "map" } ] }); } });</script>

</head>


The resulting map window is shown in Figure 12.

Figure 12. Example map control

Events and data accessSencha Touch has support for several key events you might expect in a mobile application, suchas touch start/end, scroll start/end, tap, double tap, swipe, and pinch. Data access will look familiarif 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 flexiblemechanism for binding data to your UI components.



Style and design

Creating your own theme can be a rather difficult undertaking. The Sencha Touch framework haskey 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 CSS3that, among other things, lets you use variables and selector inheritance to add more power totheme 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 helpyou get started.

Conclusion

This article provided an introduction to Sencha Touch, which is a mobile web applicationframework built using HTML5, CSS3, and JavaScript. You learned how to create a simple SenchaTouch application, and how to test it with a device emulator. You also explored some of the UIcomponents.

This article is merely an introduction to the Sencha Touch framework. Now that you know thebasics, consider diving deeper into the concepts using the Related topics below.



Related topics

• Learn all about Sencha: read API docs, check out the blog, explore the forums, downloaddemos, 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 Sandboxlearning how to implement Service Oriented Architecture efficiently.

© Copyright IBM Corporation 2011(www.ibm.com/legal/copytrade.shtml)Trademarks(www.ibm.com/developerworks/ibm/trademarks/)

http://www.sencha.com

http://www.diveintohtml5.org

http://developer.android.com/index.html

http://developer.android.com/guide/developing/tools/avd.html

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

http://www.google.com/chrome

http://developer.android.com/sdk/index.html

http://sass-lang.com

http://www.ibm.com/developerworks/downloads/

http://www.ibm.com/developerworks/downloads/soasandbox/index.html

http://www.ibm.com/legal/copytrade.shtml

https://www.ibm.com/developerworks/ibm/trademarks/

an html5 mobile javascript framework for webkit browsers · specifications, html5 is still rather...

Documents