TFS 2012 Web Access Customizations, Part 1: OOP Principles in JavaScript

This is a second part in a series of posts that will get you jump started on developing custom controls for Team Foundation Server 2012 Web Access. We will start with rather general topic, but nonetheless important for TFS Web Access. After reading this article, you should be able to use JavaScript effectively and follow principles of Object Oriented Programming (OOP) the same way it is used in TFS Web Access API.

The TFS client library is designed with OOP principles in mind. For JavaScript that means using following techniques:

Data Abstraction

Abstract data types are descriptions and representations of a real-world construct along with associated behaviour. Languages such as C# provide the class keyword to identify abstract data types. In JavaScript functions are used as object descriptors and all functions are actually JavaScript objects. Thus in JavaScript, classes are function definitions.

In TFS, objects consist of constructor definition and methods and properties declared using the prototype keyword.

 function MyClass() {
 this.text = "Hello World";
}
var inst = new MyClass();

Inheritance

JavaScript supports inheritance through the use of object prototypes. A prototype is a template of properties that is shared by all instances of the object type. Thus instances of object types “inherit” the values of its prototype property. In JavaScript, all object types have a prototype property that can be both extended and inherited.

TFS contains function inherit that helps properly setup inheritance and construct call chain (base constructor has to be called explicitly with this.baseConstructor.call).

 function Parent() { };
 
Parent.prototype.getName= function() {
 return "Parent";
}
 
 
function Child() {
 Parent.call(this);
};
 
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.getName= function() { return "Child"; }
 

Encapsulation

Encapsulation represents the principle of hiding implementation details by restricting access to accessors (getters) and mutators(setters).

For TFS specifically, the following principle applies: All methods and variables are publicly available, but private access is marked with _ (underscore) prefix.

 function MyClass()
{
 var _name = "ondrej"; //private member
 this.Age = calcAge(); //public member
 this.getName = function() { //public method
 return m_name;
 }
 
 function calcAge() { //private method
 return 10 + 10;
 }
}
 

Polymorphism

Polymorphism defines disparate behaviours and actions by objects to the same function invocation.

This is used in TFS extension development extensively when, for example overriding default _init method.

 //note: we are using objects from previous samples
var p = new Parent();
var c = new Child();
 
 
p.getName(); //returns "Parent"
c.getName(); //returns "Child"

Next time, we will look at the skeleton, or template if you will, of the TFS 2012 Web Access custom control.