Object Oriented Programming

"One for all, and all for one"  -  Alexandre Dumas, pere

• Introduction
• OOP Principles
• Class Diagrams
• Sequence Diagrams
• OOP for Javascript - how to use in a gadget (Basic concepts)
• OOP for Javascript - how to use in a gadget (Advanced stuff)
• Conclusion
• Resources
• Author Bio

//constructing the object, an instance of a class
objectInstance = new ObjectClass();

//the constructor can have parameters
//also, there can usually be more than one constructor
salary = 1000000;
me = new Employee(salary);

• modularity - it's probably the core part of OOP. We need to find individual entities in our program. In the end, they can be pretty much anything (objects, classes, etc.), but what's important is that we have to spot what can break away from the rest of the solution, and code it separately. But why does it help? The Google Testing Blog says it best: "Testing rocks.Debugging sucks". This may not always be observed by users of the final product, but it's a very good thing to organize the solution you are trying to code. Not only is it easier to think about your program, but if you need to fix a bug or implement an update you'll be able to find the right spot a lot faster.

Figure 1: Modularity


• encapsulation - strongly connected to modularity. It says that everything except the interface of an object should be hidden and precisely located, so the actual implementation can easily be changed, with an improvement to the program security as well. However, this means that the interface (public attributes and methods) should be very representative for the object in cause. Most of these ideas are nicely exemplified in Figure 2. We all know what that is, and that it stores data, but we don't actually see the data, or where and how it's stored. We just see something that goes into the USB port (that's the interface :)

Figure 2: Encapsulation example


• inheritance - is another base concept of OOP, and it's probably the reason why OOP works so well; among other things, it allows us to establish patterns and save space when writing code, by making a class inherit another class. This means that the subclass has all the public fields the superclass has, but can also define some of their own (note that the subclass can also be a superclass for something else). A nice example is shown in Figure 3, which also introduces some UML symbols to represent inheritance.

Figure 3: Inheritance

There are a lot of vehicle types (we can say they inherit the class called Vehicle), but in Figure 3 we can see two examples: Bus and Racecar. They all inherit the superclass' public fields, like numberOfPassangers or stop(), but they also define their own methods and attributes. For example, a Bus has a schedule for arriving in stations and a Racecar has an activeGrandPrix to show us on what track it's competing this week.

• polymorphism - is related to inheritance, and it's the thing that makes it flexible; basically, you can treat a derived class just like the parent, based on the fact that the derived class has at least everything the parent class has. For example, considering the situation above, if a person's job is to park cars when they arrive at a hotel, that person will probably use the ignition(), go(speed) and stop() methods, no matter what kind of car has arrived.

As i've said, when creating a program using OOP, some planning and organizing is usually done before the actual implementation. So, a class diagram is basically a drawing which shows the program structure, specifically the relations between classes used in that program. Here are some details about often used types of relations:

Figure 4: Inheritance

Figure 5: Aggregation

Figure 6: Composition


• inheritance - We've talked about inheritance earlier, and, as you've probably noticed, it's symbolized with an arrow ending in an empty triangle and pointing towards the parent class (superclass); see Figure 4.
• aggregation - The best way to understand it is from examples. There are a lot of ways to define it, but it's better to think of it as an answer to a question. Many people use this question: "Does it have a ... ?". For example, let's look at Figure 7. A parking lot may have some cars in it; the ParkingLot class has a vehicles array with items of the Vehicle type to keep account of the parked cars, so we're definitely looking at aggregation. It's symbolized with an arrow ending in an empty diamond, as shown in Figure 5.

Figure 7: Aggregation


• composition - Composition is similar with aggregation, but it answers a slightly different question. My favorite question for composition is "Is it made of ... ?". Unlike a parking lot without cars, a car can't 'survive' without engines and wheels (Figure 8). If you want to understand the difference better, you can check out this Wikipedia article. Composition is symbolised with an arrow ending in a filled diamond, and pointing towards the object that is made of something (Figure 6). For the next example we added some extra fields to our Vehicle class to see what a car is made of (just for the sake of the argument: an Engine object and a Wheel array).

Figure 8: Composition


• You can create your own questions to help you understand these things better. It's important to know that UML is very flexible, and allows you to make class diagrams which put your program into perspective and everybody understands. There are many other types of relations, not so close to a standard as the mentioned ones are, but they occur many times as well. Some good examples are association (symbolized through a line) and dependency (symbolized through an arrow ending with a filled triangle). These are generic definitions for the relations, but the most important thing is that the resulting class diagram will be consistent with the program requirements. Here's how our final class diagram could look like:

Figure 9: Class Diagram

Here are some tips:

• If we want to differentiate public fields from private fields, we can place the '+', respectively '-' symbols in front of the declaration.
• The classes in the diagram also contain Event fields. We didn't use them until now, but they may help when making sequence diagrams, which are detailed in the next section.

Figure 10: Sequence Diagram - as seen in this Wikipedia article

This example shows us what happens when we click the Send/Receive button from an offline email client. The first action performed by the program is to send unsent email (sendUnsentEmail). Then it 'asks' the server if there is new email (newEmail) and, depending on the response, it will be downloaded; after that, old email is deleted. Notice that when making such a sequence diagram, the methods on the arrows should belong with the object their pointing at (for example, the sendUnsentEmail method belongs to the Server object).

Here are some tips:

• If it requires a response, it's probably a function :)
• The objects, which are drawn as big squares on top, are represented using this convention: "[object name]:[object type/class]". If you see ":Computer", it refers to an anonymous Computer object, it could be any computer. A particular example can be this one: "MyDormComputer:Computer" - "UniversityServer:Server".
• Sequence diagrams can become very complex, depending on the difficulty of our problem. More info about other concepts and conventions can be found at the Wikipedia article about Sequence Diagrams.

OOP for Javascript - how to use in a gadget (Basic concepts)

Figure 11: What's behind that graph?

This section shows you how to bypass some common problems, how to create class-like entities and how to use them. So, to get to the point, how often have you been put in front of the need to make 2 arrays, with the same length and referring to the same elements? Well it's been too often for me :) and a cool solution is using simple to implement OOP. For example, in my Chart gadget, i condensed the 2 arrays into a single array, containing elements of a certain type, which i define. First, i created a class called Dot to hold the location of a point.

function Dot(xParam,yParam){
	this.x=xParam;
	this.y=yParam;
}

As you can see, the x and y attributes are set when calling the class constructor. You can see an actual call here:

function MakeArray(dataParam){
	//...
	aux=data.split(';');
	for (i=0;i<aux.length;i++) {
		coordinates=aux[i].split(',');
		dots[i]=new Dot(parseInt(coordinates[0],10),parseInt(coordinates[1],10));
	}
}

After i get the exact value of the coordinates, which are initially separated by the comma character in a string, i create a dots array containing Dot objects, which are constructed as seen. Here's a snippet of code that calculates sizes and positions for the chart lines, based on the previously recorded point coordinates.

for (i=0;i<dots.length-1;i++){
	lines[i]=chart.appendElement("<div height='2' background='#888888'/>");
	lines[i].x=(dots[i].x-minXValue)*xUnit+2;lines[i].y=height-(dots[i].y-minValue)*yUnit-2;
	lines[i].rotation=-Math.atan((dots[i+1].y-dots[i].y)*yUnit/(dots[i+1].x-dots[i].x)/xUnit)*180/3.1415;
	lines[i].width=Math.sqrt(sqr((dots[i+1].y-dots[i].y)*yUnit)+sqr((dots[i+1].x-dots[i].x)*xUnit));
}

The access is intuitive (dots[i].x and dots[i].y) and prevents the need for 2 arrays. You should also note that the encapsulation which results from this relatively simple optimization is a huge helper when debugging :)

