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 Touch combines the rich platforms of HTML5 and mobile web application development into a happy medium. The framework is developer-friendly and similar to using the Ext JS JavaScript framework. If you have moderate to advanced JavaScript experience, then Sencha Touch is approachable. If you already have skills as a JavaScript and CSS developer, Sencha Touch 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 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.
To start using Sencha Touch, all you need is working knowledge of the JavaScript language and CSS. As mentioned, the framework abstracts many of the features and styles you'd normally be assembling from scratch.
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 Resources section.
To get started with Sencha Touch:
- Download the framework from Sencha. (See Resources.)
- 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 2.
Listing 2. Installing Sencha Touch scripts and styles
<!DOCTYPE HTML> <html> <head> <title>Touch Test</title> <!-- sencha touch css --> <link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/sencha-touch-debug.css" /> <!-- sencha touch javascript --> <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script> </head> <body> </body> </html>
The above code adds the CSS and JavaScript files for the Sencha Touch framework. You hooked in the debug versions of these files, which is recommended for development purposes since they yield better error messages. To deploy, simply swap out the debug versions for the minified versions. You can also add your own custom CSS file and a JavaScript file for building your application. - To keep the example simple, include some embedded JavaScript code. Start by modifying your code to resembleListing 3.
Listing 3. The simplest Sencha Touch application
<!DOCTYPE HTML> <html> <head> <title>Touch Test</title> <!-- sencha touch css --> <link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/sencha-touch-debug.css" /> <!-- sencha touch javascript --> <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script> <!-- application script --> <script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.Panel({ fullscreen: true, html: "Sencha Touch is ready!" }); } }); </script> </head> <body> </body> </html> - Run the page in Google Chrome, and you should see something similar to Figure 2.
Figure 2. The simplest Sencha Touch application
The code in Listing 3 introduces a block of JavaScript code you'll reuse throughout this article to explore framework 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 fullscreen and html options, respectively.So far you've used the Google Chrome browser to work through development. It's a good approach, especially when trying to deal with JavaScript and CSS bugs. Use a device emulator to start application testing. This section shows how to install 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….
- Enter
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 localhost, or 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
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
ui configuration option. Supported button types are normal, back, round, action, andforward.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
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
<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: "you@example.com"
},
{
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
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
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
<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 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
<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 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 using the
Ext.Map component. Listing 9 shows how to include a map in the sample application. Remember to include the JavaScript file for the Google Maps API for this example to work.Listing 9. Using maps
<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>
<!-- sencha touch css -->
<link rel="stylesheet" type="text/css"
href="sencha-touch/resources/css/sencha-touch-debug.css" />
<!-- Google Maps API -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- sencha touch javascript -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
<!-- application script -->
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
items: [
{
xtype: "map"
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
|
The resulting map window is shown in Figure 12.
Figure 12. Example map control
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.
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. Resources has several links to help you get started.
This article provided an introduction to Sencha Touch, which is 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 emulator. You also explored some of the UI components.
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 Resources below.
Learn
- 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.
- The developerWorks Web development zone specializes in articles covering various web-based solutions.
Get products and technologies
- 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.
Discuss
- Create your My developerWorks profile today and set up a watch list on mobile application development. Get connected and stay connected with developerWorks community.
- 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.
- Get answers quickly: Visit the Ajax forum.
Good tutorial man! Keep up the good work!
ReplyDeleteThanks for sharing nice information about Mobile application development. Mobile Application Development useful for iPhone development and Android Mobile Application Development. Awesome post.
ReplyDeleteIn other cases so that it will not be lost in a big chunk of their customers is the Android Mobile Apps user, they are looking for an Android application suitable for business.
ReplyDelete