sencha touch - introduction

SENCHA TOUCHDRUYTS TOM

WHY MOBILE WEB APPS

SENCHA TOUCH

A framework to build HTML 5 mobile applications for iOS, Android and Blackberry

ARCHITECTURE

Class System

Event System

Data package

Widgets & Layouts

…

THE CLASS SYSTEM

Prototype-based

Class-based

Flexibility

Predictability

Programmer Familiarity

THE CLASS SYSTEM

Sencha class system =

Flexibility

Predictability

Programmer Familiarity

CLASS DEFINITIONExt.define(‘My.Sample.Person’, {

constructor: function(name) {

this.name = name

},

walk: function(steps) {

alert(this.name + ‘is walking’ + steps + ‘steps’);

}

});

HOW TO CREATE AN OBJECTvar person = new My.sample.Person(‘Tom’);

person.walk();

INHERITENCEExt.define(‘My.sample.Person’, {


this.name = name;

},

walk: function(steps) {

alert(this.name + ‘ is walking ‘ + steps + ‘ steps’);

}

});

Ext.define(‘My.sample.Developer’, {

extend: ‘My.sample.Person’,

code: function(language) {

alert(this.name + ‘ is coding in ‘ + language);

}

});

INHERITENCEvar tom = new My.sample.Developer(‘tom’);

tom.walk(5);

tom.code(‘Javascript’);

MIXINS

Used to generate multiple inheritance

DEPENDENCY MANAGEMENT<html>

<script src=‘sencha-touch-debug.js’></script>

</html>

DEPENDENCY MANAGEMENT

What if we got 50 classes ?

The order of the script tags is important

Becomes a nightmare to manage !

DEPENDENCY MANAGEMENT

Only include the sencha-touch-debug.js file

Use Ext.create to create new objects

• Will automatically load the class if it isn’t loaded yet

• No need to write the imports yourself anymore



var tom = Ext.create(‘My.sample.Developer’, {name: ‘Tom’});

</script>

</html>

CONFIGExt.define(‘My.Sample.Person’, {

name: ‘’,


this.name = name

},

getName: function() {

return name;

},

setName: function(newName) {

this.name = newName;

},

});

CONFIG

If we got a lot of properties, you need to write a lot of getters and setters

Nobody likes writing getters and setters, it is just boring

Put them in a config object, and get the setters and getters for free

CONFIGExt.define(‘My.sample.Person’, {

config: {

name: ‘Unkown’

},

constructor: function(config) {

this.initConfig(config);

}

});

CONFIGvar person = Ext.create(‘My.sample.Person’, {name: ‘Tom’, age: 25});

person.getName() //Tom

person.getAge() //25

CONFIG

Great those auto generated setters

But what about validation ?

What if I want to do more then just assigning the value to the field ?

CONFIG: SETTER PROCESS

Before Set After

ValidationFilteringTransformation

Actual assignment NotificationUpdating dependencies

CONFIG: SETTER PROCESS

setFoo()

processedValue = applyFoo(newValue, oldValue)Before

Set This.foo = processedValue

Update updateFoo(processedValue, oldValue)

Ext.define(‘My.sample.Person’, {

config: {

name: ‘Unkown’

},

constructor: function(config) {

this.initConfig(config);

},

applyName: function(newValue, oldValue) {

return ‘De heer’ + newValue;

},

updateName: function(newValue, oldValue) {

alert(‘Value changed to:’ + name);

}

});

CLASS SYSTEM

Basic understanding of the Class system

Powerful system built in the framework to make the life of developers much easier

Now we can stop the boring stuff and start writing applications

What are we going to build ?

TYPICAL APPLICATION ARCHITECTURE

TYPICAL APPLICATION STRUCTURE

Which translates to the following directory structure:

INDEX.HTML

Include the correct build

Include the CSS file from sencha

Include the app.js file

Leave the body tags empty

APP.JS

Defines the entry point of the application

The launch function will automatically be called when the framework is loaded

Within the launch function, create your first view and add it to the viewport

VIEWS

Views are what the user interacts with directly

Sencha Touch comes with a wide range of predefined views that you can use

• Panels, Containers• Buttons• Lists• Textfields, checkboxes, toggle fields• …

Must be created in the view subfolder

CONTROLLERS

Controllers are responsible for responding to events that occur within your app

They are automatically created when the application is launched

Makes use of the powerful twin configuration:

• Refs

• Controls

CONTROLLERS: REFS

Used to get a reference to a component

Makes use of the ComponentQuery syntax to the locate components

Example:

Refs: {

homeButton: ‘#home’

}

You get the getter for free !

CONTROLLERS: CONTROLS

Defines the events on which the controller listens and how to react

Example:

control: {

homeButton: {

goHome: ‘showTheHomeView’

}

}

CONTROLLERS: ROUTES

Since Sencha Touch 2 controllers have support for Routes

Enables History support

Example:

Routes: {

‘login’: ‘showLogin’

}

Will listen to http://myApp.com/#login

MODELS

Represents the data in our application

MODELS: FIELDS

Defines the properties of the model

Consists of:

• Name• Type

fields: {

{name: ‘id’, type: ‘int’}

{name: ‘name’, type: ‘string’}

}

MODELS: PROXIES

Defines where and how to load/save the data

Mainly used by stores

You must define:

• Type of proxy• The URL• The reader (json or xml)

PROXIES: RESTExt.define(‘App.model.Broodje’, {

extend: ‘Ext.data.Model’,

config: {

fiels: [‘id’, ‘name’],

proxy: {

type: ‘rest’,

url: ‘data/broodjes’,

reader: {

type: ‘json’,

root: ‘broodje’

}

}

}

});

PROXIES: RESTvar broodje = Ext.create(‘App.model.Broodje’, {name: ‘smos kaas’});

broodje.save() // POST /broodjes

broodje.destroy() //DELETE /broodjes/123

If not happy with the default URLs, implement the buildUrl method to customize the generated URLs

MODELS: ASSOCIATIONS

Most applications have relations between models

The associations API enables developers to express those relations

Possibilities:

• hasMany• belongsTo

MODELS: ASSOCIATIONSExt.define(‘App.model.Broodje’, {


config: {

hasMany: {model: ‘Ingredient’, name: ‘ingredients’}

}

});

Ext.define(‘App.model.Ingredient’, {


config: {

belongsTo: ‘Ext.data.Model’

}

});

ASSOCIATIONS: THE BENEFITS

Benefits off defining associations:

• Data of ‘child’ members get automatic loaded• Easy to traverse the associated data

broodje.ingredients().each(function(ingredient) {

console.log(ingredient);

});

MODELS: VALIDATIONS

Models have support for validations

Possible validations:

• Presence• Length• Format• Inclusion• Exclusion

MODELS: VALIDATIONS

Examples:

{ type: 'presence', field: 'name' },

{ type: 'length', field: 'name', min: 5 },

{ type: 'format', field: 'age', matcher: /\d+/ },

{ type: 'inclusion', field: 'gender', list: ['male', 'female'] },

{ type: 'exclusion', field: 'name', list: ['admin'] }

MODELS: VALIDATIONS

How to use ?

var newUser = Ext.create('User',

{ name: 'admin', age: 'twenty-nine', gender: 'not a valid gender' }

);

var errors = newUser.validate();

errors.isValid(); //returns false if there were validations errors

errors.items(); //returns an array of all errors

STORES

Is just basically a collection of model instances

Are used to load data into a List

Can optionally use a Proxy to load the required data

Support for sorting & grouping

HYBRID APPLICATIONS

This is all nice but we are still running in the browser

What if we want a ‘real’ application ?

What if we want to access device functionality like

• Contacts list• Camera• Photos• …

HYBRID ?

Site

AppNative

Web sites

Native app

Web apps

HYBRID ?

Site

AppNative

Web sites

Native app

Web appsHybridapps

HYBRID ?

WebFont Video Audio Graphics

HTTP

AJAX

Events

Sockets

Camera

Location

Contacts

SMS

File system Parralel processing

Cross app messagin

CSS Styling & Layout

JavaScript

Semantic HTML

HYBRID ?


HTTP

AJAX

Events

Sockets

Camera

Location

Contacts

SMS


Cross app messagin


JavaScript

Semantic HTML

WebView


HTTP

AJAX

Events

Sockets

Camera

Location

Contacts

SMS


Cross app messagin


JavaScript

Semantic HTML

WebView

Native wrapper

SENCHA TOOLS

Sencha Tools allows you to build a Native Wrapper

Build your project with the Sencha Tools and you get a native app

But what about the left side ?

PHONEGAP

Tries to close the gap between web apps and access to the device APIs

Different on every platform

Access to:

• Camera• Contacts• Notification• Storage• …

QUESTIONS ?

sencha touch - introduction

Technology