1.2. HTML5 Overview Homework

Sencha Touch
HTML5 and JavaScript Mobile

Web App Framework
Version 1.01
By Akshay Prabhu
akshay.prabhu@patni.com
Building Applications on mobile
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.
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 Touch
 Pre-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

Set up your Environment
 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.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
Creating the HTML file
 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>
Create the application JavaScript 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
}
});
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 : [ ]
});
}
});
Docked Items Example
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

Creating a Component
 xtype is a symbolic name given to a  With this approach we instantiated a

class. class, a object of the class is created .
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.
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
var viewport = new Ext.Panel({
fullscreen: true,  ToolBars are generally
dockedItems: [{
xtype: 'toolbar', docked to the top or
dock: 'top',
items: [ bottom of the page
{
xtype: 'textfield',  They consist of group
name : 'name',
placeHolder: 'Text', of buttons, titles,
},
{ searchfields and select
xtype: 'searchfield',
name : 'search', list.
placeHolder: 'Search'
},  The best practice is to
{
xtype: 'button', wrap the toolbar inside
ui:'confirm',
text:'Test' a panel as shown in the
}]
}] example.
});
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.
Example
xtype : ’toolbar’,
{
items:[
{
iconCls : "star"
},
{
iconCls : “home"
},
{
iconCls : “add"
}
]
}
Layouts
Layouts decide how the components would be placed on the Page.
Many Layouts are available in Sencha Touch:-
Fit:-Items occupy entire Hbox:-It tiles items Vbox:-It tiles items

space available horizontally vertically
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..
Container Properties
These can be used

