JavaScript UI Control Suite using TypeScript

Notice that after the UI is built, we check whether this control should be a popup control and, if so, call the SetPopup method in the base class. These two lines need to be included in the Build method of each control in order to provide popup functionality. The SetPopup method includes all the logic needed to handle the popup functionality such as placement of the control relative to the assigned 'popup' control and event handling to 'open' (display) and 'close' (hide) the control. The control is displayed when the associated popup control is 'clicked' and is close on any of the following events: the mouse moves out of the control client area, the user presses a mouse button when outside of the control client area, or the 'ctrl' key is pressed.

Event handling is where the arrow function construct of TypeScript really comes in handy. Look at the following code in the SetPopup method:

this.addEventListener(this.BaseElement, 'mouseout', (event) =>
{
    var mouseEvent: MouseEvent = <MouseEvent>event;
    var targetElement: HTMLElement = <HTMLElement>mouseEvent.toElement;
    if (!targetElement)
        targetElement = <HTMLElement>document.elementFromPoint(mouseEvent.clientX, 
            mouseEvent.clientY);
    if (targetElement)
    {
        // The onmouseout event will happen event when leaving an element inside the element 
        // the event is tied to.
        while (targetElement && targetElement != this.BaseElement)
            targetElement = targetElement.parentElement;
        if (targetElement != this.BaseElement)
            this.Close();
    }
}); 

By using an arrow function as the listener for the mouseout event, we can call the Close method of the class that this code is inside of, using the 'this' keyword, in order to hide this control.

The primary purpose of the Build method in the base class is to set the size of the base DIV element to the size of the parent TABLE element otherwise the width of the DIV element will expand to the width of the page client width. This is why the Build base class method needs to be called at the end of the Build method of the derived class, so that the UI has been built before resizing the outer DIV element.

Each control also has its own custom events and custom event handling. The only custom events currently
supported are 'Selected' and 'Close' and can be found in the ZenithEvent class. Here is the full implementation of the ZenithEvent class:

export class ZenithEvent
{
    public static EventType = { Selected: 1, Close: 2 };

    public eventType: number;
    public listener: Function;

    constructor (eventType: number, listener: Function)
    {
        this.eventType = eventType; this.listener = listener;
    }
} 

The EventType object literal acts as a kind of enum so that the type of event can be identified with pre-defined
text as in the following code which is used to add a function handler to the 'cbList' CheckBoxList:

cbList.addZenithEventListener(Zenith.ZenithEvent.EventType.Selected, 
    function (value, text, checked)
    { 
        alert(text + ' ' + (checked ? 'selected' : 'unselected')); 
    }
);  

The 'Selected' custom event supports a different set of listener parameters depending on the control. For example, for the CheckBoxList control like in the example above three parameters are passed to the listener function: the value of the selected item, the text of the selected item, and whether the item was checked or unchecked. The 'Close' event does not pass any parameters to the associate listener for all of the controls.

A few other goodies are worth noting.

The Calendar control uses a custom DateHelper class that can be found in the Calendar code file ZenithCalendar.ts. This small class provides some of the 'missing' features of the JavaScript Date type such as long and short day of week and month names and a function that returns the number of days in any month. The entire code for this is below.

class DateHelper
{
    public static MonthNames: string[] = ['January', 'February', 'March', 'April', 'May', 
        'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    public static MonthShortNames: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    public static DayOfWeekNames: string[] = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 
        'Thursday', 'Friday', 'Saturday'];
    public static DayOfWeekShortNames: string[] = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
    
    public static DaysInMonth(iMonth, iYear): number
    {
        return 32 - new Date(iYear, iMonth, 32).getDate();
    }

    public static toShortDate(date: Date): string
    {
        return date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString() + '-' +
            date.getDate().toString();
    }

    public static toLongDate(date: Date): string
    {
        return MonthNames[date.getMonth()] + ' ' + date.getDate().toString() + ', ' + 
            date.getFullYear().toString();
    }

    public static toShortDisplayDate(date: Date): string
    {
        return (date.getMonth() + 1).toString() + '/' + date.getDate().toString() + '/' + 
            date.getFullYear().toString();
    }
} 

