WinJs

WinJS Classes and Namespaces

WinJS provides you with a way to create namespaces and work with classes in your code. It provides functionality to create derivatives of your classes and combine them using mixins.

Class and Namespace

There are many frameworks that give JavaScript the feeling of working with OO. So does WinJS. WinJS uses the WinJS.Class.define function to define a class. The function takes 3 parameters. The first parameter is a constructor that is called when the object is instantiated. You can provide parameters to the constructor that can be used when instantiating the object. For example, in the code below a ‘name’ can be provided to the constructor of the ‘Human’ class. If your class doesn’t need a constructor, you can provide an empty function or use ‘null’ (which tells WinJS to create an empty function).

Often your class needs to do a little bit more than just being constructed. After providing the WinJS.Class.define function a constructor, you can give it an object containing functions or fields for the class to work with. These will be available when the class is instantiated. In the example below I added a function called ‘sayHello’ which uses the ‘name’ variable created in the constructor and displays it in a message.

Optionally you can add a third parameter to the constructor which will define static fields and functions. These can be called before the class is instantiated.

In a larger application you probably wrap you code in functions to create scope. In these cases you want your classes to be separated into different files, but possibly available to others too. That’s when Namespaces become handy. You might know namespaces from other languages like C#. They are easy to define with WinJS. Just make a call to the WinJS.Namespace.define function giving it the name of your namespace and an object with the classes. If the namespace already exists, the new members are added to it. In the example I added the ‘Human’ class to the ‘Species’ namespace. I also wrapped the code defining the class and the namespace in a function to create a scope around it. You can try for yourself and see what happens if you try to instantiate the ‘Human’ class without the namespace.

Inheritance

One of the powerful features of Object Oriented programming is Inheritance, with which you can reuse classes by deriving functionality from one to the next. WinJS provides functionality to achieve this in JavaScript. To create a derivative of a class you can use the WinJS.Class.derive function. The function is very similar to the define function described earlier. It takes one extra parameter, the class you want to derive from. It also takes a function as a constructor, an object with instance fields and an optional object with static fields and functions. I extended the previous example a bit and added the new derived class, ‘SuperHuman’. I gave the constructor of this class a second parameter and a new function. Then I added it to the ‘Species’ namespace. At the end you can see the instantiation of the object and calling of the two functions. In the Result window you can see the result of these functions.

Mixins

Other than languages like C#, WinJS can add multiple inheritance to your applications. This means you can have your class inherit from more than one class and reuse code in more different ways. Creating a mixin is not complicated. In the example below I added an object ‘Job’ with a field and a function. By calling the WinJS.Class.mix function with both the original class, ‘Human’ and the new ‘Job’ object, you can have WinJS mix the two together. And thus use the ‘job’ field and the ‘work’ function from ‘Human’ class. Which is inherited by the ‘SuperHuman’ class, giving that access to these too. There are many ways in which this can be useful when using this in your projects.

WinJS provides a couple of handy mixins for you to use in your project. The WinJS.Utilities.eventMixin and the WinJS.Utilities.DOMEventMixin add event functionality your class. I’ve demonstrated the WinJS.Utilities.eventMixin mixin in the example below. One of the things this mixin adds to your class is the addEventListener function and the dispatchEvent function. To make an event work you also have to mix in the WinJS.Utilities.createEventProperties mixin. In the example below I used this to create the ‘laugh’ event. At the end of the example I added the eventlistener and called the ‘tickle’ function on ‘Superman’ to have it fire the event.

wrap-up

Please use the jsfiddles to experiment with the different functions and use them to create classes of your own. I hope the use of the fiddles helps explaining these functions of WinJS a bit. Please let me know if they do, or if I never should use these again in case they don’t :)

Subscribe to the RSS feed or follow me on Twitter. I also added links to my FlipBoard magazines to the left sidebar of my blog.

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: