You are on page 1of 62

Sencha Touch

HTML5 and JavaScript MobiIe
Web App Framework
Version 1.01
By Akshay Prabhu
akshay.prabhu@patni.com
To buiId appIications on
different mobiIe pIatforms we
wouId require knowIedge of
objective c for ios, android sdk
for android pIatform or j2me.
It is not possibIe to Iearn and
master aII the Ianguages.
If one wants to use the
knowIedge of JavaScript, HTML
and CSS to deveIop mobiIe web
appIications which wouId run
on different pIatforms Iike ios
and android, Sencha Touch is
the soIution.
BuiIding AppIications on mobiIe
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: !L - eneral
!ublic License
Starting With Sencha Touch
Pre-Requisites
To start using Sencha Touch, aII we need is working knowIedge of the
JavaScript, HTML and CSS. As mentioned, the framework abstracts many
of the features and styIes you'd normaIIy be assembIing from scratch.
Using Sencha Touch: Main Steps
Set up your Environment
Create the HTML FiIe
Add the Sencha Library FiIes in the HTML FiIe
Create the AppIication JavaScript FiIe
ownload 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.js
SenchaTouch.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
n NetBeans or reamweaver start creating a HTML File.
n this HTML file, we would now link the necessary files from the Sencha Touch
library. <!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv÷"Content-Type" content÷"text/html; charset÷us-
ascii" />-->
<title>Overlay</title>
<link rel÷"stylesheet" href÷"css/sencha-touch.css" type÷"text/css" />
<script type÷"text/javascript" src÷"1S/sencha-touch.js"></script>
<script type÷"text/javascript" src÷"1S/myapp.js"></script>
</head>
</body>
</html>
Creating the HTML fiIe
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 appIication JavaScript FiIe:-
tabIetStartupScreen:- !roperty. Specifies the name of
the icon file to use as the application's start up screen on
tablet devices.
phoneStartupScreen :-!roperty. Specifies the name of
the icon file to use as the application's start up screen on
phone devices.
icon !roperty:-Specifies the name of the application's
default icon file, icon.png.
gIossOnIcon:-!roperty. Specifies whether you want the
gloss effect to be applied to the default icon. n this case,
the value is set to false indicating not to add gloss to the
default icon.
onReady Method:- Specifies the function to run when the
browser's ocument Object Model (OM) is ready after
the application HTML file has loaded.
BUILDING MOBILE USER INTERFACES WITH SENCHA
TOUCH
Sencha Touch consists many ready to use components Iike
Forms,Lists, Tab PaneI, Docked Bottom Bars and many more.
It aIso contains severaI ready to use icons which are stored in the form
of inIine images in the css itseIf.
There are severaI defauIt themes that can be used in the web
AppIication and even the CSS is highIy customizabIe
There are severaI extensions caIIed as UX which can be incIuded in
the Sencha Iibrary. For eg:-UX Touch Grid PaneI.
Sencha Touch Components
!anels
!anels are used as
containers in
Sencha Touch.
t can contain an
array of different
Sencha
components
!anel is the default
component type.
!anels can contain an array of tems and docked tems:-
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: true,
onReady: function() {
new Ext.PaneI ({
fuIIscreen : true ,
items : [ ] ,
dockedItems : [ ]
});
}
});
In the figure we have a PaneI with three
docked items:-
TooIBar docked at the Top
List PaneI docked at the Left
TooIBar docked at the bottom
ocked tems Example
Creating a Component
xtype is a symbolic name given to a
class.
f 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.
ith this approach we instantiated a
class, a object of the class is created .
Buttons in Sencha Touch
Sencha Touch provides wide variety of buiIt-in
button styIes.
We can modify the button styIes just my changing
the UI attribute as shown beIow.
ExampIe:
{
xtype:'button',
ui:confirm'
}
This wouId resuIt in a green button as shown in
image which prompts the user to take some
action,
Styling ith U Attribute
TY!E AN U LST
xtype Class
button Ext.Button
component
Ext.Component
container Ext.Container
panel Ext.!anel
toolbar Ext.Toolbar
spacer Ext.Spacer
tabpanel Ext.Tab!anel
xtype="button" UI List
ui: 'normaI'
ui: 'back'
ui: 'action'
ui: 'confirm'
ui: 'smaII'
ui: 'round'
ui: 'action-smaII'
ui: 'normaI'
Theming
UI List
Iight
transparent
dark
Sencha Touch Buttons, icons and docked Toolbars
ToolBars in Sencha Touch
TooIBars are generaIIy
docked to the top or
bottom of the page
They consist of group
of buttons, titIes,
searchfieIds and seIect
Iist.
The best practice is to
wrap the tooIbar inside
a paneI as shown in the
exampIe.
var viewport = new Ext.PaneI({
fuIIscreen: true,
dockedItems: [{
xtype: 'tooIbar',
dock: 'top',
items: [
{
xtype: 'textfieId',
name : 'name',
pIaceHoIder: 'Text',
},
{
xtype: 'searchfieId',
name : 'search',
pIaceHoIder: 'Search'
},
{
xtype: 'button',
ui:'confirm',
text:'Test'
}]
}]
});
cons in Sencha Touch
There are wide variety of
icons in Sencha Touch
These can be added just
by using the iconCIs
attribute as shown in the
exampIe beIow.
ExampIe
xtype : 'tooIbar',
{
items:[
{
iconCIs : "star"
},
{
iconCIs : "home"
},
{
iconCIs : "add"
}
]
}
Layouts
There are some other Iayouts aIso Iike:-
Auto:- t would fit only that much content needed to occupy the space
Card :- t can accommodate multiple components. t is generally used with tab panel..
Layouts decide how the components wouId be pIaced on the Page.
Many Layouts are avaiIabIe in Sencha Touch:-
Hbox:-It tiIes items
horizontaIIy
Vbox:-It tiIes items
verticaIIy
Fit:-Items occupy entire
space avaiIabIe
Container Properties
Layouts
These can be used
within Iayout property
of any container
These properties offer
more fIexibiIity to
controI arrangement of
chiId widgets on the
screen
Forms in Sencha Touch
Forms in Sencha Touch is a
nested Iist of xtypes and fieIdsets.
The FormPaneI is a container that
is typicaIIy used to dispIay any of
the input fieIds that Sencha Touch
provides and is automaticaIIy
scroIIabIe.
Various fieIds can be grouped
via the FieIdSet widget.
Forms provide many
components Iike:-
TextfieId
PasswordfieId
EmaiIfieId
UrIfieId
TextareafieId
ToggIefieId
SIiderfieId
SpinnerfieId
CheckboxfieId
SeIectfieId
Tab!anels in Sencha Touch
Tab!anel 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.
f we use the bottom tab Bars we automatically get the icons with the name of the tab
title.
Carousels in Sencha Touch
CarouseIs are very prominent
on the Smart Phones.
PaneIs act as containers for
the CarouseIs.
Some of the important features
of carouseIs are:-
Direction
UI
Indicator
var carouseI2 = new
Ext.CarouseI({
direction: 'verticaI',
ui: 'Iight',
items: [
{
titIe: 'Tab 1',
htmI: '1'
},
{
titIe: 'Tab 2',
htmI: '2'
},
{
titIe: 'Tab 3',
htmI: '3'
}]
});
Templates and Templates
TempIates are usefuI to
render data in a
customized way by
creating a HTML
TempIate.
With the heIp of
XTempIates we can aIso
create a for Ioop to run
through the array of
items or an If Ioop to
pIace conditionaI
statements.
They are frequentIy used
with store cIass to render
some data in a
customized way.
var pIanetinfo=new Ext.TempIate(
'<tabIe>',
'<tr>',
'<td>',
'<h2>Name:{name}</h2>',
'</td>',
'</tr>',
'</tabIe>>'
)
List of Formatting Functions with
TempIates
W eIIipsis(Iength): Useful for when you want to only show the first x characters and then
provide a more detailed view.
W undef: f the variable is undefined show "" instead of "undefined"
W htmIEncode: f the variable contains ampersands, less than, greater than symbols or
quotes HTML escape them.
W trim: f the variable contains extra whitespace, trim it.
W substr(start, Iength): Substring the variable.
W Iowercase: Transform the variable to all lowercase.
W uppercase: Transform the variable to all uppercase.
W capitaIize: Capitalize the first letter of the variable.
W usMoney: Format in US ollars. ie: $10.97
W date[(format)]: Transform the variable to a date format, if the format argument is omitted
uses the mask 'm/d/Y' .
ata Stores
Ext.regModeI('Task',
{
fieIds: [
{name: 'name', type: 'string'},
{name: 'description', type: 'string'}
]
})
var dataStore = new Ext.data.Store({
modeI: 'Task', data: tasks })
var IistControI = 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:-
SingIe List Grouped List
DiscIosure List
List!anel in Sencha Touch
Ext.regModeI('Contact',{
fieIds:['firstn','Iastn']
});
var storex=new Ext.data.Store({
modeI:'Contact' ,
data:[
{firstn:"Askhay",Iastn:"Prabhu"},
{firstn:"Ammeet",Iastn:"Iyer"},
{firstn:"Prateek",Iastn:"KouI"}
]
)};
IistPaneI = new Ext.List({
id: 'discIosureIist',
store: storex,
grouped:'true',
});
wrapperpaneI=new Ext.PaneI({
id:'wrapperpan',
items:IistPaneI,
});
Step 1
Step 2
Step 3
Other useful Sencha Components
var datePicker = new
Ext.DatePicker({
useTitIes: true,
});
var paneI = new Ext.PaneI({
fuIIscreen: true,
Iayout: {
type: 'vbox',
aIign: 'center',
pack: 'center'
},
items: [{
xtype: 'button',
ui: 'normaI',
text: 'Show DatePicker',
handIer: function() {
datePicker.show();
}
}]
});
Date
Picker
xtype:'button',
text:'Test',
handler:function(){
Ext.Msg.alert( ' Title ' , 'Hello');
}
xtype:'button',
text:'Test',
handIer:function(){
Ext.Msg.confirm('
Confirmation','Are You Sure You
Want To Quit?',Ext.emptyFn);
}
xtype:'button',
text:'Test',
handIer:function(){
Ext.Msg.prompt('WeIcome','Enter
First Name', Ext.emptyFn);
}
Sencha Touch !op-Ups
xtype:'button',
text:'Test',
handIer:function(){
Ext.Msg.aIert( ' TitIe ' , 'HeIIo');
}
AIert Box
Prompt Box
Confirm Box
Maps in Sencha Touch
Sencha Touch also provides the
Map class.
This class requires the oogle
Map A!, below is the example
to illustrate the same
new Ext.PaneI({
fuIIscreen:true,
items:[
{
xtype: 'map' ,
titIe: ' Maps '
}
]
});
Sencha Touch U Extensions
n 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.or
g/Sencha-
!rojects/demos/
All these extended
libraries can be
downloaded from
itHub.
Touch rid !anel
Ext.regModeI("TouchGridPaneI", {
fieIds:
[
"AppName",
"Description",
"Type",
"DownIoad",
]
});
store = new Ext.data.Store({
modeI: "TouchGridPaneI",
data: [
{ AppName: "", Description: "", Type: "", DownIoad:"", updated: "" },
{ AppName: "", Description: "", Type: "", DownIoad:"", updated: "" },
{ AppName: "", Description: "", Type: "", DownIoad:"", updated: "" },
{ AppName: "", Description: "", Type: "", DownIoad:"", updated: "" },
]
});
Before using the touch
grid paneI the Touch Grid
UX fiIes shouId be added
in the htmI fiIe
The code is an
exampIe of how to use an
UX Sencha Component
Touch rid !anel(Continued)
var coIModeI = [{
header: "<span styIe='font-size:13px'>AppName</span>",
mapping: "AppName",
styIe: "text-aIign: center;"
}, {
header: "<span styIe='font-size:13px'>Description</span>",
mapping: "Description",
styIe: "text-aIign: center;"
}, {
header: "<span styIe='font-size:13px'>Type</span>",
mapping: "Type",
styIe: "text-aIign: center;"
}, {
header: "<span styIe='font-size:13px'>DownIoad</span>",
mapping: "DownIoad",
cIs: "centered-ceII",
}
];
new Ext.ux.TouchGridPaneI({
store: store,
coIModeI: coIModeI,
});
Animations
Sencha Touch provides many animation schemes Iike:-
SIide
Pop
Fade
Cube
FIip
This animations are generaIIy used when switching between TabPaneIs
or discIosure of List items.
These animations can aIso be added when opening up a new page or
paneI.
The Framework recognizes various tap events,
hence aIIowing for mapping functions to each
event.
Sencha Touch Events
Event Listeners
var EventPaneI=new Ext.PaneI({
});
EventPaneI.addListener({
body:{
swipe:
function(){Ext.Msg.aIert( "TitIe" , "swiped");},
tap:
function(){Ext.Msg.aIert( "TitIe" , "Tapped");}
}
});
var viewport=new Ext.PaneI({
fuIIscreen:true,
Iayout:"fit",
items:[EventPaneI]
});
In the exampIe,
touch events
are added to
the body or
eIement
section if the
paneI.
The EventPaneI is then added to
another container paneI,
which wouId then render it.
ifference between !anel and !anel Body or Element
1he framework's provlde manv readv Lo use Lhemes
LhaL make Lhe Web App look naLlve
Limitations of Sencha Touch
Sencha touch API doesn't have the foIIowing capabiIty:
Access to camera
Access to contacts
Access to acceIerometer
Not good for hardcore graphics and animations .
If we need to deveIop a graphics heavy game one shouId stick with
native appIications.
As we can see, you might have to drop out of the API
to find soIutions to one of these probIems. Another approach is to buiId
a hybrid app with phonegap.
Sencha Touch optimization
Remove unwanted components
from the DOM and unwanted
cIasses from CSS.
AppIy animations onIy to Iight DOM
eIements Iike List and TabPaneI
Components.
AIso, as shown in the figure deep
nesting of xtypes shouId be avoided
as far as possibIe
Using background image as
gradient shouId be ac\voided,
CSS3 properties shouId be used
instead to appIy gradient effect.
paneI.on('cardswitch',
function(newCard, oIdCard) { if
(oIdCawrd) {
this.remove(oIdCard, true); ] ],
paneI);
Sencha Touch Community
emos
http://dev.sencha.
com/deploy/touch/
examples/kitchens
ink/
http://touchsolitair
e.mobi/app/
http://dev.sencha.
Learning Resources For Sencha
http://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_orld
Sencha Touch Docs:-
http://dev.sencha.com/deploy/touch/docs/
Video TutoriaIs:-
http://vimeo.com/channels/sencha