An Introduction to Sencha

Touch 2.0

www.folio3.com @folio_3

www.folio3.com www.folio3.com

Agenda

Folio3 – Company Overview

What is Sencha Touch?

How it differs from other HTML5 Mobile Application Frameworks

What it looks like (Quick Demo)

Anatomy of an Application

Getting started with Sencha Touch

Sencha Touch SDK & Sencha Touch SDK-Tools

Concepts

Case Study – SixthSense

Next Steps

Folio3 – An Overview

www.folio3.com @folio_3

Folio3 At a Glance

200 Employees across the U.S., Eastern Europe, South Asia Experienced Leadership

Ali Rashid - VP Engineering (Schlumberger, Cable & Wireless

Compaq, 360training, Tradekey; BS Computer Science)

Umair Khan - Chairman (SecretBuilders, Intel, Clickmarks,

The Entrepreneurs Fund; BS and MS MIT)

Adnan Lawai - CEO (Silicon Graphics, Motorola, Clickmarks;

BS and MS MIT)

Folio3 At a Glance

Founded in 2005

Over 200 full time employees

Offices in the US, Canada, Bulgaria & Pakistan

Palo Alto, CA. Sofia, Bulgaria

Karachi, Pakistan

Toronto, Canada

What We Do

We are a Development Partner for our customers

Design software solutions, not just implement them

Focus on the solution – Platform and technology agnostic

Expertise in building applications that are:

Mobile Social Cloud-based Gamified

What We Do

Areas of Focus Enterprise

Custom enterprise applications

Product development targeting the enterprise

Mobile Custom mobile apps for iOS, Android, Windows Phone, BB OS

Mobile platform (server-to-server) development

Social Media CMS based websites for consumers and enterprise (corporate, consumer,

community & social networking)

Social media platform development (enterprise & consumer)

Gaming Social & casual cross platform games (mobile, web, console)

Virtual Worlds

Areas of Focus: Enterprise

Automating workflows

Cloud based solutions

Application integration

Platform development

Healthcare

Mobile Enterprise

Digital Media

Supply Chain

Areas of Focus: Mobile

Serious enterprise applications

for Banks, Businesses

Fun consumer apps for app

discovery, interaction, exercise

gamification and play

Educational apps

Augmented Reality apps

Mobile Platforms

Areas of Focus: Web & Social Media

Community Sites based on

Content Management

Systems

Enterprise Social

Networking

Social Games for Facebook

& Mobile

Companion Apps for games

What is Sencha Touch

www.folio3.com @folio_3

What is Sencha Touch?

Sencha Touch, a high-performance HTML5 mobile application

framework, is the cornerstone of the Sencha HTML5 platform.

Built for enabling world-class user experiences.

Sencha Touch is the framework that enables developers to build

fast and impressive apps that work on iOS, Android, BlackBerry,

Kindle Fire and more.

Business Ready Apps for every platform!

How It Differs from other HTML5 Mobile App Frameworks

jQuery Mobile vs Sencha Touch

Sencha Touch jQuery Mobile

Javascript centric Markup centric

UI Widgets, DOM Manipulation, Server-side abstraction, MVC

UI-Only Library

Takes time to learn Easier to learn

Supports less browsers Supports more devices then ST

Imposes a coding structure and discipline

It does not impose a coding discipline or structure, which gives you flexibility

Flexible but at times need to hack things

Flexible

What It Looks Like

www.folio3.com @folio_3

Anatomy of an Application

Models: represent a type of object in your app - for example an e-commerce app might have models for Users, Products and Orders

Views: are responsible for displaying data to your users and leverage the built in Components in Sencha Touch

Controllers: handle interaction with your application, listening for user taps and swipes and taking action accordingly

Stores: are responsible for loading data into your app and power Components like Lists and DataViews

Profiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible

Getting Started With Sencha Touch

Sencha Touch SDK http://www.sencha.com/products/touch/download/

&

Sencha Touch SDK-Tools http://www.sencha.com/products/sdk-tools/download

Generate Code – Directory Structure

Inside the app

Generated Code – app.js

Ext.application({

name: 'F3AGSession',

views: ['Main'],

launch: function() {

// Initialize the main view

Ext.Viewport.add(Ext.create('F3AGSession.view.Main'));

}

});

Note: Refer files on file system for more details

Concepts

The Class System

Components

Containers

Layouts

Sencha Class System

Definition

Ext.define('Animal', {

config: {

name: null

},

constructor: function(config) {

this.initConfig(config);

},

speak: function() {

alert('grunt');

}

});

Instantiate

var bob = Ext.create('Animal', {

name: 'Bob'

});

bob.speak(); // alerts ‘grunt’

Sencha Class System – Inheritance

Definition

Ext.define('Human', {

extend: 'Animal',

speak: function() {

alert(this.getName());

}

});

Instantiate

var bob = Ext.create('Human', {

name: 'Bob'

});

bob.speak(); //alerts 'Bob'

Sencha Class System – Configuration

Notice getName, where did that come from ?

Automatically generates getters & setters

For example: When name is defined in class config

setName : Setter

getName : Getter

applyName : Setter calls this before actually setting the value.

updateName : Called when Setter updates the value

Sencha Class System – Static Members Ext.define('Computer', {

statics: {

instanceCount: 0,

factory: function(brand) {

// 'this' in static methods refer to the class itself

return new this({brand: brand});

}

},

config: {

brand: null

},

constructor: function(config) {

this.initConfig(config);

// the 'self' property of an instance refers to its class

this.self.instanceCount ++;

}

});

var dellComputer = Computer.factory('Dell');

var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

alert(Computer.instanceCount); // Alerts "2"

Concepts

The Class System

Components

Containers

Layouts

What is a Component?

Visual Classes

Every Component in Sencha Touch is a subclass of

Ext.Component

What is a Container?

Sub-class of Component

Can contain child components

Can specify Layouts

Adding Components to Containers //this is the Panel we'll be adding below

var aboutPanel = Ext.create('Ext.Panel', {

html: 'About this app'

});

//this is the Panel we'll be adding to

var mainPanel = Ext.create('Ext.Panel', {

fullscreen: true,

layout: 'hbox',

defaults: {

flex: 1

},

items: {

html: 'First Panel',

style: 'background-color: #5E99CC;'

}

});

//now we add the first panel inside the second

mainPanel.add(aboutPanel);

Components - Navigation components

Ext.Toolbar

Ext.Button

Ext.TitleBar

Ext.SegmentedButton

Ext.Title

Ext.Spacer

Components - Store-bound components

Ext.dataview.DataView

Ext.Carousel

Ext.List

Ext.NestedList

Components - Form components

Ext.form.Panel

Ext.form.FieldSet

Ext.field.Checkbox

Ext.field.Hidden

Ext.field.Slider

Ext.field.Text

Ext.picker.Picker

Ext.picker.Date

Components - General components

Ext.Panel

Ext.tab.Panel

Ext.Viewport

Ext.Img

Ext.Map

Ext.Audio

Ext.Video

Ext.Sheet

Ext.ActionSheet

Ext.MessageBox

Concepts

The Class System

Components

Containers

Layouts

Layouts - HBox

Ext.create('Ext.Container', {

fullscreen: true,

layout: 'hbox',

items: [

{

xtype: 'panel',

html: 'message list',

flex: 1

},

{

xtype: 'panel',

html: 'message preview',

flex: 2

}

]

});

Layouts - VBox

Ext.create('Ext.Container', {

fullscreen: true,

layout: 'vbox',

items: [

{

xtype: 'panel',

html: 'message list',

flex: 1

},

{

xtype: 'panel',

html: 'message preview',

flex: 2

}

]

});

Layouts – Card Layout

var panel = Ext.create('Ext.Panel', {

layout: 'card',

items: [

{

html: "First Item"

},

{

html: "Second Item"

},

{

html: "Third Item"

},

{

html: "Fourth Item"

}

]

});

panel.setActiveItem(1);

Layouts – Fit Layout

var panel = Ext.create('Ext.Panel', {

width: 200,

height: 200,

layout: 'fit',

items: {

xtype: 'panel',

html: 'Also 200px by 200px'

}

});

Ext.Viewport.add(panel);

MVC

Model extends Ext.data.Model

View extends Ext.Component

Controller extends Ext.app.Controller

MVC - Models

Ext.define('User', {

extend: 'Ext.data.Model',

config: {

fields: [

{ name: 'id', type: 'int' },

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

]

}

});

MVC - Controller Ext.define('MyApp.controller.Main', {

extend: 'Ext.app.Controller',

config: {

control: {

loginButton: {

tap: 'doLogin'

},

'button[action=logout]': {

tap: 'doLogout'

}

},

refs: {

loginButton: 'button[action=login]'

}

},

doLogin: function() {

// called whenever the Login button is tapped

},

doLogout: function() {

// called whenever any Button with action=logout is tapped

}

});

Case Study - SixthSense

www.folio3.com @folio_3

SixthSense

Sencha based iPad app built for Merck

Pharmaceutical's national sales force in

Japan

Enables Merck’s sales personnel to

manage their daily schedules for visiting

doctors & conducting sales meetings. Key

features include:

Offline support – Enables sales personnel to

schedule meetings even in areas with low or no

network connectivity

Active Sync – Ensures all offline content is

synced with the server, when network

connectivity is established

Developed using Sencha, HTML5 and SQLite.

Next Steps

www.folio3.com @folio_3

Next Steps

http://docs.sencha.com/touch/2-0/

http://miamicoder.com/2012/how-to-create-a-sencha-

touch-2-app-part-1/ (5 Part Series)

References

http://www.sencha.com

http://docs.sencha.com/touch/2-0/

http://miamicoder.com/2012/how-to-create-a-sencha-

touch-2-app-part-1 (5 Part Series)

Contact

For more details about our cross platform, mobile app

development services, please get in touch with us.

contact@folio3.com

US Office: (408) 365-4638

www.folio3.com