MVC Mobile Web Development with Sencha Touch
September 8, 2011
In the previous installment of this special series on mobile Web development, we looked at jQTouch, a powerful jQuery plugin useful for building Web-based mobile applications. As it happens, jQTouch is one of several popular open source projects fostered by the Sencha Labs foundation. As it happens, Sencha Labs's namesake corporate arm also offers a second mobile Web application framework called Sencha Touch, which presents its own unique set of compelling features.
Sencha Touch keys on many of the unique features made available via HTML5 and CSS3, placing special attention on data integration, an MVC-based architecture for effectively managing your application code, and offering a powerful set of custom touch-based interactions such as tapping, pinching, and rotating. Sencha Touch is well worth a look for anybody exploring Web-based mobile applications.
In this article I'll introduce you to Sencha Touch and show you how to begin building a simple application using its intuitive MVC-driven approach.
Installing Sencha Touch
Sencha Touch is dual-licensed under both a commercial and open source license, with the former required should you be interested in building proprietary applications and the latter should you create an open source application licensed under the GPL v3 (FLOSS exceptions are also available for other licenses, see the licensing page for more details). Interestingly, the commercial license is free for most purposes, meaning you'll only be set back a few dollars should you be interested in purchasing technical support.
In any case, you can install Sencha Touch by heading over to its download page. Create a new directory which will house your mobile project. For the purposes of this tutorial I'll call this directory m.example.com. Unzip the Sencha download and place its contents somewhere within the project directory. For instance I tend to place third-party libraries within a directory named lib/, renaming the third-party directory to something easier to type, such as sencha (I'll use this convention throughout the remainder of the tutorial). Therefore, so far the project directory looks like this:
m.example.com/
lib/
sencha/
Additionally, keep in mind Sencha Touch is geared towards browsers using the WebKit layout engine, the two most notable of which include Google Chrome and Safari. Therefore, you should install one of these two browsers if you haven't already in order to use one for testing. It goes without saying that you should perform significant additional testing using a mobile device before releasing anything for public consumption.
Creating the MVC Project Structure in Sencha Touch
If you read the jQTouch tutorial, you probably recall that each page was encapsulated within its own DIV element. Sencha Touch takes a drastically different approach, using JavaScript to drive the application layout and behavior. While using JavaScript to dictate an application's layout may seem an odd choice, as you'll soon see the approach resembles the syntax and concepts used by GTK+.
Let's continue work on the project by creating the other directories which will store the models, views, and controllers.
m.example.com/
app/
controllers/
models/
views/
lib/
sencha/
Next, create an HTML page named index.html which looks like this (minus the line numbers). Place this file in your project's root directory:
01 <html>
02 <head>
03 <title>Example.com Mobile Website</title>
04
05 <!-- CSS -->
06 <link rel="stylesheet" href="/lib/sencha/resources/css/sencha-touch.css" type="text/css" target="_blank">
07
08 <!-- SENCHA -->
09 <script type="text/javascript" src="/lib/sencha/sencha-touch.js" target="_blank"></script>
10
11 <!-- APPLICATION -->
12 <script type="text/javascript" src="/app/app.js" target="_blank"></script>
13
14 <!-- ROUTES -->
15
16 <!-- CONTROLLERS -->
17
18 <!-- VIEWS -->
19
20 </head>
21
22 <body>
23
24 </body>
25
26 </html>
- Line 06 integrates the
sencha-touch.css CSS file, which provides the mobile-specific look-and-feel.
- Line 09 integrates the
sencha-touch.js JavaScript library, which provides all of the functionality we'll subsequently use to build the application.
- Line 12 integrates a JavaScript file which we'll use to build the application. (Currently this file doesn't exist so you'll need to create it if you're following along.)
- Finally, lines 14, 16, and 18 serve as placeholders denoting the areas where we will be adding the router, controllers, and views used to power the sample application.
Initializing the Sencha Touch Application
The app.js file referenced in the previous listing will at a minimum be responsible for initializing the mobile application. In order to get things rolling this script will look like this:
Ext.regApplication({
name: 'App',
defaultUrl: 'Index/index',
launch: function()
{
this.viewport = new App.views.Viewport();
},
});
These few lines are pretty powerful in that they initialize the application by first identifying an internal namespace (App), define the default route, and define any other specific tasks which should take place when the application starts (defined by the launch property's assigned anonymous function, which at this point only instantiates the application layout, known as the viewport). I'll return to the viewport in a moment.
You'll notice the default route is set to Index/index, which means we want the Index controller's index action to execute. But Sencha doesn't recognize the controller/action route convention by default; you need to define it within a file (typically named routes.js), like so:
Ext.Router.draw(function(map) {
map.connect(':controller/:action');
});
Place this file in the app directory and then add the following line to your index.html file, predictably within the ROUTES section:
<script type="text/javascript" src="app/routes.js" target="_blank"></script>
Building the Sencha Touch Viewport and Index Controller
In the app.js file I instantiated a class called viewport, which defines several key aspects of the mobile application layout. This class is found in a file named Viewport.js and placed in the app/views directory. This class extends one of Sencha's widgets, namely the panel, defining the panel to be full screen, and additionally docking a toolbar at the top. Several other attributes can be defined in the viewport, although due to reasons of space I'll leave it to you to learn more about the panel widget:
App.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'm.example.com',
items: [
{
}
],
},
],
});
Don't forget to reference the viewport file within your index.html file, placing the following line within the VIEWS section:
<script src="/app/views/Viewport.js" type="text/javascript" target="_blank"></script>
We want the Index controller's index action to be the default, therefore it makes sense to create those first. The Index controller, defined within a file named IndexController.js and placed within the /app/controllers/ directory, looks like this:
Ext.regController('Index', {
index: function()
{
this.indexView = this.render(
{xtype: 'IndexIndex'}
);
this.application.viewport.setActiveItem(this.indexView);
},
});
In this controller we define the controller name, and within it define an action named index. Within the simple index action I've defined the associated view as IndexIndex, the name of which is registered within the associated view file (named IndexView.js and found in app/views/index). Like the viewport, this view extends the panel, but to keep things easy I'll just render a simple hello string using the html attribute:
App.views.IndexIndex = Ext.extend(Ext.Panel, {
dockedItems: [
{
xtype: 'panel',
items: [
{
xtype: 'panel',
items: [],
html: 'hello',
}
],
dockedItems: [],
},
],
});
Ext.reg('IndexIndex', App.views.IndexIndex);
<script src="/app/controllers/IndexController.js" type="text/javascript" target="_blank"></script>
...
<script type="text/javascript" src="/app/views/index/IndexView.js" target="_blank"></script>
Whew! It took a bit of doing but now we are getting somewhere! Try loading your application into Chrome or Safari and you'll be greeted with the default page. See Figure 1, which shows what this page looks like when loaded into my iPhone.
Click here for larger image
Figure 1. Creating a Tab Panel in Sencha Touch
Where to From Here?
While this tutorial provides you with the basis for better understanding Sencha's basic MVC behavior, the truth is Sencha is so packed with features that this short introduction barely does it justice. To learn more about what's available, be sure to check out the documentation included with the Sencha Touch download. Also, for some real inspiration be sure to check out the demos located on the Sencha Touch home page.
About the Author
Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board. | 
