Build a mobile Web application with Sencha Touch

Sencha Touch is a mobile Web application framework built using the HTML5, CSS3, and JavaScript languages, and in this article, learn how to apply your current Web development skills for mobile web development. Download and build Sencha Touch to explore the fundamentals with a sample application. Learn everything you need to start using the Sencha Touch framework

March 19, 2012

• Content
  • Overview
  • Sencha Touch
  • Ready to start
  • UI components
  • Conclusion
  • Resources
  • Comments

Overview

In the field of software development, two important trends are becoming increasingly important: mobile application development and standards-based HTML5 web development. The learning process of any type of development is arduous. Developing a local mobile application often requires specific platform and technical knowledge, such as the objective-c for the IPhone and the Java™ for Android (which is just two platforms). HTML5 development has become increasingly popular in recent days as it is based on standards. While suppliers are rapidly incorporating and complying with these early specifications, HTML5 is not yet mature.

The recently released Sencha Touch 1.0 incorporates cutting-edge technology and Web development in mobile application development, creating a simple, easy-to-understand framework for building mobile Web applications. In this article, you'll learn everything you need to get started with the Sencha Touch framework.

Back to top of page

Sencha Touch

Learning to build mobile apps-especially from a web developer's perspective-can be tricky. Various platforms are available to choose from, and various technologies are available for learning. HTML5 support, despite the rapid growth momentum, is still not ready for complex WEB applications, especially line-of-business applications.

Common abbreviations

Ajax: Asynchronous JavaScript and XML
API: Application Programming Interface
CSS: Cascading Style Sheets
HTML: Hypertext Markup Language
JSON: JavaScript object symbols
SDK: Software Development Kit
UI: User interface

Sencha Touch combines a rich HTML5 platform with mobile Web application development to create a compromise. This framework is developer-friendly, similar to using the EXT JS JavaScript framework. If you have an advanced JavaScript level, it's possible to master Sencha Touch. If you already have the skills to be a JavaScript and CSS developer, Sencha Touch instantly turns you into a mobile app developer.

Sencha is a company with a core business product, but also supports open source software. Sencha Touch 1.0 is free for both personal and commercial use.

Platform Support

Sencha Touch currently supports WebKit browsers, including popular Apple IOS and Google Androidis platforms. Some might argue that this support is not enough-all platforms must focus on support for Sencha Touch. When choosing a framework for mobile web development, it is wise to focus on two points: the richness of the platform and the richness of its features. A framework is needed to extract the most content from HTML5/CSS3 in a developer-friendly way and have a broad impact. In this regard, Sencha is more savvy, supports two of the most popular platforms and uses their resources to provide developers with rich, easy-to-use features.

What you need to know

To get started with Sencha Touch, you need to understand how the JavaScript language and CSS work. As mentioned earlier, this framework extracts many features and styles, otherwise you usually need to assemble from scratch.

If you want to study more, or if you want to build your own custom components, or modify your own branding styles, you need more advanced HTML5 and CSS3 skills. For more information, see the Resources section.

Ready to start

Start using Sencha Touch:

1. Download the framework from Sencha. (See Resources.) ）
2. Unzip the content into the root directory of the development site.

   Rename a common name for the unpacked folder, for example, Sencha-touch, so you can use the same folder name for future versions of the framework without needing to update other files referencing the framework.

3. Use a WebKit browser, such as Google Chrome, to open the sample page http://localhost/sencha-touch/examples/. Although your environment may be slightly different, you should also see an interface similar to Figure 1.

Figure 1. Sencha Touch Example

Research framework features by building a Sencha Touch application.

2. Using the source code in Listing 1, create a new HTML file index.html at the root of your Web site. Listing 1. Sample HTML5 Documentation

   <! DOCTYPE Html>
   Once you've created that file, you're officially an HTML developer. The <!DOCTYPE HTML> document type declaration at the top is key, which ensures that the document is parsed to HTML5.

3. The
4. modifies the code in Listing 1, as shown in Listing 2. Listing 2. Install Sencha Touch scripts and styles

   <! DOCTYPE html> 
    The above code adds CSS and JavaScript files to the Sencha Touch framework. You hook up the debug versions of these files, which are recommended for development use because they generate better error messages. To deploy, simply switch to a scaled-down debug version. You can also add your own custom CSS files and JavaScript files to build your application. 

6. To maintain the simplicity of the example, include some embedded JavaScript code. Start by modifying your code, similar to listing 3. Listing 3. The simplest Sencha Touch app

   <! DOCTYPE html>

8. On the Google Chrome run page, you should see an interface similar to Figure 2. Figure 2. The simplest Sencha Touch app

