sencha touch

Sencha TouchHTML5 and JavaScript Mobile

Web App Framework

Version 1.01

By Akshay Prabhu [email protected]

To build applications on different mobile platforms we would require knowledge of objective c for ios, android sdk for android platform or j2me.

It is not possible to learn and master all the languages.

If one wants to use the knowledge of JavaScript, HTML and CSS to develop mobile web applications which would run on different platforms like ios and android, Sencha Touch is the solution.

Building Applications on mobile

INTRODUCTION TO SENCHA TOUCH

Sencha Touch was developed on top of the Ext JS framework and is the first mobile HTML5 JavaScript framework.

Sencha Touch was developed with the intention of developing Web Applications that to a large extent mimic native mobile applications.

Sencha Touch helps building web applications resemble native applications by using clever blend of HTML5,CSS3 and JavaScript.

At this point in time it supports ios and android devices.

License: GPL - General Public License

Starting With Sencha TouchPre-Requisites

To start using Sencha Touch, all we need is working knowledge of the

JavaScript, HTML and CSS. As mentioned, the framework abstracts many

of the features and styles you'd normally be assembling from scratch.

Using Sencha Touch: Main Steps

Set up your Environment

Create the HTML File

Add the Sencha Library Files in the HTML File

Create the Application JavaScript File

Download the Sencha Touch Library from the following URL:-

http://www.sencha.com/products/touch/

The library would be a zip file which would contain two important files:-

Sencha Touch.jsSenchaTouch.css

Also there is a CSS specifically written for Android called android.css and a CSS file written specifically for ios called apple.css

Set up your Environment




In NetBeans or Dreamweaver start creating a HTML File.

In this HTML file, we would now link the necessary files from the Sencha Touch

library.<!DOCTYPE html><html><head>  <title>Overlay</title>

<link rel="stylesheet" href="css/sencha-touch.css" type="text/css" /> <script type="text/javascript" src="JS/sencha-touch.js"></script> <script type="text/javascript" src="JS/myapp.js"></script>

</head></body></html>

Creating the HTML file

myapp.js the file where the actual code of the application would reside.

Ext.setup({ tabletStartupScreen:'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: true, onReady: function() { // write your Sencha Code here }});

Create the application JavaScript File:-

BUILDING MOBILE USER INTERFACES WITH SENCHA TOUCH

Sencha Touch consists many ready to use components like

Forms,Lists, Tab Panel, Docked Bottom Bars and many more.

It also contains several ready to use icons which are stored in the form

of inline images in the css itself.

There are several default themes that can be used in the web Application and even the CSS is highly customizable

There are several extensions called as UX which can be included in the Sencha library. For eg:-UX Touch Grid Panel.

Sencha Touch Components

Panels

Panels are used as containers in Sencha Touch.

It can contain an array of different Sencha components

Panel is the default component type.

Panels can contain an array of Items and docked Items:-

Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: true, onReady: function() {

new Ext.Panel ({ fullscreen : true , items : [ ] , dockedItems : [ ]

}); }});

In the figure we have a Panel with three docked items:-

ToolBar docked at the Top

List Panel docked at the Left

ToolBar docked at the bottom

Docked Items Example

Creating a Component

xtype is a symbolic name given to a class.

If you have xtype, the only thing that sits in the memory is a simple

configuration object, that is not that expensive as a complex instantiated

class.

With this approach we instantiated a class, a object of the class is created .

Buttons in Sencha Touch Sencha Touch provides wide variety of built-in

button styles.

We can modify the button styles just my changing

the UI attribute as shown below.

Example:

{

xtype:’button’,

ui:’confirm’

}

This would result in a green button as shown in

image which prompts the user to take some

action,

Styling With UI Attribute

Sencha Touch Buttons, icons and docked Toolbars

ToolBars in Sencha Touch

ToolBars are generally

docked to the top or

bottom of the page

They consist of group

of buttons, titles,

searchfields and select

list.

The best practice is to

wrap the toolbar inside

a panel as shown in the

example.

var viewport = new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [

{ xtype: 'textfield', name : 'name', placeHolder: 'Text',

}, {

xtype: 'searchfield', name : 'search', placeHolder: 'Search' }, { xtype: 'button', ui:'confirm',

text:'Test' }] }] });

Icons in Sencha Touch There are wide variety of

icons in Sencha Touch

These can be added just by using the iconCls attribute as shown in the example below.

Examplextype : ’toolbar’,

{items:[{iconCls : "star" },{iconCls : “home" },{iconCls : “add" }

]}

Layouts

There are some other layouts also like:-

