WinJS Classes and Namespaces

What are WinJS and WinRT, Using the APIs in JavaScript

George Georgiev

Telerik Software Academyacademy.telerik.com

Technical Traineritgeorge.net

2

Table of Contents 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

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

Defining Classes in WinJS

Example definition of an Animal class

5

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);

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

WinJS Properties in Classes

Example property definition

8

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"; } },});

WinJS Properties in Classes

Live Demo

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

Inheriting Classes in WinJS

Example deriving of Bear and Mammoth from Animal class

12

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; }})

Inheriting Classes with WinJS

Live Demo

WinJS MixinsDefining and using a mixin to

extend objects

15

WinJS Mixins 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

Creating and Using a Mixin with WinJS

Live Demo

NamespacesOrganizing 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

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

19

Namespaces Two namespaces with objects referencing the parent namespace

20

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(...);

Organizing code with Namespaces

Live Demo

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен 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#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно

?

? ? ??

?? ?

?

?

?

??

?

?

? ?

Questions?

?

WinJS Classes and Namespaces

http://academy.telerik.com

Exercises1. 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