rich mobile apps with sencha touch - class system
DESCRIPTION
Rich Mobile Apps with Sencha Touch - class systemTRANSCRIPT
CLASS SYSTEM
Rich Mobile Apps with Sencha TouchPart II – Class System
Rich Mobile Apps with Sencha TouchPart II – Class System
ExtJs And Sencha - 2 products that form the Sencha SDK. They are considered the best UI frameworks ever made for web applications.
As we saw in the previous presentation they work cross platforms, cross browser but most importantly they deliver high quality and user experience that used to exist only in native applications.
Best User Experience
Rich Mobile Apps with Sencha TouchPart II – Class System
BetterDeveloper Experience
The Sencha Class System was first introduced in Ext JS 4.0 and was a major step forward in making it easy to build object oriented JavaScript code. As a core part of the Sencha JavaScript platform, it’s now a shared component between Ext JS and Sencha Touch 2.
Ext JS and Sencha Touch 2 use the class system internally to manage dependencies, make code more reusable as well as provide a rich set of features that are commonly found in other class-based programming languages.
Rich Mobile Apps with Sencha TouchPart II – Class System
Rich Mobile Apps with Sencha TouchPart II – Class System
…Widgets & Layouts
Data PackageEvent System
Class System
Why do we call it a class system?
Prototype-based Class-based
Flexibility Predictability
Programmer
Familiarity
Rich Mobile Apps with Sencha TouchPart II – Class System
Rich Mobile Apps with Sencha TouchPart II – Class System
Flexibility
Predictability
ProgrammerFamiliarity
Sencha Class
System =
Key Benefits
Learn
•Consistent
•Familiar
Develop
•DRY•Debu
ggable
•Testable
Deploy
•Automatic dependency resolution
Rich Mobile Apps with Sencha TouchPart II – Class System
Namespacing & Code Organization
1. OrganizationName.group[.subgroup].ClassName2. One class per file3. File name matches class name
• Ext.chart.Label• Ext.data.writer.Xml• MyApp.field.Password Ext/Chart/Label.js
Ext/data/writer/Xml.js MyApp/field/
Password.js
Rich Mobile Apps with Sencha TouchPart II – Class System
Rich Mobile Apps with Sencha TouchPart II – Class System
Ext.define('My.sample.Person', { constructor: function(name) { this.name = name; },
walk: function(steps) { alert(this.name + ' is walking ' + steps + ' steps'); }});
Class Definition
var tommy = new My.sample.Person('Tommy');tommy.walk(5); // alerts 'Tommy is walking 5 steps' Class definition is more than just inheritance Automatic namespace allocation Classes are aware of their own names Asynchronous vs. synchronous
Rich Mobile Apps with Sencha TouchPart II – Class System
Ext.define('My.sample.Person', { constructor: function(name) { this.name = name; }, walk: function(steps) { alert(this.name + ' is walking ' + steps + ' steps'); }});
Inheritance
Ext.define('My.sample.Developer', { extend: 'My.sample.Person', code: function(language) { alert(this.name + ' is coding in ' + language); }});
var tommy = new My.sample.Developer('Tommy');tommy.walk(5); // 'Tommy is walking 5 steps'tommy.code('JavaScript'); // 'Tommy is coding in JavaScript'
Rich Mobile Apps with Sencha TouchPart II – Class System
Inheritance Ext.define('My.sample.Developer', { extend: 'My.sample.Person', code: function(language) { alert(this.name + ' is coding in ' + language); }, walk: function(steps) { if (steps > 100) { alert('Are you serious? That`s too far! I`m lazy'); } else { return this.callParent(arguments); } }});
var tommy = new My.sample.Developer('Tommy');tommy.walk(50); // "Tommy is walking 50 steps"tommy.walk(101);// "Are you serious? That's too far! I'm lazy"
Rich Mobile Apps with Sencha TouchPart II – Class System
Sing
MIXINS
Play Instruments
Compose Songs
Performer
Composer
Singer-songwriter
Rich Mobile Apps with Sencha TouchPart II – Class System
Ext.define('My.ability.Sing', { sing: function(songName) { alert('I`m singing ' + songName); }});
Ext.define('My.ability.PlayInstruments', { play: function(instrument) { alert('I`m playing ' + instrument); }});
Ext.define('My.ability.ComposeSongs', { compose: function(songName) { alert('I`m composing ' + songName); }});
MIXINS
Rich Mobile Apps with Sencha TouchPart II – Class System
Ext.define('My.sample.Performer', { extend: 'My.sample.Person', mixins: { canSing: 'My.ability.Sing', canPlay: 'My.ability.PlayInstruments' }});Ext.define('My.sample.Composer', { extend: 'My.sample.Person', mixins: { canPlay: 'My.ability.PlayInstruments', canCompose: 'My.ability.ComposeSongs' }});
Ext.define('My.sample.SingerSongwriter', { extend: 'My.sample.Person', mixins: { canSing: 'My.ability.Sing', canPlay: 'My.ability.PlayInstruments', canCompose: 'My.ability.ComposeSongs' }});
MIXINS
Rich Mobile Apps with Sencha TouchPart II – Class System
Ext.define('My.sample.Performer', { extend: 'My.sample.Person', mixins: { canSing: 'My.ability.Sing', canPlay: 'My.ability.PlayInstruments' }, sing: function() { alert("Here we go!"); this.mixins.canSing.sing.call(this); alert("I`m done singing!"); }});
var jamie = new My.sample.Performer('Jamie');jamie.sing('Wind of Change'); // "Here we go!" // "I`m singing Wind of Change" // "I`m done singing!"
MIXINS
Rich Mobile Apps with Sencha TouchPart II – Class System
<!-- ... --><head> <!-- ... --> <script src="ext.js"></script>
<script> var tommy = Ext.create('My.sample.Developer','Tommy'); var jamie = Ext.create('My.sample.Performer','Jamie'); </script></head>
Dependency Management• Automatic Dependency Injection
Rich Mobile Apps with Sencha TouchPart II – Class System
<!-- ... --><head> <!-- ... --> <script src="ext.js"></script> <script> Ext.require([ 'My.sample.Developer', 'My.sample.Performer' ]); Ext.onReady(function() { var tommy = new My.sample.Developer('Tommy'); var jamie = new My.sample.Developer('Jamie'); }); </script></head><!-- ... -->
Dependency Management• Alternative
Rich Mobile Apps with Sencha TouchPart II – Class System
Ext.define('My.sample.Person', { name: 'Anonymous', age : 0, gender: 'Male', constructor: function(config) { if (Ext.isObject(config)) { if (config.hasOwnProperty('name')) { this.setName(config.name); } if (config.hasOwnProperty('age')) { this.setAge(config.age); } if (config.hasOwnProperty('gender')) { this.setGender(config.gender); } } }});
Config
Rich Mobile Apps with Sencha TouchPart II – Class System
/* ... */setName: function(name) { this.name = name; return this;},getName: function() { return this.name;},setAge: function(age) { this.age = age; return this;},getAge: function() { return this.age;},/* ... */
Config
Rich Mobile Apps with Sencha TouchPart II – Class System
Ext.define('My.sample.Person', { config: { name: 'Anonymous', age : 0, gender: 'Male' }, constructor: function(config) { this.initConfig(config); }});
var robert = new My.sample.Person({ name: 'Robert', age: 21})
robert.setName('Rob'); alert(robert.getAge()); // "21"robert.setAge(22); alert(robert.getAge()); // "22"
Config
Rich Mobile Apps with Sencha TouchPart II – Class System
Config: Setter’s Process
Before
•Validation
•Filtering
•Transformation
Set
•Actual assignment
After
•Notification
•Updating dependencies
Rich Mobile Apps with Sencha TouchPart II – Class System
Config: Magic MethodsExt.define('My.sample.Person', {/* ... */ applyAge: function(age) { if (typeof age != 'number' || age < 0) { alert("Invalid age, must be a positive number"); return; } return age; }, updateAge: function(newAge, oldAge) { alert("Age has changed from " + oldAge + " to " + newAge); }}); var aaron = new My.sample.Person({ name: "Aaron", age: -100}); // "Invalid age, must be a positive number" alert(aaron.getAge()); // "0"alert(aaron.setAge(35)); // "Age has changed from 0 to 35"alert(aaron.getAge()); // "35"
Q & A
Rich Mobile Apps with Sencha TouchPart II – Class System
THANKS !!!
Rich Mobile Apps with Sencha TouchPart II – Class System