Auto:- It would fit only that much content needed to occupy the space

Card :- It can accommodate multiple components. It is generally used with tab panel..

Layouts decide how the components would be placed on the Page. Many Layouts are available in Sencha Touch:-

Hbox:-It tiles items horizontally

Vbox:-It tiles itemsvertically

Fit:-Items occupy entire space available

Container Properties

Layouts

These can be used within layout property of any container

These properties offer more flexibility to control arrangement of child widgets on the screen

Forms in Sencha Touch Forms in Sencha Touch is a

nested list of xtypes and fieldsets.

The FormPanel is a container that is typically used to display any of the input fields that Sencha Touch provides and is automatically scrollable.

Various fields can be grouped via the FieldSet widget.

Forms provide many components like:-

Textfield Passwordfield Emailfield Urlfield Textareafield Togglefield Sliderfield Spinnerfield Checkboxfield Selectfield

TabPanels in Sencha Touch

TabPanel is a container well and automatically sets a top-docked or bottom-docked toolbar for you with automatically generated buttons for every child item. Tapping any of the buttons allows you to “flip” through each of the tab items.

Sencha adds various animations directly when we click on the toolbar buttons. If we use the bottom tab Bars we automatically get the icons with the name of the tab

title.

Carousels in Sencha Touch Carousels are very prominent

on the Smart Phones.

Panels act as containers for the Carousels.

Some of the important features of carousels are:- Direction UI Indicator

var carousel2 = new Ext.Carousel({ direction: 'vertical', ui: 'light', items: [ { title: 'Tab 1', html: ‘1’ }, { title: 'Tab 2', html: '2' }, { title: 'Tab 3', html: '3' }] });

Templates and XTemplates

Templates are useful to render data in a customized way by creating a HTML Template.

With the help of XTemplates we can also create a for loop to run through the array of items or an If loop to place conditional statements.

They are frequently used with store class to render some data in a customized way.

var planetinfo=new Ext.Template(‘<table>’,

‘<tr>’,

‘<td>’,

'<h2>Name:{name}</h2>',

‘</td>’,

‘</tr>’,

‘</table>>’

)

List of Formatting Functions with Templates

• ellipsis(length): Useful for when you want to only show the first x characters and then provide a more detailed view.

• undef: If the variable is undefined show "" instead of "undefined"

• htmlEncode: If the variable contains ampersands, less than, greater than symbols or quotes HTML escape them.

• trim: If the variable contains extra whitespace, trim it.

• substr(start, length): Substring the variable.

• lowercase: Transform the variable to all lowercase.

• uppercase: Transform the variable to all uppercase.

• capitalize: Capitalize the first letter of the variable. • usMoney: Format in US Dollars. ie: $10.97

• date[(format)]: Transform the variable to a date format, if the format argument is omitted uses the mask 'm/d/Y' .

Data StoresExt.regModel('Task',

{ fields: [

{name: 'name', type: 'string'}, {name: 'description', type: 'string'}

] })

var dataStore = new Ext.data.Store({ model: 'Task', data: tasks })

var listControl = new Ext.List({ store: dataStore})

For data-driven controls - such as Lists and Trees, Sencha Touch

requires that you use their data model abstraction.

To convert an array of objects(with the prescribed fields) into an Ext data

store, we would have to:-

To bind dataStore to a List control, we would have to:-

List component in Sencha Touch

List components are of three varieties in Sencha Touch:-

Single List Grouped ListDisclosure List

ListPanel in Sencha Touch

Ext.regModel('Contact',{ fields:['firstn','lastn']

});

var storex=new Ext.data.Store({model:'Contact' ,data:[

{firstn:"Askhay",lastn:"Prabhu"}, {firstn:"Ammeet",lastn:"Iyer"}, {firstn:"Prateek",lastn:"Koul"}

])};

listPanel = new Ext.List({ id: 'disclosurelist', store: storex, grouped:'true',

});

wrapperpanel=new Ext.Panel({

id:'wrapperpan',items:listPanel,

});

Step 1

Step 2 Step 3

Other useful Sencha Components

var datePicker = new Ext.DatePicker({ useTitles: true,

}); var panel = new Ext.Panel({ fullscreen: true, layout: { type: 'vbox', align: 'center', pack: 'center' }, items: [{ xtype: 'button', ui: 'normal', text: 'Show DatePicker', handler: function() { datePicker.show(); } }] });

Date Picker

xtype:'button',text:'Test',handler:function(){

Ext.Msg.alert( ‘ Title ‘ , ’Hello’);

}


Ext.Msg.confirm('Confirmation','Are You Sure You Want To Quit?',Ext.emptyFn); }