The CheckBoxList class uses a custom class called List which can be found in the ZenithList.ts code file. This is a class I created in JavaScript earlier this year and ported to TypeScript. Since the CheckBoxList control doesn't really use much of the functionality available in this class, I won't go into detail about it here other than to say that the intent of it was to mimic the .NET List collection class with some LINQ-like functionality built-in.

Points of Interest

The following topics are not necessarily in any order; however, they are generally in the order of what I feel are the most important benefits (starting at the top) even though this is a partially subjective topic. Also, this is obviously not intended to be a full-scale tutorial or reference on TypeScript.

Namespaces

Even though the word 'namespace' is barely used in the TypeScript specification, the 'module' construct in TypeScript essentially provides this ability.

Example:

module Zenith 
{ 
     export class ListBox extends Zenith.ControlBase 
     { 
         public NumColumns: number = 1; 
     } 
}

In this example, the class ListBox is not part of the global namespace but is a type in the Zenith namespace. So, referencing this class outside of this module requires 'Zenith' to be prepended to the type as in the following:

var lstList = new Zenith.ListBox('baseElement'); 

Casting

In order to provide complete type-checking and IntelliSense, a language must have some form of type casting. Indeed TypeScript does provide this using the <> deliminators as in the following:

var table: HTMLTableElement = <HTMLTableElement>document.createElement('table'); 

Now, of course, IntelliSense can provide the available set of attributes and functions for an HTML table.

Referencing Other Files

Another facet of a language that is necessary to provide type-checking and IntelliSense is a way to 'include' or 'reference' another file containing the types, variables, methods, etc. used by your code. This is provided with the 'reference' declaration.

///<reference path='ZenithControlBase.ts'/> 

OOP

At this point, it is probably a good idea to reiterate the disclaimer made above in relation to object-orientation: any OOP functionality described here can be written in pure JavaScript. However, it is here where most developers (not JavaScript experts) get confused, and with good reason, as the way JavaScript provides object-oriented functionality is so unlike any other language.

Example:

class ListBox extends Zenith.ControlBase 
{ 
     static x: string = 'Test'; 
     public NumColumns: number = 1; 
     public ColumnSpace: number = 10; 
     private ItemList = new Zenith.List(); 
     constructor (baseDivElementId: string) 
     { 
           super(baseDivElementId); 
     } 
}

Most developers familiar with OOP should be able to easily understand this code and the OOP constructs in it. The 'class' keyword identifies a class, 'extends' provides inheritance, 'constructor' identifies the constructor, 'super' references the base class, 'static' provides static class members, and the 'public' and 'private' keywords provide encapsulation.

A few things are worth nothing here:

• Only one constructor is permitted.
• There is no way to 'protect' members of a base class. This is one thing I truly miss but I would imagine this will be the first thing implemented once version 6 of the ECMAScript language specification is ratified.

Function Scope

One very handy feature of TypeScript involves function scope and the 'this' keyword. Normal function declarations that are part of a class behave as expected where the 'this' keyword references the object instance of the class. More unexpectedly, TypeScript provides what is termed 'arrow' functions where the meaning of 'this' is changed to reference the enclosing script. You may be asking yourself how is this different than using 'this' in a normal class function. The answer becomes clear when using callback functions in a class; for example, when declaring a callback function for an event. Take this example from within a class function.

In JavaScript, the second 'this' would reference the HTML element that the event was assigned to, in this case 'tcell', and there would be no easy way to get a reference to the object instance, which is a more valuable reference when using OOP (the event object itself has a reference to the source HTML element).

History

• Initial version uploaded - 11/26/2012
• Added 'How It Works' section - 11/30/2012
• New Controls - 02/11/2013

I have added three new controls to this suite:

• Date Selector - allows the user to pick a date using month, day, and year drop down lists
• Menu - a (horizontal only for now) hierarchical menu with unlimited levels
• Context Menu - a hierarchical context menu with unlimited levels that is initiated with a right mouse button click

Both menu controls use the same menu class with the default being a normal menu but you can tell it to be a context menu using the second parameter of the constructor.

Just like all of the other controls in this suite, these new ones inherit from the same base class and are used similarly to all the other controls (instantiate, set appropriate properties, and call the Build method).