A GUI custom control with JavaScript OOP programming and jQuery

• Download Visual Studio 2013 solution - 637.4 KB

Introduction

In this article I will show you how to create a custom HTML control that can be used in a web page by using JavaScript OOP programming and jQuery (jQuery will be used to help with the DOM manipulation).
The basic idea is that of having a control (that is a combination of different HTML tags, styles, css and event handlers) written in JavaScript that will be able to add himself to a web page or a portion of it with all his logic inside of it.
OOP programming in JavaScript is a huge topic. Here I will cover the first step to build an object (and only one of the possible ways to do it) and I will keep the code simple for easy understanding. More aspects must be considered in a production environment: there is stuff like prototype, _proto_, prototype chain, inheritance, multiple inheritance, namespaces and TypeScript (only to name a few) that in my opinion must be fully understood to be proficient in JavaScript OOP programming.

First of all...why should we build such a kind of control?

On the Web there are a lot of cool GUI controls written in JavaScript, HTML and CSS some of them are open source, some are commercial. The important is that nowadays, thanks to the fact that JavaScript is no longer the language of the web only, we can use these controls also to develop desktop and mobile applications.
Despite the amount of controls that we can find surfing the web, there is sometimes the possibility we don't find what we need (for many reasons…as an example: the control we find is not open source, it is useful but we don't have the budget to buy it, we know we will need only one functionality but the control is an overkill of features we know we will never use, we find bugs, there is no documentation provided…and so on...).
Well, this article is a starting point to build a control from scratch. I will use jQuery as a library to help with the DOM manipulation.

Hi, my name is MyDiv, I'm a GUI control…nice to meet you! Requirements, sketch and class schema to fix the idea

Let's set some simple requirements for the GUI control

-the control will be called MyDiv
-it will be able to render himself in a web page with default and custom css styles
-it will be divided in two parts: an upper colored part where a custom message will be displayed and a bottom part colored with black that can be clicked by the user
-when the control is clicked on the upper part it shows the message:  "You clicked me N times out of the black area!" (where N is the number of times the upper part is clicked)
-when the control is clicked on the bottom black part it shows the message: "You clicked me M times on the black area!" (where M is the number of time the bottom black area is clicked)

An hand drawn sketch of the requirements

A simple class schema of the control

Here a simple list of methods, variables and handlers of the control with a brief description of their meaning

Inside the attached code. Key concepts.

Here I explain some key concepts that I think to be useful to give a preview of the code in the attached project file.

The constructor

In order to define the constructor of an object in JavaScript OOP programming we use JavaScript functions. So with the piece of code that follows we define a constructor for MyDiv control:

var MyDiv = function (pId, pParent, pWidth, pHeight, pText)
{
    //all our variables, methods and event handlers go here 
    //[...]
}

In order to allow MyDiv to be more customizable we pass to the constructor the following parameters:
pId: id of our object
pParent: HTML tag or jQuery selector where we want to put our control
pWidth: width of the control
pHeight: height of the control
pText: custom message to show before clicking

Using the constructor to create an instance of the object

var MyDiv1 = new MyDiv('MyDiv1', 'body', 450, 120, "Hi, my name is MyDiv1 I'm a GUI control and I'm an instance of the object MyDiv…nice to meet you!");

Following the meaning of the constructor parameters discussed above, this piece of code means:
"create an instance of the object MyDiv with id equal to MyDiv1, appended to the body, with a width of 450px, an height of 120px and a printed custom message that is 'Hi, my name is MyDiv1 I'm a GUI control and I'm an instance of the object MyDiv…nice to meet you!'

Adding methods

In order to change the behaviour of our control we define some public methods.
Here is one of the methods you will find in the code as an example:

this.AddCssClass = function (ppCssClass) {
    $(div0).addClass(ppCssClass);
}

The method is called AddCssClass. It has the following parameter:
ppCssClass: it is the name of the class to change for the dynamically created html element named div0.
After the creation of one instance of the control MyDiv1 the method can be called in this way:
MyDiv1.AddCssClass('myCSSClass');
This piece of code change the css class of the control MyDiv1 with the class called myCSSClass.

Adding event handlers 

Event handlers allows us as users to interact with the control. Here is one of the methods you will find in the code as an example:

function div1_click_Handler()
{
    ClickNonBlackAreaCounter += 1;
    if (ClickNonBlackAreaCounter == 1)
        $(this).html('You clicked me ' + ClickNonBlackAreaCounter.toString() + 'time ' + 'out of the black area!');
    else
        $(this).html('You clicked me ' + ClickNonBlackAreaCounter.toString() + 'times ' + 'out of the black area!');
}

The event handler takes care of the number of times we click on the non black area of MyDiv control end print some message in order to respond to the click.

Conclusions

The project comes with all the code (HTML, CSS and JavaScript) inside a single HTML file for teaching purpose and it is well commented. In real life projects it is a good idea to use different files to take care of SOC (Separation Of Concern) in a better way and it is also a good idea to study in deep JavaScript OOP programming (as I said in the introduction, it is a huge topic).

Nice coding! ;D

Revision History

21-Jun-16:

• Same article content. Small change in the title. Revision History section added

17-Jun-16:

• Original article entitled "A GUI control with JavaScript OOP programming and jQuery"