Ext.Msg.prompt('Welcome','Enter First Name', Ext.emptyFn);

}

Sencha Touch Pop-Ups


Ext.Msg.alert( ‘ Title ‘ , ’Hello’);

}

Alert Box

Prompt Box

Confirm Box

Maps in Sencha Touch

Sencha Touch also provides the Map class.

This class requires the Google Map API, below is the example to illustrate the same

new Ext.Panel({

fullscreen:true,

items:[{

xtype: ’map’ , title: ’ Maps ’

}]

});

Sencha Touch UX Extensions In addition to the

existing Sencha Components, there are many extensions available to the existing library.

Some are displayed at the following URL:-http://www.simoens.org/Sencha-Projects/demos/

All these extended libraries can be downloaded from GitHub.

http://www.simoens.org/Sencha-Projects/demos/




Touch Grid Panel

Ext.regModel("TouchGridPanel", {fields:

[ "AppName",

"Description", "Type",

"Download", ]

});

store = new Ext.data.Store({model: "TouchGridPanel",

data: [ { AppName: "“, Description: "", Type: "", Download:"", updated: "" }, { AppName: "“, Description: "", Type: "", Download:"", updated: "" }, { AppName: "“, Description: "", Type: "", Download:"", updated: "" }, { AppName: "“, Description: "", Type: "", Download:"", updated: "" },

]

});

Before using the touch grid panel the Touch Grid UX files should be added in the html file

The code is an example of how to use an UX Sencha Component

Touch Grid Panel(Continued)

var colModel = [{ header: "<span style='font-size:13px'>AppName</span>",

mapping: "AppName", style: "text-align: center;"

}, { header: "<span style='font-size:13px'>Description</span>",

mapping: "Description", style: "text-align: center;"

}, { header: "<span style='font-size:13px'>Type</span>",

mapping: "Type", style: "text-align: center;"

}, { header: "<span style='font-size:13px'>Download</span>",

mapping: "Download", cls: "centered-cell",

}

];

new Ext.ux.TouchGridPanel({ store: store,

colModel: colModel,

});

Animations Sencha Touch provides many animation schemes like:-

Slide

Pop

Fade

Cube

Flip

This animations are generally used when switching between TabPanels

or disclosure of List items.

These animations can also be added when opening up a new page or

panel.

The Framework recognizes various tap events, hence allowing for mapping functions to each event.

Sencha Touch Events

Event Listenersvar EventPanel=new Ext.Panel({

});

EventPanel.addListener({

body:{swipe: function()

{Ext.Msg.alert( "Title" , "swiped");},tap: function()

{Ext.Msg.alert( "Title" , "Tapped");}}

});

var viewport=new Ext.Panel({ fullscreen:true,

layout:"fit",items:[EventPanel]

});

In the example, touch events are added to the body or element section if the panel.

The EventPanel is then added to another container panel,which would then render it.

Difference between Panel and Panel Body or Element

The framework’s provide many ready to use themes that make the Web App look native

Limitations of Sencha Touch

Sencha touch API doesn't have the following capabilty:

Access to camera

Access to contacts

Access to accelerometer

Not good for hardcore graphics and animations .

If we need to develop a graphics heavy game one should stick with

native applications.

As we can see, you might have to drop out of the API to find

solutions to one of these problems. Another approach is to build a

hybrid app with phonegap.

Sencha Touch optimization

Remove unwanted components

from the DOM and unwanted

classes from CSS.

Apply animations only to light DOM

elements like List and TabPanel

Components.

Also, as shown in the figure deep

nesting of xtypes should be avoided

as far as possible

Using background image as

gradient should be ac\voided,

CSS3 properties should be used

instead to apply gradient effect.

panel.on('cardswitch', function(newCard, oldCard) { if (oldCawrd) { this.remove(oldCard, true); } }, panel);

Sencha Touch Community Demos

http://dev.sencha.com/

deploy/touch/examples/

kitchensink/

http://touchsolitaire.mobi/

app/

http://dev.sencha.com/

deploy/touch/examples/

kiva/

Learning Resources For Senchahttp://dev.sencha.com/deploy/touch/examples/kitchensink/

http://www.sencha.com/learn/Sencha_Touch

http://miamicoder.com/2010/creating-sencha-touch-toolbar-buttons/

http://www.sencha.com/learn/Tutorial:Sencha_Touch_Hello_World

Sencha Touch Docs:-

http://dev.sencha.com/deploy/touch/docs/

Video Tutorials:-

http://vimeo.com/channels/sencha

sencha touch

Documents