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

2. 2  Defining Classes with WinJS  Constructor, instance & static members  Properties  Deriving Classes with WinJS  Calling the base constructor  WinJS Mixins  Defining and using custom mixins  Namespaces  Creating, extending and nesting

3. Using WinJS.Class.define()

4. 4  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.  Example definition of an Animal class 5 var Animal = WinJS.Class.define(function (name, age, weightKg) { WinJS.Class.define(function (name, age, weightKg) { this.name = name; this.name = name; this.age = age; this.age = age; this.weightKg = weightKg; this.weightKg = weightKg; }, { //instance members }, { //instance members makeSound: function makeSound() { makeSound: function makeSound() { console.log(this.name + " made a sound"); console.log(this.name + " made a sound"); } }, { //static members }, { //static members getStronger: function (animalA, animalB) { getStronger: function (animalA, animalB) { return animalA.weight > animalB.weight ? return animalA.weight > animalB.weight ? animalA : animalB; animalA : animalB; } }); });… var someAnimal = new Animal("Laika", 10, 20);

6. Live Demo

7. 7  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.  Example property definition 8 var Animal = WinJS.Class.define(function (name, age, weightKg){ this._name = name; this._name = name; this.age = age; this.age = age; this.weightKg = weightKg; this.weightKg = weightKg; }, { name: { name: { get: function () { return this._name; }, get: function () { return this._name; }, set: function (val) { set: function (val) { var oldName = this._name; var oldName = this._name; this._name = val; this._name = val; console.log(oldName+"'s name changed to: "+this._name); console.log(oldName+"'s name changed to: "+this._name); } }, }, descriptionStr: {get: function(){return "name:" + this.name + descriptionStr: {get: function(){return "name:" + this.name + ", age:" + this.age + ", age:" + this.age + ", weight:" + this.weightKg + "kg"; ", weight:" + this.weightKg + "kg"; } }, },});

9. Live Demo

10. Using WinJS.Class.derive()

11. 11  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.  Example deriving of Bear and Mammoth from Animal class 12 var Bear = WinJS.Class.derive(Animal, function () { Animal.apply(this, arguments); Animal.apply(this, arguments); }, { eatHoney: function () { eatHoney: function () { console.log(this.name + " ate some honey"); console.log(this.name + " ate some honey"); }})... var Mammoth = WinJS.Class.derive(Animal, function () { Animal.apply(this, arguments); Animal.apply(this, arguments); }, { goExtinct: function () { goExtinct: function () { this.name = "[extinct]" + this.name; this.name = "[extinct]" + this.name; }})

13. Live Demo

14. Defining and using a mixin to extend objects

15. 15  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. Live Demo

17. Organizing code with Namespaces

18. 18  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.  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 19

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

21. Live Demo

22. форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране http://academy.telerik.com

23. 1. 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. 2. 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. 3. Group the classes in the previous exercises into namespaces – there should be no classes in the global namespace