Classes in WinJS

Even if we have heard many times about the classes in the JavaScript, it is not an object oriented language. Rather JavaScript is a prototypal language. Working with classes in JavaScript can be but cumbersome syntactically. WinJS is a JavaScript library and it reduced the syntactical complexity of working with classes. In this post we will learn to work with classes in WinJS.

Let us start with creating a class in pure JavaScript and then we will compare how easy it is to work with classes in WinJS. In JavaScript a class can be created as shown below,

    function Product(name, price) {
        this.name = name;
        this.price = price;
        this.Display = function () {
            console.log(this.name + this.price);
        }
    }

    var p = new Product("Pen", 30);
    p.Display();

If we want we can derive the class using prototype which makes working with classes’ complex in JavaScript. A class in WinJS can be created using WinJS.Class.define . It mainly contains three sections as constructor, instance members and static members.

You can create constructor using the function as shown below. You can pass parameters in the constructor and set the value of the private variables. A constructor with two input parameter can be created as shown below

    var Product = WinJS.Class.define(

          //constructor
          function (name, price) {
              this.name = name;
              this.price = price;

          }
          //instancemembers
          //staticmembers

        );

Next we can add instance members using the methods. To add instance members after constructor put a comma and then start a curly braces. Within this curly braces you can put all the instance members.

   {

              Display: function () {
                  return this.name + " costs " + this.price + "$";
              }
  }

You can also static member in the WinJS class. That can be added as third parameter after the comma of instance members. So let us go ahead and add a static member distributor. This can be added as follows:

//staticmembers
          {
              DistributorName : "ABC Corp"
          }

Entire Product class with constructor, instance functions and static members will look like as follows:

var Product = WinJS.Class.define(

          //constructor
          function (name, price) {
              this.name = name;
              this.price = price;

          },
          //instancemembers
          {

              Display: function () {
                  return this.name + " costs " + this.price + "$";
              }
          },
           //staticmembers
          {
              DistributorName : "ABC Corp"
          }
         

        );

Once class is created we can create instance of class and use the properties as show below.

var product1 = new Product(name, price);
                var textToDisplay = product1.Display();
                var disName = Product.DistributorName;

If you notice we are using static variable name directly with the class name. If you have any experience working with classes in JavaScript you should able to notice that working with classes in WinJS is relatively very easy syntactically.

Now let me show you a real example of working with the Product class created above. I have created a view in which user can enter name and price and on click of the button message from the Product class will get updated in the label.

<input id="txtName" type="text" />
    <input id="txtPrice" type="text" />
    <br/>
    <button id="btnDisplay">Display Product</button>
    </br/>
    <label id="lblProduct">result here </label>
    <label id="lblDis" >result here </label>

On the JS file on the click event of the button we are creating instance of the Product class by passing user input and displaying the message in the label.

document.querySelector("#btnDisplay").onclick= 
                function () {

                var name = document.querySelector("#txtName").value;
                var price = document.querySelector("#txtPrice").value;

                var product1 = new Product(name, price);
                var textToDisplay = product1.Display();
                var disName = Product.DistributorName;


                document.querySelector("#lblProduct").textContent=textToDisplay;
                document.querySelector("#lblDis").textContent = disName;

            };

Great now let us see how we can derive a class from another class.

var SportsProduct = WinJS.Class.derive(Product,
        
        function(name,price,color)
        {
            this.name = name;
            this.price = price;
            this.color = color;
        },

        {
             //instance members
        },
        {
            //static members 
         });

Derived class will have access of all the members of base class. Now we can use derive class to create new instance as show below:

       var product1 = new SportsProduct("Pen", 30,"Red");

In this way we can work with classes in WinJS and you can see that working with class syntactically very easy as compare to JavaScript.

Happy Coding.