rich mobile apps with sencha touch - class system

25
CLASS SYSTEM Rich Mobile Apps with Sencha Touch Part II – Class System

Upload: ncosmin2001

Post on 11-May-2015

398 views

Category:

Education


2 download

DESCRIPTION

Rich Mobile Apps with Sencha Touch - class system

TRANSCRIPT

Page 1: Rich mobile apps with sencha touch  -  class system

CLASS SYSTEM

Rich Mobile Apps with Sencha TouchPart II – Class System

Page 2: Rich mobile apps with sencha touch  -  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

Page 3: Rich mobile apps with sencha touch  -  class system

Rich Mobile Apps with Sencha TouchPart II – Class System

BetterDeveloper Experience

Page 4: Rich mobile apps with sencha touch  -  class system

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

Page 5: Rich mobile apps with sencha touch  -  class system

Rich Mobile Apps with Sencha TouchPart II – Class System

…Widgets & Layouts

Data PackageEvent System

Class System

Page 6: Rich mobile apps with sencha touch  -  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

Page 7: Rich mobile apps with sencha touch  -  class system

Rich Mobile Apps with Sencha TouchPart II – Class System

Flexibility

Predictability

ProgrammerFamiliarity

Sencha Class

System =

Page 8: Rich mobile apps with sencha touch  -  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

Page 9: Rich mobile apps with sencha touch  -  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

Page 10: Rich mobile apps with sencha touch  -  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

Page 11: Rich mobile apps with sencha touch  -  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'); }});

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'

Page 12: Rich mobile apps with sencha touch  -  class system

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"

Page 13: Rich mobile apps with sencha touch  -  class system

Rich Mobile Apps with Sencha TouchPart II – Class System

Sing

MIXINS

Play Instruments

Compose Songs

Performer

Composer

Singer-songwriter

Page 14: Rich mobile apps with sencha touch  -  class system

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

Page 15: Rich mobile apps with sencha touch  -  class system

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

Page 16: Rich mobile apps with sencha touch  -  class system

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

Page 17: Rich mobile apps with sencha touch  -  class system

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

Page 18: Rich mobile apps with sencha touch  -  class system

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

Page 19: Rich mobile apps with sencha touch  -  class system

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

Page 20: Rich mobile apps with sencha touch  -  class system

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

Page 21: Rich mobile apps with sencha touch  -  class system

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

Page 22: Rich mobile apps with sencha touch  -  class system

Rich Mobile Apps with Sencha TouchPart II – Class System

Config: Setter’s Process

Before

•Validation

•Filtering

•Transformation

Set

•Actual assignment

After

•Notification

•Updating dependencies

Page 23: Rich mobile apps with sencha touch  -  class system

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"

Page 24: Rich mobile apps with sencha touch  -  class system

Q & A

Rich Mobile Apps with Sencha TouchPart II – Class System

Page 25: Rich mobile apps with sencha touch  -  class system

THANKS !!!

Rich Mobile Apps with Sencha TouchPart II – Class System