within layout property
of any container
Layouts
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
var carousel2 = new  Carousels are very prominent
on the Smart Phones.
Ext.Carousel({
direction: 'vertical',  Panels act as containers for
the Carousels.
ui: 'light',
items: [  Some of the important features
of carousels are:-
{  Direction
title: 'Tab 1',  UI
html: ‘1’  Indicator
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});
Templates and XTemplates
 Templates are useful to
var planetinfo=new Ext.Template( render data in a
‘<table>’, customized way by
creating a HTML
‘<tr>’, Template.
‘<td>’,  With the help of
XTemplates we can also
'<h2>Name:{name}</h2>', create a for loop to run
through the array of
‘</td>’, items or an If loop to
place conditional
‘</tr>’, statements.
‘</table>>’  They are frequently used
with store class to render
)
some data in a
customized way.
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 Stores
Ext.regModel('Task',
{
For data-driven controls - such as fields: [
Lists and Trees, Sencha Touch {name: 'name', type: 'string'},
requires that you use their data model {name: 'description', type: 'string'}
abstraction. ]
})
To convert an array of objects(with the

prescribed fields) into an Ext data var dataStore = new Ext.data.Store({
store, we would have to:- model: 'Task', data: tasks })
To bind dataStore to a List control, we var listControl = new Ext.List({

would have to:- store: dataStore})
List component in Sencha Touch
 List components are of three varieties in Sencha Touch:-
Single List Disclosure List Grouped 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"},
Step 1
{firstn:"Prateek",lastn:"Koul"}
]
)};
Step 2 Step 3
listPanel = new Ext.List({ wrapperpanel=new Ext.Panel({
id: 'disclosurelist',
store: storex, id:'wrapperpan',
grouped:'true', items:listPanel,
}); });
Other useful Sencha Components
var datePicker = new
Ext.DatePicker({
useTitles: true,
});
var panel = new Ext.Panel({

fullscreen: true,
layout: {
type: 'vbox',
align: 'center', Date
pack: 'center'
}, Picker
items: [{
xtype: 'button',
ui: 'normal',
text: 'Show DatePicker',
handler: function() {
datePicker.show();
}
}]
});
Sencha Touch Pop-Ups
Alert Box Confirm Box
xtype:'button', xtype:'button',
xtype:'button',
text:'Test', text:'Test',
text:'Test',
handler:function(){ handler:function(){
handler:function(){
Ext.Msg.alert( ‘ Title ‘ , ’Hello’); Ext.Msg.confirm('
Ext.Msg.alert( ‘ Title ‘ , ’Hello’);
Confirmation','Are You Sure You
} Want To Quit?',Ext.emptyFn);
}
}
xtype:'button',
text:'Test',
handler:function(){
Ext.Msg.prompt('Welcome','Enter
First Name', Ext.emptyFn);
}
Prompt 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.or
g/Sencha-
Projects/demos/
 All these extended

libraries can be
downloaded from
GitHub.
Touch Grid Panel
Ext.regModel("TouchGridPanel", {  Before using the touch
fields: grid panel the Touch Grid
[ UX files should be added
"AppName", in the html file
"Description",
"Type",
 The code is an
"Download",
] example of how to use an
}); UX Sencha Component
store = new Ext.data.Store({

model: "TouchGridPanel",
data: [
{ AppName: "“, Description: "", Type: "", Download:"", updated: "" },
]
});
Touch Grid Panel(Continued)
var colModel = [{
header: "<span style='font-size:13px'>AppName</span>",
mapping: "AppName",
style: "text-align: center;"
}, { new Ext.ux.TouchGridPanel({
header: "<span style='font-size:13px'>Description</span>", store: store,
mapping: "Description", colModel: colModel,
}, {
header: "<span style='font-size:13px'>Type</span>", });
mapping: "Type",
}, {
header: "<span style='font-size:13px'>Download</span>",
mapping: "Download",
cls: "centered-cell",
}
];
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.
Sencha Touch Events
The Framework recognizes various tap events,

hence allowing for mapping functions to each
event.
Event Listeners
var EventPanel=new Ext.Panel({
});
EventPanel.addListener({
In the example,
body:{ touch events
swipe:
are added to
function(){Ext.Msg.alert( "Title" , "swiped");},
tap: the body or
function(){Ext.Msg.alert( "Title" , "Tapped");} element
} section if the
panel.
});
var viewport=new Ext.Panel({

fullscreen:true, The EventPanel is then added to
layout:"fit", another container panel,
items:[EventPanel] 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

panel.on('cardswitch', gradient should be ac\voided,
function(newCard, oldCard) { if  CSS3 properties should be used
(oldCawrd) { this.remove(oldCard,
true); } }, panel); instead to apply gradient effect.
Sencha Touch Community
Demos
http://dev.sencha.
com/deploy/touch/
examples/kitchens
ink/
http://touchsolitair
e.mobi/app/
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_World
 Sencha Touch Docs:-

http://dev.sencha.com/deploy/touch/docs/
 Video Tutorials:-
http://vimeo.com/channels/sencha

1.2. HTML5 Overview Homework

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1.2. HTML5 Overview Homework

Uploaded by

Copyright:

Available Formats

Sencha Touch

HTML5 and JavaScript Mobile

It is not possible to learn and

If one wants to use the

 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

 The library would be a zip file

 Also there is a CSS specifically

<link rel="stylesheet" href="css/sencha-touch.css" type="text/css" />

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

of inline images in the css itself.

 Panels are used as

 Panel is the default

In the figure we have a Panel with three

ToolBar docked at the bottom

 xtype is a symbolic name given to a  With this approach we instantiated a

Fit:-Items occupy entire Hbox:-It tiles items Vbox:-It tiles items

There are some other layouts also like:-

These can be used

These properties offer

 Various fields can be grouped

 TabPanel is a container well and automatically sets a top-docked or bottom-docked

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

• 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

To convert an array of objects(with the

To bind dataStore to a List control, we var listControl = new Ext.List({

Single List Disclosure List Grouped List

var storex=new Ext.data.Store({

var panel = new Ext.Panel({

 Some are displayed at

 All these extended

store = new Ext.data.Store({

 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

The Framework recognizes various tap events,

var viewport=new Ext.Panel({

 Not good for hardcore graphics and animations .

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

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.

 Remove unwanted components

from the DOM and unwanted

classes from CSS.

 Apply animations only to light DOM

elements like List and TabPanel

 Also, as shown in the figure deep

nesting of xtypes should be avoided

 Using background image as

 Sencha Touch Docs:-

You might also like