OOP for Javascript - how to use in a gadget (Advanced stuff)

Figure 12: Combobox created after OOP principles

The controls from the Google Desktop Gadget API (<button>, <img>, etc.) are object oriented - they reflect all the principles detailed in previous sections of the article. I also made a control of my own, having those principles in mind: a combobox. You can include it (freely) in your gadget simply by unzipping this archive into your build directory and including the script inside it.

First, we have to figure out what the targeted behaviour will be. In the case of my combobox, i wanted to be able to do the following in the main.js file:

var a=new Array(3);
a[0]="element0";a[1]="element1";a[2]="element2";

function testClick(x){
	//alert(c.getValue());
}

//creating the combobox
c=new ComboBox(view,50,50,200,3,"testClick",a);

//setting a value
c.setValue("element1");

//self-destruct after 20 seconds
setTimeOut("c=c.destroy();",20000);

Let's see what this snippet of code does. An array is created to have something to work with. After that, we define a function which we want to be launched when the onClick or onChange event is triggered. We then instantiate a combobox into the c variable, using the constructor which has this prototype: ComboBox(parent,x,y,width,maximumNumberOfElementsShown,onClickFunctionToBeTriggeredWrittenAsAString,itemArray); each parameter's meaning is pretty obvious - just notice the flexibility of the object due to the parent parameter. For example, if we want to create the combobox in a <div>, not directly in the <view>, we just write the name of that <div> as the first parameter in the constructor.

