About this series

Mobile development has taken off, so many developers are choosing to go the mobile web route instead of writing the same application repeatedly for each different mobile platform. However, one of the things that you give up by "going web" is the application frameworks that make life easier for developers of native mobile applications. As a result, several web application frameworks are emerging. In this four-part series, we will look at four of these frameworks: SproutCore, Cappuccino, jQTouch, and Sencha Touch. We will compare the features of these frameworks and evaluate the pros and cons of using them to build a mobile web application.

Back to top

Prerequisites

In this article, we will present the Sencha Touch mobile web application framework. Sencha is an object-oriented JavaScript framework, so experience with JavaScript—and with HTML and CSS, the other core technologies of web development—will help your understanding. The sample application has no server-side components, so any static web server will be sufficient. See Resources for links to these tools.

Back to top

The evolution of Sencha

If you have experience developing for the web, you might have heard of or even used Sencha, perhaps when it was called Ext JS or even YUI-Ext (an extension to the Yahoo! UI framework). Over the years, it has been called YUI-Ext, Ext JS, Ext 2.0, Ext 3.0, and now Sencha Touch. The new emphasis on mobile web applications can be partially attributed to the "merging" of jQTouch into Ext JS. However, as you will see, Sencha Touch is quite different from jQTouch.

To begin, it is not dependent on jQuery at all, but is instead built on top of Ext JS. Of course, Ext JS has always been well-regarded for compatibility with other JavaScript libraries, like jQuery and Prototype. Its selling points have included its widget library, complete with a more object-oriented set of APIs. Sencha Touch also has these features. However, the widget library is all-new and is heavily optimized for mobile browsers—specifically, iOS and Android devices. To get a better idea of how to use Sencha Touch for mobile web applications, take a look at the sample application; it is a new version of the intranet employee directory application that has been built in each of the previous articles in this series. See Downloads for the source code of this application.

Back to top

Sencha Touch app development

In the course of this series, we have examined several client-side web application frameworks. What sets Sencha Touch apart from the rest? The answer is that Sencha Touch is both a complete framework, with everything from utilities for making Ajax calls to a rich set of UI widgets, and is built for mobile web browsers. (In particular, it is built for the WebKit-based browsers on iOS and Android devices, though this list might expand in the future as WebKit-based browsers continue to dominate the mobile space.) This is a unique combination and can be very compelling.

Further, Sencha Touch is not a new, untested mobile web framework. Instead, it has a long lineage that has been popular with web developers for many years. It has active developers behind it, and a large community surrounding it. Sencha Touch has even been repackaged and reused by large development frameworks, like Adobe's ColdFusion.

As you might expect, Sencha Touch inherits many of the features of Ext JS that made it so popular with web developers. It not only provides a full framework for application development, but also an object-oriented framework. Dating all the way back to Smalltalk-80, user interface frameworks have used an object-oriented model. Although object-oriented programming is not the best fit for every programming problem, it is well suited to most user interface challenges. JavaScript can be considered object-oriented, though not in the usual class-based way. Since it uses a prototype-based flavor of object-oriented programming, you do not inherit from a class; instead, you clone an instance of that class and modify its prototype, overriding existing or adding new behavior to the object. Most developers are not familiar with this style of object-oriented programming and are more comfortable with class-based inheritance. Ext JS provides utilities on top of JavaScript to bring the class-based object-oriented programming to developers. It goes further by building an extensive UI widget library using a classic (class-based) object-oriented component model. At the same time, Ext JS uses idiomatic JavaScript. For example, the constructor to most Ext JS objects takes a JavaScript object literal as its sole input parameter. This object can be considered a configuration object, but in many ways it is like having a constructor with named parameters. This is highly advantageous when an object has a potentially long list of values that must be passed in to it for proper construction.

Of course, Sencha Touch is not simply Ext JS, but is optimized for the mobile web. That means that not only are its widgets designed with a small screen in mind, but it is also designed to handle touch events like taps and swipes, and device orientation changes. Taken altogether, this is a very powerful set of features. However, since seeing is believing for most developers, take a look at a sample mobile web application powered by Sencha Touch.

