Enyo Object Model
Enyo is je javascrip framework that powers WebOS. The new version of Enyo can work on any (almost) device. Enyo is fat (but very complete and powerful), but it is probably the best mobile web framework i’ve ever seen, i think i have tested all known mobile frameworks (ps, i <3 joapp too, i consider it as his little brother).
… and sorry about my english ;)
But …
Enyo can seem very complicated at the first time. And i think, it’s not a good idea to develop an application immediately. First, it’s important to know that the core of Enyo offers basic functionalities (not only about mobile and UI components), and they are essential (need to reinvent the wheel french expression ?) to help structure your code, ie :
- object model : kind : kind of Class
- Array : isArray, forEach, map, filter, …
- etc. …
Now, what interests me, is the Enyo object model. I suggest you to read the source code which is well documented (especially : Object.js, Oop.js)
So …
I want a class, oups! a Kind
There are two ways to declare a kind :
var Human = enyo.kind({
kind : enyo.Object, //Human is a "kind" of Object
constructor : function (firstName, lastName) {
//instance members
this.firstName = firstName;
this.lastName = lastName;
},
hello : function () {
console.log("Hello, i am ", this.firstName, this.lastName);
}
});
or :
enyo.kind({
name : "Human", //if you want a namespace : "my_namespace.Human"
kind : enyo.Object,
constructor : function (firstName, lastName) {
//instance members
this.firstName = firstName;
this.lastName = lastName;
},
hello : function () {
console.log("Hello, i am ", this.firstName, this.lastName);
}
});
and use it :
var bob = new Human("Bob", "Morane");
bob.hello();
I want static members !!!
There is a keyword statics :
enyo.kind({
name : "Human",
kind : enyo.Object,
constructor : function (firstName, lastName) {
//instance members
this.firstName = firstName;
this.lastName = lastName;
Human.counter+=1;
},
hello : function () {
console.log("Hello, i am ", this.firstName, this.lastName);
},
statics : {
counter : 0,
getCounter : function () {
return Human.counter;
}
}
});
var bob = new Human("Bob", "Morane");
var sam = new Human("Sam", "LePirate");
console.log("Total of Humans : ", Human.getCounter()); //2
It would be nice, if i had getters and setters
There is a keyword published : it allows to generate automatically getters and setters :
enyo.kind({
name : "Human",
kind : enyo.Object,
published : {
firstName : "John",
lastName : "Doe"
},
constructor : function (firstName, lastName) {
//instance members
if (firstName) this.firstName = firstName;
if (lastName) this.lastName = lastName;
Human.counter+=1;
},
hello : function () {
console.log("Hello, i am ", this.firstName, this.lastName);
},
statics : {
counter : 0,
getCounter : function () {
return Human.counter;
}
}
});
var bob = new Human("Bob", "Morane");
var john = new Human();
console.log(
bob.getFirstName(), bob.getLastName(),
john.getFirstName(), john.getLastName()
);
But, the most interesting is this :
If you have declared fields as “published” you can now write a “changed” method that will called whenever setter is called :
enyo.kind({
name : "Human",
kind : enyo.Object,
published : {
firstName : "John",
lastName : "Doe"
},
firstNameChanged: function(oldValue) {
console.log("new : ", this.firstName, " old : ", oldValue);
},
lastNameChanged: function(oldValue) {
console.log("new : ", this.lastName, " old : ", oldValue);
},
constructor : function (firstName, lastName) {
//instance members
if (firstName) this.firstName = firstName;
if (lastName) this.lastName = lastName;
Human.counter+=1;
},
hello : function () {
console.log("Hello, i am ", this.firstName, this.lastName);
},
statics : {
counter : 0,
getCounter : function () {
return Human.counter;
}
}
});
So, if you run that :
var bob = new Human("Bob", "Morane");
bob.setFirstName("BOBBY");
bob.setLastName("MORANE");
you obtain this :
new : BOBBY old : Bob
new : MORANE old : Morane
OK, it’s cute, but what about inheritance ?
Do you remember kind : enyo.Object (Human is a kind of enyo.Object), so, you can write that SuperHero is a kind of Human :
enyo.kind({
name : "SuperHero",
kind : Human,
published : {
power : "???"
},
constructor : function (firstName, lastName, power) {
//call parent constructor
this.inherited(arguments);
if (power) this.power = power;
},
hello : function () {
//call parent method
this.inherited(arguments);
console.log("My power is : ", this.power);
}
});
var clark = new SuperHero("Clark", "Kent", "Flying");
clark.hello();
/*
Hello, i am Clark Kent
My power is : Flying
*/
Note keyword `inherited to call parent method
That’s it for today. Next time : first Enyo screen. Stay tuned and have a nice day
Tweet