November 28, 2014
Hot Topics:

MVC Mobile Web Development with Sencha Touch

  • September 8, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

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>

Tags: mobile web development

Originally published on http://www.developer.com.

Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel