Rich mobile apps with sencha touch - class system

Rich Mobile Apps with Sencha Touch
Part 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


Better
Developer 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.


Class
System
Event System
Data Package
Widgets & Layouts
…


Why do we call it a class system?
Prototype-based

Class-based


Flexibility

Sencha
Class
System

=

Programmer
Familiarity
Predictability


Key Benefits
Learn

Develop

• Consistent
• Familiar

• DRY
• Debuggable
• Testable

• Automatic dependency resolution

Deploy


Namespacing & Code Organization
1. OrganizationName.group[.subgroup].ClassName
2. One class per file
3. 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


Class Definition
Ext.define('My.sample.Person', {
constructor: function(name) {
this.name = name;
},
walk: function(steps) {
alert(this.name + ' is walking ' + steps + ' steps');
}
});
 Class definition is more than just inheritance
var tommy = new My.sample.Person('Tommy');
 Automatic namespace allocation
tommy.walk(5); // alerts 'Tommy is walking 5 steps'
 Classes are aware of their own names
 Asynchronous vs. synchronous


Inheritance
constructor: function(name) {
this.name = name;
},
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);
}
});
var tommy = new My.sample.Developer('Tommy');
tommy.walk(5);
// 'Tommy is walking 5 steps'
tommy.code('JavaScript');
// 'Tommy is coding in JavaScript'


Inheritance
Ext.define('My.sample.Developer', {
code: function(language) {
alert(this.name + ' is coding in ' + language);
},
if (steps > 100) {
alert('Are you serious? That`s too far! I`m lazy');
} else {
return this.callParent(arguments);
}
}
});
tommy.walk(50); // "Tommy is walking 50 steps"
tommy.walk(101);// "Are you serious? That's too far! I'm lazy"


MIXINS
Sing

Performer

Play Instruments

Composer

Compose Songs

Singer-songwriter


MIXINS
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
Ext.define('My.sample.Performer', {
mixins: {
canSing: 'My.ability.Sing',
canPlay: 'My.ability.PlayInstruments'
}
});
Ext.define('My.sample.Composer', {
mixins: {
canPlay: 'My.ability.PlayInstruments',
canCompose: 'My.ability.ComposeSongs'
}
});
Ext.define('My.sample.SingerSongwriter', {
mixins: {
canPlay: 'My.ability.PlayInstruments',
canCompose: 'My.ability.ComposeSongs'
}
});


MIXINS
Ext.define('My.sample.Performer', {
mixins: {
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!"

Dependency Management
• Automatic Dependency Injection

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

<head>

<script src="ext.js"></script>
<script>
Ext.require([
'My.sample.Developer',
'My.sample.Performer'
]);
Ext.onReady(function() {
var jamie = new My.sample.Developer('Jamie');
});
</script>
</head>


Config
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
/* ... */
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
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()); //
robert.setAge(22); alert(robert.getAge());
//

"21"
"22"


Config: Setter’s Process
Before

Set

After

• Validation
• Filtering
• Transformation

• Actual assignment

• Notification
• Updating dependencies


Config: Magic Methods
/* ... */
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());
alert(aaron.setAge(35));
alert(aaron.getAge());

// "0"
// "Age has changed from 0 to 35"
// "35"


Q&A


THANKS !!!

Rich mobile apps with sencha touch - class system

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Rich mobile apps with sencha touch - class system

Semelhante a Rich mobile apps with sencha touch - class system (20)

Último

Último (20)

Rich mobile apps with sencha touch - class system