Sencha Touch - Introduction
-
Upload
abc-groep -
Category
Technology
-
view
1.704 -
download
0
description
Transcript of Sencha Touch - Introduction
![Page 1: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/1.jpg)
SENCHA TOUCHDRUYTS TOM
![Page 2: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/2.jpg)
WHY MOBILE WEB APPS
![Page 3: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/3.jpg)
WHY MOBILE WEB APPS
![Page 4: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/4.jpg)
![Page 5: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/5.jpg)
SENCHA TOUCH
A framework to build HTML 5 mobile applications for iOS, Android and Blackberry
![Page 6: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/6.jpg)
ARCHITECTURE
Class System
Event System
Data package
Widgets & Layouts
…
![Page 7: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/7.jpg)
THE CLASS SYSTEM
Prototype-based
Class-based
Flexibility
Predictability
Programmer Familiarity
![Page 8: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/8.jpg)
THE CLASS SYSTEM
Sencha class system =
Flexibility
Predictability
Programmer Familiarity
![Page 9: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/9.jpg)
CLASS DEFINITIONExt.define(‘My.Sample.Person’, {
constructor: function(name) {
this.name = name
},
walk: function(steps) {
alert(this.name + ‘is walking’ + steps + ‘steps’);
}
});
![Page 10: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/10.jpg)
HOW TO CREATE AN OBJECTvar person = new My.sample.Person(‘Tom’);
person.walk();
![Page 11: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/11.jpg)
INHERITENCEExt.define(‘My.sample.Person’, {
constructor: function(name) {
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);
}
});
![Page 12: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/12.jpg)
INHERITENCEvar tom = new My.sample.Developer(‘tom’);
tom.walk(5);
tom.code(‘Javascript’);
![Page 13: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/13.jpg)
MIXINS
Used to generate multiple inheritance
![Page 14: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/14.jpg)
DEPENDENCY MANAGEMENT<html>
<script src=‘sencha-touch-debug.js’></script>
</html>
![Page 15: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/15.jpg)
DEPENDENCY MANAGEMENT<html>
<script src=‘sencha-touch-debug.js’></script>
<script>
var tom = new My.sample.Person(‘Tom’);
</script>
</html>
![Page 16: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/16.jpg)
DEPENDENCY MANAGEMENT<html>
<script src=‘sencha-touch-debug.js’></script>
<script src=‘My.sample.Person’></script>
<script>
var tom = new My.sample.Person(‘Tom’);
</script>
</html>
![Page 17: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/17.jpg)
DEPENDENCY MANAGEMENT<html>
<script src=‘sencha-touch-debug.js’></script>
<script src=‘My.sample.Person’></script>
<script src=‘My.sample.Developer’></script>
<script>
var tom = new My.sample.Person(‘Tom’);
var developer = new My.sample.Developer(‘Tom’);
</script>
</html>
![Page 18: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/18.jpg)
DEPENDENCY MANAGEMENT
What if we got 50 classes ?
The order of the script tags is important
Becomes a nightmare to manage !
![Page 19: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/19.jpg)
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
![Page 20: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/20.jpg)
DEPENDENCY MANAGEMENT<html>
<script src=‘sencha-touch-debug.js’></script>
var tom = Ext.create(‘My.sample.Developer’, {name: ‘Tom’});
</script>
</html>
![Page 21: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/21.jpg)
CONFIGExt.define(‘My.Sample.Person’, {
name: ‘’,
constructor: function(name) {
this.name = name
},
getName: function() {
return name;
},
setName: function(newName) {
this.name = newName;
},
});
![Page 22: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/22.jpg)
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
![Page 23: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/23.jpg)
CONFIGExt.define(‘My.sample.Person’, {
config: {
name: ‘Unkown’
},
constructor: function(config) {
this.initConfig(config);
}
});
![Page 24: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/24.jpg)
CONFIGvar person = Ext.create(‘My.sample.Person’, {name: ‘Tom’, age: 25});
person.getName() //Tom
person.getAge() //25
![Page 25: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/25.jpg)
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 ?
![Page 26: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/26.jpg)
CONFIG: SETTER PROCESS
Before Set After
ValidationFilteringTransformation
Actual assignment NotificationUpdating dependencies
![Page 27: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/27.jpg)
CONFIG: SETTER PROCESS
setFoo()
processedValue = applyFoo(newValue, oldValue)Before
Set This.foo = processedValue
Update updateFoo(processedValue, oldValue)
![Page 28: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/28.jpg)
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);
}
});
![Page 29: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/29.jpg)
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
![Page 30: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/30.jpg)
What are we going to build ?
![Page 31: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/31.jpg)
TYPICAL APPLICATION ARCHITECTURE
![Page 32: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/32.jpg)
TYPICAL APPLICATION STRUCTURE
Which translates to the following directory structure:
![Page 33: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/33.jpg)
INDEX.HTML
Include the correct build
Include the CSS file from sencha
Include the app.js file
Leave the body tags empty
![Page 34: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/34.jpg)
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
![Page 35: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/35.jpg)
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
![Page 36: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/36.jpg)
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
![Page 37: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/37.jpg)
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 !
![Page 38: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/38.jpg)
CONTROLLERS: CONTROLS
Defines the events on which the controller listens and how to react
Example:
control: {
homeButton: {
goHome: ‘showTheHomeView’
}
}
![Page 39: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/39.jpg)
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
![Page 40: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/40.jpg)
MODELS
Represents the data in our application
![Page 41: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/41.jpg)
MODELS: FIELDS
Defines the properties of the model
Consists of:
• Name• Type
fields: {
{name: ‘id’, type: ‘int’}
{name: ‘name’, type: ‘string’}
}
![Page 42: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/42.jpg)
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)
![Page 43: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/43.jpg)
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’
}
}
}
});
![Page 44: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/44.jpg)
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
![Page 45: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/45.jpg)
MODELS: ASSOCIATIONS
Most applications have relations between models
The associations API enables developers to express those relations
Possibilities:
• hasMany• belongsTo
![Page 46: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/46.jpg)
MODELS: ASSOCIATIONSExt.define(‘App.model.Broodje’, {
extend: ‘Ext.data.Model’,
config: {
hasMany: {model: ‘Ingredient’, name: ‘ingredients’}
}
});
Ext.define(‘App.model.Ingredient’, {
extend: ‘Ext.data.Model’,
config: {
belongsTo: ‘Ext.data.Model’
}
});
![Page 47: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/47.jpg)
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);
});
![Page 48: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/48.jpg)
MODELS: VALIDATIONS
Models have support for validations
Possible validations:
• Presence• Length• Format• Inclusion• Exclusion
![Page 49: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/49.jpg)
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'] }
![Page 50: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/50.jpg)
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
![Page 51: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/51.jpg)
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
![Page 52: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/52.jpg)
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• …
![Page 53: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/53.jpg)
HYBRID ?
Site
AppNative
Web sites
Native app
Web apps
![Page 54: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/54.jpg)
HYBRID ?
Site
AppNative
Web sites
Native app
Web appsHybridapps
![Page 55: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/55.jpg)
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
![Page 56: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/56.jpg)
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
WebView
![Page 57: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/57.jpg)
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
WebView
Native wrapper
![Page 58: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/58.jpg)
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 ?
![Page 59: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/59.jpg)
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• …
![Page 60: Sencha Touch - Introduction](https://reader033.fdocuments.us/reader033/viewer/2022061201/547a5e53b37959532b8b49ca/html5/thumbnails/60.jpg)
QUESTIONS ?