Data models, stores, and Ajax

The sample application is yet another implementation of the employee directory application that you've seen previously in this series. Remember that the application displays a list of employees and their contact information. Sencha Touch lets you define a data model for the application. Listing 1 shows what the Employee data model looks like.

Ext.regModel('Employee', {
    fields: [
        {name:'firstName', type: 'string'}, 
        {name: 'lastName', type: 'string'}, 
        {name:'email', type:'string'},
        {name: 'phone', type: 'string'}
    ]
});

Sencha Touch makes it easy to define a model and its fields. Simply provide an array of fields, each of which defines its name and type. The result is that this model can be used with UI components, as you'll see later in this article. For now, though, load some remote data that can be parsed into Employee objects. Use Sencha Touch's data store object—and a little Ajax—for this task. Listing 2 shows how to define the data store.

var store = new Ext.data.JsonStore({
    model  : 'Employee',
    sorters: [
             {property: 'lastName', direction: 'ASC'},
             {property: 'firstName', direction: 'ASC'}
        ],
    getGroupString : function(record) {
        return record.get('lastName')[0];
    },
    proxy : {
        type : 'ajax',
        url : 'app/employees.json',
        reader : {
            type : 'json',
            root : 'employees',
            idProperty : 'email'
        }
    },
    autoLoad : true
});

The data store is a key part of the Sencha Touch framework. A store provides a client-side cache of model objects that can be used with the various UI components in the framework. It is responsible for retrieving remote data, querying the data, sorting the data, and so on. In the case of the store in Listing 2, it declares that its model is Employee, which is the model that was registered in Listing 1. It then declares the sorters on that data, lastName and firstName. Thus, the natural sort of the data will be by lastName, ascending, and then by firstName, again ascending. Next, the store declares a getGroupString function. This function will be applied to each record (Employee) in the store in order to group them together. In this case, you are instructing it to take the lastName and use its first letter so that all of the employees whose last name starts with a 'G,' for example, will be grouped. This is only used in UI components that support grouping. Since the component that you'll use does support grouping, add this function to the store in order to take advantage of it.

The next section of the store describes its proxy. Sencha Touch has several different types of proxies. For example, it provides a proxy that uses the HTML5 localStorage object, Ext.data.LocalStorageProxy. If you had previously saved the data locally using localStorage, you'd be able to load it using the LocalStorageProxy and then use it with Sencha Touch UI components. This is a great example of how Sencha Touch provides an HTML5 feature that can be used on iOS and Android browsers.

The data for the example in Listing 2 has not been stored locally. Instead, it is on a remote server and must be loaded using Ajax. So for this store, declare a proxy object that will be an instance of Ext.data.AjaxProxy. You could have explicitly created such an object and then specified it in the config object (constructor) of the store object, but we chose instead to use more idiomatic JavaScript by specifying a config object for the proxy. To get an AjaxProxy instance, simply specify the type property of the proxy and then the URL to retrieve the data.

Now specify the reader property, which specifies an instance of Ext.data.Reader. This is an object used to process the raw data from the server and transform it into instances of the model objects that the proxy provides to the store. Once again, you could have explicitly created an instance of Reader before the store and its proxy, but we opted to use a JavaScript object literal that will be passed in as a config object to construct the reader. To create the reader, tell it what kind of data to expect (JSON), what the root element of the data structure is, and what property of the model to use as an ID. Finally, configure the store to autoLoad the data—that is, to fetch the data as soon as it can. Now that the store has been created and has loaded the remote data that backs it, you're ready to create a mobile-optimized user interface with this data.

Mobile-optimized widgets

Ext JS has always been known for providing a rich set of UI widgets, backed by an intuitive, object-oriented set of APIs. Sencha Touch continues this tradition, but includes widgets that are designed for mobile devices. For our example, you want to create some type of list of employees that will look great and function smoothly on a mobile device. Sencha Touch provides the Ext.List component to satisfy this common use case. Listing 3 shows how to use a List component to display the employee objects in the application.