Ext.setup

Several other useful Ext.setup configuration option functions are also available; Refer to the API documentation for more details, which can be found in the Docs folder of your Sencha Touch installation directory.

The code in Listing 3 describes a JAVASCRIPT code block that you can use throughout the article to explore the framework features. If you use Ext JS, this code may be familiar. The Ext.setup function is the starting point for your Sencha Touch application. It accepts an object and some configuration options. The example uses onReady the option to run a function when the document is ready. onReadyfunction to create the application's root panel. The root panel uses fullscreen and html options, which occupy all available space and contain a simple string, respectively.

Running the application in the Android emulator

So far, you've completed your development using Google Chrome. This is a good approach, especially when dealing with JavaScript and CSS bugs. Use a Device Emulator to start the application test. This section shows how to install an Android emulator.

1. Download the latest Android SDK for your operating system platform and unzip it to disk.

   The SDK includes all the tools you need to get and run a simulator, but there are a few steps that are necessary.

2. Android Simulator requires you to create an Android Virtual device (AVD), which is the basic configuration option that actually models an Android drive device. To create an AVD, run the utility function under the Tools folder of the Android SDK android .

   The Android SDK and AVD Manager should open, similar to Figure 3.

   Figure 3. Android SDK and AVD Manager

Here, if you want to create a new virtual device, use the new ... button and note a field labeled Target , which is disabled, before you create a new virtual device, download the satellite package to the SDK.

1. Select Available Packagesfrom the left menu bar.
2. Expand your site https://dl-ssl.google.com/android/repository/repository.xml to retrieve a list of available kits for installation.
3. Select the latest SDK platform, as shown in Figure 4, and then click Install Selected. Figure 4. Data packages available for use by the Android SDK
4. In the next window, Click the Install button to accept the installation.
5. After downloading and completing, click Close.

You have just installed a potential target for the AVD you want to create, which is an Android device running on version 2.2, and the next step is to create an AVD.

1. Select Virtual Devicesfrom the left button of the AVD Manager and click New....
2. Enter sencha-avd as Name, and then select the Android 2.2 target you just installed as targets. All others remain the default settings.
3. Click Create AVD.

   Click OKin the confirmation window, and then close the AVD Manager.

Now all you need is to run an emulator in your local development environment. To run the emulator: Open a terminal window, modify the path to the installation root of the Android SDK, and then enter the command in Listing 4.

Listing 4. Call the Android emulator

TOOLS/EMULATOR-AVD SENCHA-AVD

You can use a Web browser in the Android emulator to browse your test application under http://localhost/, but you will get a big 404 error because it is applied in the emulator localhost or 127.0.0.1 is actually in the emulator itself environment. To reference your deployment environment, use the address 10.0.2.2 to generate the interface shown in Figure 5.

Figure 5. Sample Sencha Touch UI components running in the Android emulator overview

Now that you understand the fundamentals, this section browse through some of the Sencha Touch UI components.

Button

You can create many button styles by using some configuration options. The code in Listing 5 creates a series of all available buttons that are vertically arranged. The sample application extends a set of entries added to the root panel-in this case, a panel and a series of vertically arranged buttons.

The buttons ui are styled according to the configuration options. The supported button types are normal ,,, back round , action and forward .

Listing 5. Button