We have also have a setValue() method and a getValue function, as well as a destructor function: c.destroy(); we can call it a function because it returns the null pointer. So to empty the c reference we can actually write: c=c.destroy();

But how do we do all this? Well, let's take it one step at a time. We've seen how to simulate attributes (using the object called this) and fully-functional constructors (by writing code in the actual function body). To create methods inside the class, we use similar code; we just have to define them, like this:

this.setValue=setValue;

function setValue(s){
	this.value=s;
	CBedit.value=s;
}

You can include parameters and return objects or values just like you would if you weren't using classes. Basically, we have now covered everything that we need to do; to gain perspective, here's a general look on the ComboBox class:

function ComboBox(parent,x,y,width,numberOfDisplayedItems,onClickFunction,newArray){
	//some variables, not important for our example
	var CBbutton;var auxCBarray=new Array(); var actualNumberOfElements=0;var CBcontentDIV;var CBshape;

	//CONSTRUCTOR
	construct();
	function construct(){
		this.value="";
		//...
		//adding UI elements, calculating positions, etc.
	}
	
	//PUBLIC
	this.setValue=setValue;
	function setValue(s){
		this.value=s;CBedit.value=s;
	}

	//PUBLIC
	this.getValue=getValue;
	function getValue(){
		return (CBedit.value);
	}

	//PUBLIC (DESTRUCTOR)
	this.destroy=destroy;
	function destroy(){
		parent.removeElement(anotherReferenceToCBcontentDIV);
		parent.removeElement(anotherReferencetoCBedit);
		parent.removeElement(anotherReferencetoCBbutton);
		parent.removeElement(AnotherReferencetoCBShape);
		return null;
	}

	//...
}

Here are some helpful tips about OOP in Javascript:

• You may have noticed in the snippets of code some comments that said //PUBLIC. Those exist to make it easier for other developers to know what the visibility for every field is, but the truth is that, because Javascript doesn't deal with visibility and all fields are public, we can use this convention: put an underscore in front of anything you would like to stay private; for example: _privateFunction.

• There are 2 ways to derive a class from another. One uses functions:

  function superClass() {
  	this.f=superFunction;
  }
  
  function subClass() {
  	this.inheritFrom = superClass;
  	this.inheritFrom();
  	this.f = subFunction;
  }

  ... and one uses the prototype attribute:

  function superClass() {
  	this.f = superFunction;
  }
  
  function subClass() {
  	this.f = subFunction;
  }
  
  subClass.prototype = new superClass;

• Missing the instanceOf operator? For those who don't know, this is included in other programming languages to help us compare and find out object types. You can write it yourself in Javascript, again, based on the useful prototype:

  function instanceOf(object, constructorFunction) {
    while (object != null) {
      if (object == constructorFunction.prototype)
       {return true}
  	 object = object.__proto__;
    }
    return false;
  }

• Here's how to find out an object's properties in Javascript:

  function Dot(xParam,yParam){
  	this.x=xParam;
  	this.y=yParam;
  }
  
  d=new Dot(3,4);
  
  for (property in d)
  	alert(property);

• Class diagrams have been made using gModeler, an online UML editor
• The Chart gadget
• "Create your own objects" Javascript article
• "Object-Oriented Programming with Javascript" column
• 3rd Party Combobox Control
• Gadget API Reference

Author Bio

I'm a natural born programmer. My first contact with a techno-gadget was Star Trek (remember those cool sensors?). I used to fill up a whole room with drawings of them when I was only 3 years old. Generally, I find a lot of inspiration for intuitive interfaces in things with "star" in their names (like Star Wars, Stargate,... :-) . I like the border between interface and function—it's the essence of a program, I think. Anyway, I'm a software engineering student now, and you can learn more about me and what I'm thinking and doing at my website or blog. My most popular gadgets are DigiWatch and TV Set.