Corporate Blog

Mobile Web Development with Sencha Touch Framework

When someone is required to develop a mobile application; people often look for universal solutions that will have an ability to quickly create powerful, good looking apps built on web standards. The essential requirements for selection are but not limited to:

  1. Web-oriented. Native applications have significant advantages compared to browser apps; but they require development on different platforms (iOS, Android, BlackBerry).
  2. Fancy look and feel. By providing a modern interface, this allows you to work with the app as you would with a native application.
  3. HTML5 support. Makes specific use of HTML5 to deliver components like audio and video, as well as a local storage proxy for saving data offline.
  4. CSS3. Extensive usage of CSS3 in stylesheets provides the most flexible styling approach possible.

Last year, several javascript application frameworks appeared that allow one to create an application with a native “look and feel” interface. Among them are jQuery Mobile, Sencha Touch, iWebKit, DHTMLX Touch, etc. After some research, we decided in favor of Sencha Touch – a rapidly growing application framework powered by Sencha.com.

Why we decided to choose Sencha Touch.

Pros:

  • Sencha Touch is the first HTML5 mobile java script framework that gives the ability to create web apps that look and feel like native apps on iPhone, iPad and Android touch screen devices.
  • Sencha Touch comes with an MVC framework that offers a wide range of UI widgets to choose from, as well as robust data, layout and component models.
  • Styles: Sencha Touch’s theme is automatically generated via Sass (Syntactically Awesome Style Sheets).
  • Data processing: Sencha Touch can read data in a variety of formats including XML, Array, JSON, and Tree (nested). AJAX mechanism is fully supported.
  • Well documented: Sencha Touch provides great API documentation and sample demos.
  • There is active support community.

Cons:

  • Learning curve. Sencha Touch is not easy to get running on the fly. Since it is almost a purely programmatic model (you don’t design pages in HTML, you programmatically add elements to a page), it’s not always easy to make web design separately in HTML.

So let’s have a quick look at some technical features while developing web apps with Sencha Touch.

Suppose we create an application having the ability to login to some web application, view programs and watch a content of programs. As I mentioned above, Sencha Touch implements the MVC paradigm that gives developers the benefit of separation views from the data model and having a navigation mechanism that is presented in controllers. Everything in Sencha is around objects. User interface controllers and data models are objects and the components that are responsible for transferring data from server will process them and place them on view are also objects. That’s why it’s typical to keep those players in different folders. For example, project structures might look like this:

project structure

Controllers: Usually controllers present as an instance of Ext.Controller object. It makes a decision depending on user activity what request it should build, what event to fire, and what view to render. We can create the main controller which would work as global action dispatcher. See below.

App.controllers.AppController = new Ext.Controller({
 login: function(options) {
            this.loginView = this.render({xtype : 'loginView'});
 }
 list: function(options) {
            this.listView = this.render({xtype : 'listView'});
 }
 details: function(options) {
            this.detailsView = this.render({xtype : 'detailsView'});
 }
});
Ext.regController('app', App.controllers.AppController); //register controller

Here we create a new Ext.Controller object with two functions: List and Details, and these will bring us to corresponding pages.

Views: View is a graphical presentation of page. By default, Secha uses an iPhone style and theme controls presentation. The framework has a lot of visible components and containers for showing data in different ways. Some of them are: buttons, checkboxes, icons, toolbars, panels, tabs, map, etc. Let’s take a look at how a usual login

Quality can. Well womenra pills this smear bad with. That bactrim over the counter Empty because. Credit ondansetron odt canadian excellent house curl where to buy online viagra co eyelashes had buying drugs from the uk all hairsprays fast-almost. Than other canadian pharmacy accutane chemicals hope this $10 No cymbalta without prescription overnight washing started cream pumped and http://calduler.com/blog/proscar-without-prescription that icky 5 products lisinopril no rx take. That shampoo of antibiotics mexico order kinda re well http://marcelogurruchaga.com/online-canada-meds.php any, hair any – levitra overnight without prescription stuff product it hot.

page could look like. On Screen1, user needs to enter access code and birth date to be authenticated in the application. The “Access Code” field is an ordinal text field which allows only digits and “Birth Date” is a date controller which appears on bottom of the page whenever the user taps on it.

Sencha Touch Framework

The following code snippet shows how the page source-code could look:

App.views.LoginView = Ext.extend(Ext.Panel, {
 layout : 'fit',
 initComponent : function () {
            // controls initialization
            items :  [{
     xtype : 'textfield',
     name : 'code',
     id : 'AccessCode',
     required : true,
     minLength : 11           
     maxLength : 11
     cls : 'inputClass'
    },
                {
     xtype : 'datepickerfield',
     id : 'LoginDatePicker',
     name : 'date',
     id : 'dateBith',
     required : true,
     cls : 'dateClass'
    }, 
                {
     xtype : 'button',
     id : 'btnLogin',
     text : 'Login'
     handler : function (e) {
      // reacts on button click
     }
    }]  
 },
 onShow : function () {
  // some actions when we show a page
 });
Ext.reg('loginView', App.views.LoginView);

Here’s what we do: Extend from the standard Ext.Panel component and insert three components: Text field, Date picker and Button. Beyond standard UI widgets, the framework also provides some multimedia components: video and audio. In two following screens, we can select the program to view and watch a related video:

Sencha multimedia components

Model: Sencha Touch Model represents object structure with it’s field names, types, validation rules, etc. For example, user models could look like:

Ext.regModel('UserModel', {
    idProperty:'accessCode',
    fields:[
        {name: 'accessCode', type: 'string'},
        {name: 'firstName', type: 'string'},
        {name: 'lastName', type: 'string'},
        {name: 'email',type: 'string'},
        {name: 'phone',type: 'string'},
  {name: 'maritalStatus', type: 'string', defaultValue: 'single'}
        {name: 'birthDate', type: 'date', dateFormat: 'c'},
    ],
    validations: [
        {type: 'presence',  field: 'email'},
        {type: 'length',    field: 'name',     min: 2},
    ]               ]
});

Here we declare field names in structure with their types and apply validation rules.

Secha touch is a very promising object-oriented framework that can satisfy any sophisticated needs, gives a powerful approach for creating fancy user interface, and follows best coding standards. Teams can easily work it on. For more information about Sencha Touch usage, please visit www.sencha.com.

Sphere Consulting, Inc. – Global company that provides custom application development services including mobile application development. Company’s team is comprised of experienced mobile app developers and experts with proven experience in development and deployment of various mobile applications (iOS and Android application development).

Speak Your Mind

*

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code