<script type= "Text/javascript" > Ext.setup ({onready:function () {//Create the root panel new EXT.PA Nel ({fullscreen:true, items: [//Add a panel to the root panel//This would contain a V              Ertical 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 results of the build

Figure 6. button style forms available in Sencha Touch

The form suite contains all the common features and other features. Obviously, the form suite handles and consolidates HTML5-specific functions. Support for field types in HTML5 (for example, e-mail, web address, and time picker) and attributes (such as placeholder text); Sencha Touch simply makes them easier to use. Listing 6 shows some of the features.

Listing 6. Sample form Controls

<script type= "Text/javascript" > Ext.setup ({onready:function () {//Create the root panel new EXT.PA Nel ({fullscreen:true, items: [//Add a panel to the root panel {xtype: "fo RM ", items: [{xtype:" TextField ", Name:" Name ", lab El: "Name", PlaceHolder: "Your Name Here"}, {xtype: "Emailfiel                D ", 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 form in Listing 6 produces an interface similar to Figure 7. The date field gets the focus and the time picker is displayed at the bottom.

Figure 7. List of available form fields samples

When developing a mobile Web application, you can use a limited base panel. Support for list-based UI components becomes important. Sencha Touch is equipped with various lists of support, including simple, combined and nested. Figure 8 is a screen of the Kitchen Sink demo in the framework download that shows a list of combinations. The vertically arranged characters to the right of the list expose a useful way to jump directly to a specific part of the list.

Figure 8. Kitchen a combined List icon and toolbar in the Sink demo

Sencha Touch comes with a stunning built-in icon library that is immediately available. All you need to do is specify a string that represents a CSS class for the icon you want. Listing 7 shows how to build two toolbars: one at the top of the root panel and one at the bottom. Each toolbar is configured with a small out-of-the-box icon example.

This framework also provides more available icons, view API documentation and examples for more information.

Listing 7. Icons in the toolbar

<script type= "Text/javascript" > Ext.setup ({onready:function () {//Create the root panel new EXT.PA            Nel ({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: "s            Earch "}, {iconmask:true, iconcls:" User "}    ]            }        ]      }); }});</script>

After running the code in Listing 7, you can see an interface similar to Figure 9.

Figure 9. Icons and Styles sample slide effects and tabs

Slide effects and tabs are easy to implement by using the explored encoding pattern. Listing 8 shows a tabbed interface and a carousel.

Listing 8. Construct Slide effects 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>

Slide effects and tabs are similar to code and functions. The slide effect moves between cards and can be slid from side to side with a sliding action, or you can click a ring icon at the bottom. By default, both controls can use a sliding animation to toggle between cards.

Figure 10 shows the tab interface.

Figure 10. Sample Tab interface

Figure 11 shows the Carousel interface.

Figure 11. Sample Slide Effect Interface Overlay

You can use several overlay controls. Your choices include standard hints, confirmation and prompt controls, and normal modal controls.

Map

In mobile Web development, one of the most important components is the map. Sencha Touch makes it easy to include a map in your application, using Ext.Map components. Listing 9 shows how to include a map in the sample application, remembering the JavaScript file that contains the Google Maps API, to make the sample run.

Listing 9. Using the Map

<! DOCTYPE html>
The resulting map window is shown in Figure 12.
Figure 12. Map Control Sample events and data access
Sencha Touch supports several key events you expect in your mobile application, such as Touch start/end (touchscreen start/end), scroll start/end (scroll start/end), tap, double tap, Slide fingers (swipe) and compressions (pinch). Data access looks like the past Ext JS did.
The Sencha Touch Framework supports JSON with padding (JSONP), Yahoo! Query language, and AJAX requests. With the Sencha Touch packet collection, they provide a flexible mechanism to bind data to your UI components.
Style and design
Creating your own theme can be a relatively difficult task. The Sencha Touch framework has key features that make it easier to modify default styles and designs.
The framework uses syntactically Awesome stylesheets (Sass), which is an extension of CSS3 that allows you to add more power to theme development using variables and choosing heredity. Changing a single variable may affect the whole topic-it's that simple.
Creating a new theme is not within the scope of this article. Resources have several links to help you get started.
Conclusion
This article provides an introduction to Sencha Touch, a mobile Web application framework built using HTML5, CSS3, and JavaScript. You learned how to create a simple Sencha Touch application and how to test it with a device virtual machine. You also explored some of the UI components.
This article is just a brief introduction to the Sencha Touch framework. Now that you have mastered the basics, consider using the following references to further explore the relevant concepts.

 
 
 
 
 
 Reference Learning
 
 

  
  
 
   
Get a comprehensive view of Sencha: Read API documentation, review blogs, visit forums, download demos, and more.
 
   
Read "Dive into HTML5", author Mark Pilgrim, to get help starting HTML5 development.
 
   
Learn more about Android. The Android Dev Guide has reference information and step-by-steps instructions for common tasks.
 
   
DeveloperWorks developerWorks China website web Development Zone specializes in articles on a variety of web solutions.
 
  
 
 
Access to products and technologies
 
 

  
  
 
   
Download Sencha Touch.
 
   
Download the latest version of the Google Chrome browser.
 
   
Get the latest Android SDK.
 
   
Download and learn more Sass.
 
   
Evaluate IBM products in the way that suits you best: Download a product trial, try a product online, try a product in a cloud environment, or spend a few hours in the IBM SOA Sandbox learning how to implement a service-oriented architecture efficiently.
 
  
 
 
Discuss
 
 

  
  
 
   
Find other DeveloperWorks members who are interested in web development.
 
   
Share your knowledge: Join a developerWorks group that focuses on web topics.
 
   
Find answers quickly: Visit the WEB 2.0 Apps forum.
 
   
Find the answer quickly: visit the Ajax forum.
 
  
 
 
Build a mobile Web application with Sencha Touch