Sencha Touch - Introduction

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-
Class-based
based

THE CLASS SYSTEM
Flexibility

Sencha class
system = Predictability

Programmer
Familiarity

CLASS DEFINITION
Ext.define(‘My.Sample.Person’, {
constructor: function(name) {
this.name = name
},

walk: function(steps) {
alert(this.name + ‘is walking’ + steps +
‘steps’);
}
});

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

INHERITENCE
Ext.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);
}
});

INHERITENCE
var 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
<html>
<script>
var tom = new My.sample.Person(‘Tom’);
</script>
</html>

DEPENDENCY
MANAGEMENT
<html>
<script src=‘My.sample.Person’></script>
<script>
</script>
</html>

DEPENDENCY
MANAGEMENT
<html>
<script src=‘My.sample.Person’></script>
<script src=‘My.sample.Developer’></script>
<script>
var developer = new My.sample.Developer(‘Tom’);
</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

DEPENDENCY
MANAGEMENT
<html>
var tom = Ext.create(‘My.sample.Developer’, {name: ‘Tom’});
</script>
</html>

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

CONFIG
config: {
name: ‘Unkown’
},
constructor: function(config) {
this.initConfig(config);
}
});

CONFIG
var 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
Validation Actual assignment Notification
Filtering Updating dependencies
Transformation

CONFIG: SETTER
PROCESS
setFoo()

Before processedValue = applyFoo(newValue, oldValue)

Set This.foo = processedValue

Update updateFoo(processedValue, oldValue)

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

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: REST
Ext.define(‘App.model.Broodje’, {
extend: ‘Ext.data.Model’,
config: {
fiels: [‘id’, ‘name’],
proxy: {
type: ‘rest’,
url: ‘data/broodjes’,
reader: {
type: ‘json’,
root: ‘broodje’
}
}
}
});

PROXIES: REST
var 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:
ASSOCIATIONS
Ext.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
Web sites

Web apps

Native app

App
Native

HYBRID ?

Site
Web sites

Web apps
Hybrid
apps

Native app

App
Native

HYBRID ?

WebFont Video Audio Graphics

Camera HTTP
CSS Styling & Layout

Location AJAX
JavaScript
Contacts Events
Semantic HTML
SMS Sockets

Parralel Cross app
File system
processing messagin

HYBRID ?
WebView


Camera HTTP

Location AJAX
JavaScript
Contacts Events
Semantic HTML
SMS Sockets

Parralel Cross app
File system
processing messagin

Native wrapper

WebView


Camera HTTP

Location AJAX
JavaScript
Contacts Events
Semantic HTML
SMS Sockets

Parralel Cross app
File system
processing messagin

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
• …

Sencha Touch - Introduction

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Sencha Touch - Introduction

Ähnlich wie Sencha Touch - Introduction (20)

Mehr von ABC-GROEP.BE

Mehr von ABC-GROEP.BE (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Sencha Touch - Introduction

Hinweis der Redaktion