what are winjs and winrt, using the apis in javascript george georgiev telerik software academy...
Post on 04-Jan-2016
217 views
TRANSCRIPT
![Page 1: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/1.jpg)
WinJS Classes and Namespaces
What are WinJS and WinRT, Using the APIs in JavaScript
George Georgiev
Telerik Software Academyacademy.telerik.com
Technical Traineritgeorge.net
![Page 2: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/2.jpg)
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
![Page 3: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/3.jpg)
Defining Classes with WinJS
Using WinJS.Class.define()
![Page 4: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/4.jpg)
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
![Page 5: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/5.jpg)
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);
![Page 6: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/6.jpg)
Defining & Using classes with WinJS
Live Demo
![Page 7: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/7.jpg)
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
![Page 8: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/8.jpg)
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"; } },});
![Page 9: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/9.jpg)
WinJS Properties in Classes
Live Demo
![Page 10: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/10.jpg)
Deriving (inheriting) Classes with WinJS
Using WinJS.Class.derive()
![Page 11: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/11.jpg)
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
![Page 12: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/12.jpg)
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; }})
![Page 13: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/13.jpg)
Inheriting Classes with WinJS
Live Demo
![Page 14: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/14.jpg)
WinJS MixinsDefining and using a mixin to
extend objects
![Page 15: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/15.jpg)
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
![Page 16: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/16.jpg)
Creating and Using a Mixin with WinJS
Live Demo
![Page 17: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/17.jpg)
NamespacesOrganizing code with Namespaces
![Page 18: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/18.jpg)
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
![Page 19: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/19.jpg)
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
![Page 20: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/20.jpg)
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(...);
![Page 21: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/21.jpg)
Organizing code with Namespaces
Live Demo
![Page 22: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/22.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен 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
![Page 23: What are WinJS and WinRT, Using the APIs in JavaScript George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649f175503460f94c2d5b1/html5/thumbnails/23.jpg)
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