Post
Ask Question

OOP in WinJS #3: Classes

In our previous article we talked about how to use Namespaces and Nested Namespaces.

As you learned in our previous articles, WinJS lets you build your own structure in an OOP way. Speaking of this, I'd like to move the topic a little bit further and show you how to create Class in WinJS.

Classes are a very important entity in OOP. We can't think of OOP without classes.Classes are the foundation of OOP but not the entire perspective. So let's create some classes and use them in our apps.

Building the App

Note: Building the app from scratch or continuing from an existing project is up to you. But you can create a new WinJS project and add a new js to the project to start working with what we have in mind. We'll be using Universal Windows Apps for showing the demo.

What we're going to create is a Country class that stores 2 properties (Name and Code) which we can assign once we call them:

  1. var Country = WinJS.Class.define(  
  2.     function (name, code) {  
  3.         this.name = name;  
  4.         this.code = code;  
  5.     });  
This is the easiest way to create a class. You use the help of WinJS library and apply your own structure.

Class creation process is almost similar according to most languages out there, but to call this class you need to write:
  1. var country = new Country("Turkey", "TRK");  
  2. console.log("Country Code = " + country.code);  
  3. console.log("Country = " + country.name);  
Once you run the project, if you check on Javascript Console, you shall see this:


This was an easy explanation of how classes can be created. But I'd like to give a much more detailed  example. Ignore the information entered. They're just an example:
  1. var Employee = WinJS.Class.define(  
  2.     function (name,surname,age,profession,nationality,salary) {  
  3.         this.name = name;  
  4.         this.surname = surname;  
  5.         this.age = age;  
  6.         this.profession = profession;  
  7.         this.nationality = nationality;  
  8.         this.salary = salary;  
  9.     });  
  10.   
  11. var Company = WinJS.Class.define(  
  12.     function (name,location,interest,employeecount,owner) {  
  13.         this.name = name;  
  14.         this.location = location;  
  15.         this.interest = interest;  
  16.         this.employeecount = employeecount;  
  17.         this.owner = owner;  
  18.     });  
We've created two classes named Employee and Company with a set of properties for each of them.Lets create three sample Employees and Company:
  1. var emp = new Employee(  
  2.     "Ibrahim",  
  3.     "Ersoy",  
  4.     "30",  
  5.     "Developer",  
  6.     "Turkey",  
  7.     60000);  
  8.   
  9. var emp2 = new Employee(  
  10.     "Gul",  
  11.     "Ershad",  
  12.     "30",  
  13.     "Senior Software Developer",  
  14.     "India",  
  15.     100000);  
  16.   
  17. var emp3 = new Employee(  
  18.     "Dhananjay",  
  19.     "Kumar",  
  20.     "35",  
  21.     "Team Leader",  
  22.     "India",  
  23.     200000);  
  24.   
  25.   
  26. var company = new Company(  
  27.     "MindCracker LLC",  
  28.     "India",  
  29.     "Internet",  
  30.     3,  
  31.     "Mahesh Chand");  
Now let's call them in our app.
  1. console.log(emp.name + " is a " + emp.age + " years old " + emp.profession + " working at " + company.name);  
  2. console.log(emp2.name + " is a " + emp2.age + " years old " + emp2.profession + " working at " + company.name);  
  3. console.log(emp3.name + " is a " + emp3.age + " years old " + emp3.profession + " working at " + company.name);  
  4. console.log("Owner of " + company.name + " is " + company.owner);  
Run the app and check on Javascript Console:


Creating Classes in WinJS is easy as you can see.The knowledge you gained from Server Side OOP can be re-applied in WinJS without headache. Actually its "almost" the same as creating classes in JavaScript. Here's an example below of how we can create a class in JavaScript:
  1. class Employee {  
  2.   constructor(name,surname,age,profession,nationality,salary) {  
  3.         this.name = name;  
  4.         this.surname = surname;  
  5.         this.age = age;  
  6.         this.profession = profession;  
  7.         this.nationality = nationality;  
  8.         this.salary = salary;  
  9.   }  
  10. }  
We need to use "class" and "constructor" terms for creating classes ; while in WinJS you don't need to create a constructor and you don't need to write class term. Everything is already dealt with while defining the class in WinJS.

Our next article will be about deriving classes which is known as Inheritance. So stay tuned and follow my articles.
 
Read more articles on Universal Windows App:


Similar Articles