var list = new Ext.List({
    store        : store,
    tpl          : new Ext.XTemplate(
                   '<tpl for=".">',
                       '<div class="contact">',
                           '{firstName} <strong>{lastName}</strong>',
                       '</div>',
                   '</tpl>'
               ),
    itemSelector : 'div.contact',
    singleSelect : true,
    grouped      : true,
    indexBar     : true,
    floating     : true,
    width        : 350,
    height       : 370,
    centered     : true,
    modal        : true,
    hideOnMaskTap: false,
    fullscreen   : true
});

The first thing to specify for the List is what its store property will be. Simply specify the Store instance that you created in Listing 2, since that will be the data source. Next, specify its tpl property, or template. The tpl will be applied to each employee object from the store. Sencha Touch includes a simple templating language for creating HTML that includes dynamic data elements; it is similar to Java Server Pages (JSP), PHP, or Embedded Ruby (ERb) templates. For example, if there were an employee with firstName = 'John' and lastName = 'Smith', then Listing 4 shows what the tpl property shown above would produce.

<div class="contact">
    John <strong>Smith</strong>
</div>

Returning to Listing 3, the next thing to specify is an itemSelector property. This is a CSS selector that Sencha Touch uses to determine what nodes to work with when an event is raised by the component. As you will see shortly, Sencha Touch provides many useful built-in behaviors that you can customize, but in order to take advantage of these behaviors, you must specify the itemSelector property. In this case, you take advantage of the fact that each of the employee objects in the list will be wrapped in a div with a class contact.

Several other properties are set in the config object that is used to construct the List component in Listing 3. Most of these are straightforward UI-related properties. Two other interesting properties are the singleSelect property (whether more than one item in the list can be selected at a time) and the grouped property (whether items in the list should be grouped together; this is set to true). Listing 2 showed how to specify a function (getGroupString) for this grouping. Finally, note that the indexBar property produces an index that can be used to skip around in the list. Figure 1 shows what the list will look like on an iPhone.

As you can see in Figure 1, which shows how the grouping is done and how the index bar is displayed, the list looks very native to the iPhone. Figure 2 shows the same application running on a popular Android device, a Samsung Galaxy S phone.

As Figure 2 shows, Sencha Touch creates equally compelling UIs for both iOS and Android devices. Figure 2 displays more data than Figure 1 simply because the Android device that was used has a bigger screen than the iPhone. Otherwise, everything is very similar. Going back to the model registered in Listing 1, notice that the application stores more data that what is shown in the list view. Take a look at how to create a detailed view of an employee that a user can open from the list view.

Back to top

Event handling and templates

Sencha Touch provides many convenient events that are specific to mobile or touch devices, like tapping, swiping, pinch-to-zoom, and even rotation. For this application, your goal is for the user to tap on an employee in the list view and see more information about that employee. Listing 5 shows how to accomplish this.

list.on('itemtap', function(dataView, index, item, e){
    var employee = dataView.store.data.items[index].data;
    var template = new Ext.XTemplate(
        '<p>Name: {firstName} {lastName}</p>',
        '<p>Email: {email}</p>',
        '<p>Phone: {phone}</p>'
    );
    var str = template.apply(employee);
    var panel = new Ext.Panel({
        floating     : true,
        width        : 250,
        height       : 155,
        centered     : true,
        modal        : false,
        hideOnMaskTap: false,
        dockedItems: [{
            dock: 'top',
            xtype: 'toolbar',
            title: employee.firstName + ' ' + employee.lastName
        },{html:str}]
    });
    var btn = new Ext.Button({
        text: 'Close', 
        ui: 'action', 
        handler: function(){
            panel.hide();
        }
    });
    panel.addDocked(btn);
    panel.show();
});

To handle a tap event, you simply need to use the list's on function to listen for the itemtap event. All UI components in Sencha Touch have an on function like this, though the list of events that you can listen for differs based on the component. Simply listen for itemtap and pass in a function (closure) to execute when the event occurs. That function will get passed an Ext.DataView object (the parent class to Ext.List), the index of the item that was tapped, the UI node that was tapped, and an event object. In Listing 5, the dataView (that is, the List component) retrieves the Employee object that corresponds to the employee name tapped. Once again, use Sencha Touch's templating system to create some HTML for that employee that will show their contact information. (Notice that in this case, you directly create the HTML using the template's apply method.) Next, create an Ext.Panel object, which is another commonly used UI widget in Sencha Touch. Create both a title bar in the panel and a close button, and stack those objects along with the HTML template in the panel. For the close button, specify a handler function that simply closes the panel. Then simply show the panel. Figure 3 shows how this looks on an Android phone.

With fewer than 100 lines of JavaScript, you created an interactive mobile web application that loads remote data using Ajax. It works equally well on iOS and Android devices. You can see why there is such interest in Sencha Touch, as it can provide a lot of useful functionality without unnecessary boilerplate code.

Back to top

Conclusion

This article has examined how and why Sencha Touch is a complete mobile web application framework. It takes care of everything, from retrieving data to creating a mobile-compatible UI to handling touch events. Sencha Touch provides an object-oriented programming paradigm that is very friendly to application developers. At the same time, it leverages many of the powerful features of JavaScript like object literals and closures. The maturity and functionality of this framework in such a new and evolving space—the mobile web—is noteworthy. In many ways, Sencha Touch has quickly become the gold standard that other frameworks are measured against.

Back to top

Download

Information about download methods

Resources

Learn

• Get more details on any of the objects or APIs seen in this article from Sencha Touch API Documentation.
  
  
• For more information about using Ajax in mobile web applications, take a look at "Create Ajax applications for the mobile Web" (Michael Galpin, developerWorks, May 2010).
  
  
• To learn more about using HTML5 features for mobile web applications, read this five-part developerWorks series about "Creating mobile Web applications with HTML 5" (Michael Galpin, developerWorks, June 2010).
  
  
• Learn how to create your own jQuery plugins from "Working with jQuery" (Michael Abernethy, developerWorks, February 2009).
  
  
• You can learn a lot about Sencha Touch by understanding Ext JS; take a look at "Build Ajax applications with Ext JS" (John Fronckowiak, developerWorks, July 2008).
  
  
• Explore how to leverage the features of mobile browsers in "Android and iPhone browser wars, Part 1: WebKit to the rescue" (Frank Ableson, developerWorks, December 2009).
  
  
• To learn even more about the different ways to parse XML using the Android SDK, read "Working with XML on Android" (Michael Galpin, developerWorks, June 2009).
  
  
• "New elements in HTML 5" (Elliotte Rusty Harold, developerWorks, August 2007) teaches that HTML 5 is not just about JavaScript.
  
  
• Just becoming acquainted with Android? "Introduction to Android development" (Frank Ableson, developerWorks, May 2009) is a great place to start.
  
  
• The developerWorks Web development zone specializes in articles covering various web-based solutions.
  
  

Get products and technologies

• Download Sencha Touch 1.0.
  
  
• Get the Apache HTTP Server.
  
  
• Download IBM product evaluation versions, and get your hands on application development tools and middleware products from DB2, Lotus, Rational, Tivoli, and WebSphere.
  
  

Discuss

• Create your developerWorks community profile today and setup a watch list on mobile web apps. Get connected and stay connected with My developerWorks.
  
  
• Find other developerWorks members interested in web development.
  
  
• Share what you know: Join one of our developerWorks groups focused on web topics.
  
  
• Roland Barcia talks about Web 2.0 and middleware in his blog.
  
  
• Follow developerWorks' members' shared bookmarks on web topics.
  
  
• Get answers quickly: Visit the Web 2.0 Apps forum.
  
  

About the author

Michael Galpin is an architect at eBay and a frequent contributor to developerWorks. He has spoken at various technical conferences, including JavaOne, EclipseCon, and AjaxWorld. To get a preview of what his next project, follow @michaelg on Twitter.

Rate this article

Comments

Back to top

Table of contents

• About this series
• Prerequisites
• The evolution of Sencha
• Sencha Touch app development
• Event handling and templates
• Conclusion
• Download
• Resources
• About the author
• Comments