Scribd
Upload
6K views

Sencha Touch: Html5 and Javascript Mobile Web App Framework

This document provides an introduction to Sencha Touch, an HTML5 and JavaScript framework for building mobile web applications. Sencha Touch allows developers to use their knowledge of HTML, CSS, and JavaScript to build apps that run on multiple platforms like iOS and Android. It discusses how to set up the Sencha Touch library, create basic app files and structure, and build user interfaces with various Sencha Touch components like panels, forms, tab panels, and carousels.

Uploaded by

Ankit Garg
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
6K views

Sencha Touch: Html5 and Javascript Mobile Web App Framework

This document provides an introduction to Sencha Touch, an HTML5 and JavaScript framework for building mobile web applications. Sencha Touch allows developers to use their knowledge of HTML, CSS, and JavaScript to build apps that run on multiple platforms like iOS and Android. It discusses how to set up the Sencha Touch library, create basic app files and structure, and build user interfaces with various Sencha Touch components like panels, forms, tab panels, and carousels.

Uploaded by

Ankit Garg
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 59

Sencha Touch

HTML5 and JavaScript Mobile


Web App Framework
Version 1.01

By Akshay Prabhu
[email protected]
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

<!DOCTYPE
library . 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="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.org/Sen
cha
-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: "" },
{ AppName: "“, Description: "", Type: "", Download:"", updated: "" },
{ AppName: "“, Description: "", Type: "", Download:"", updated: "" },
{ 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,
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",
}

];
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: function()
are added to
{Ext.Msg.alert( "Title" , "swiped");},
tap: function() the body or
{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',
function(newCard, oldCard) { if gradient should be ac\voided,
(oldCawrd)  CSS3 properties should be used
{ this.remove(oldCard, true); } }, instead to apply gradient effect.
panel);
Sencha Touch Community
Demos
http://dev.sencha.com/de

ploy/touch/examples/kitch

ensink/

http://touchsolitaire.mobi/

app/

http://dev.sencha.com/de

ploy/touch/examples/kiva/
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

You might also like