WinJS Classes and Namespaces

1. WinJS Classes and Namespaces What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net

2. Table of Contents • Defining Classes with WinJS • Constructor, instance & static members • Properties • Deriving Classes with WinJS • Calling the base constructor • WinJSMixins • Defining and using custom mixins • Namespaces • Creating, extending and nesting

3. Defining Classes with WinJS Using WinJS.Class.define()

4. Defining Classes in WinJS • WinJS has an API for working with Classes • Defining, deriving and mixing classes • WinJS.Class.define() defines a class, given: • A constructor function • An object defining instance members • Added to the object prototype • An object defining static members • Added to object/class itself • Returns the class object

5. Defining Classes in WinJS • Example definition of an Animal class var Animal = WinJS.Class.define(function (name, age, weightKg) { this.name = name; this.age = age; this.weightKg = weightKg; }, { //instance members makeSound: function makeSound() { console.log(this.name + " made a sound"); } }, { //static members getStronger: function (animalA, animalB) { return animalA.weight > animalB.weight ? animalA : animalB; } }); … var someAnimal = new Animal("Laika", 10, 20);

6. Defining & Using classes with WinJS Live Demo

7. WinJS Properties in Classes • Properties are accessed as fields, but: • Perform functions on getting their value • Perform functions on setting their value • WinJS can create properties in a Class • Based on Object.defineProperty() • Requires get and set functions to be provided • getter should return property value • setter receives a value to set • Useful to validate and notify of changes

8. WinJS Properties in Classes • Example property definition var Animal = WinJS.Class.define(function (name, age, weightKg){ this._name = name; this.age= age; this.weightKg= weightKg; }, { name: { get: function () { return this._name; }, set: function (val) { var oldName = this._name; this._name = val; console.log(oldName+"'s name changed to: "+this._name); } }, descriptionStr: {get: function(){return "name:" + this.name + ", age:" + this.age + ", weight:" + this.weightKg + "kg"; } }, });

9. WinJS Properties in Classes Live Demo

10. Deriving (inheriting) Classes with WinJS Using WinJS.Class.derive()

11. Inheriting Classes in WinJS • Class inheritance – deriving from the "parent" • WinJS.Class.derive() receives • Parent • Constructor • Instance members • Static members • Deriving a class DOESN'T call base constructor • Need to call it manually • Especially if base constructor initializes members

12. Inheriting Classes in WinJS • Example deriving of Bear and Mammoth from Animal class var Bear = WinJS.Class.derive(Animal, function () { Animal.apply(this, arguments); }, { eatHoney: function () { console.log(this.name + " ate some honey"); } }) ... var Mammoth = WinJS.Class.derive(Animal, function () { Animal.apply(this, arguments); }, { goExtinct: function () { this.name = "[extinct]" + this.name; } })

13. Inheriting Classes with WinJS Live Demo

14. WinJSMixins Defining and using a mixin to extend objects

15. WinJSMixins • JavaScript objects – bags of properties • Easy to extend by adding more properties • Mixins – objects used to augment others • Group of properties serving a certain purpose • e.g. event handling, data binding • Not used directly • Mixed into other objects • WinJS.Class.mix() receives objects to mix • Returns the mixed object

16. Creating and Using a Mixin with WinJS Live Demo

17. Namespaces Organizing code with Namespaces

18. Namespaces • Namespaces in JavaScript are actually objects • Used "as if" they are just collections of objects • Contain other objects • Should be extensible and nestable • WinJS.Namespace.define() takes • Name of the namespace (string) • Set of objects to include • Creates a global object • Given name as identifier with given properties • Or adds the properties if the namespace exists

19. Namespaces • WinJS.Namespace.defineWithParent()takes • The parent namespace as an object • NOT a string (very easy to mistake) • Name of the namespace (string) • Set of objects to include • Creates a object inside the given parent • Given name as identifier with given properties • Or adds the properties if the namespace exists

20. Namespaces • Two namespaces with objects referencing the parent namespace WinJS.Namespace.define("AnimalKingdom", { Animal : WinJS.Class.define(...) }); ... WinJS.Namespace.defineWithParent( AnimalKingdom, "Mammals", { Bear: WinJS.Class.derive(AnimalKingdom.Animal, ...), Mammoth: WinJS.Class.derive(AnimalKingdom.Animal, ...) } } ... var someBear = new AnimalKingdom.Mammals.Bear(...);

21. Organizing code with Namespaces Live Demo

22. WinJS Classes and Namespaces http://academy.telerik.com

23. Exercises • Implement a hierarchy of classes, describing vegetables. A vegetable has color and some vegetables can be directly eaten, some can not.A tomato is a kind of vegetable which has a radius and can be eaten directly. A cucumber is a vegetable which has a length and cannot be eaten directly. • Implement a mushroom mixin. A mushroom mixin enables an object to grow by given an amount of water. Use the mixin to create a TomatoGmo and a CucumberGMO. • Group the classes in the previous exercises into namespaces – there should be no classes in the global namespace