Sencha touch

Sencha TouchHTML5 and JavaScript Mobile

Web App Framework

Version 1.01

To build applications on different 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, unless there is a third party native framework to bridge the gap between all the different platforms.

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.

Sencha Touch brings the native application feel by means of a clever blend of HTML5, CSS3 and JavaScript, all optimized for the best mobile experience.

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.

License: GPL - GNU General Public License GPL - GNU General Public License

Starting With Sencha Touch

Pre-Requisites

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

JavaScript language, 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:-

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:-

tabletStartupScreen:- Property. Specifies the name of the icon file to use as the application's start up screen on tablet devices.

phoneStartupScreen :-Property. Specifies the name of the icon file to use as the application's start up screen on phone devices.

icon Property:-Specifies the name of the application's default icon file, icon.png.

glossOnIcon:-Property. Specifies whether you want the gloss effect to be applied to the default icon. In 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 Document Object Model (DOM) is ready after the application HTML file has loaded.

BUILDING MOBILE USER INTERFACES WITH SENCHA TOUCH

Sencha Touch consists many ready to use components like

Grid, 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.

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

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.

Explain the hierarchy as to how tab is also tabPanel

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 .

Styling With UI Attribute

Sencha Touch Buttons and icons and docked Toolbars

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

In the next slide I have mentioned List of UI

available for buttons and general theming.

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:-

TextfieldPasswordfieldEmailfieldUrlfieldTextareafieldTogglefieldSliderfieldSpinnerfieldCheckboxfieldSelectfield

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' .

List component in Sencha Touch

List components are of three varieties in Sencha

Touch:-Single List Grouped ListDisclosure List

Data Stores

Ext.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:-

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.





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

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

Transcript of Sencha touch