[ASP.NET AJAX Client] Type System

Even though JavaScript does not support built-in OOP constructs, you  can simulate OOP using function constructors, “this” keyword, and the “prototype” object. (Please read my post — >> Objects and Classes ).

ASP.NET AJAX Client Library provides the familiar OOP constructs, which is called the “Type System”.   

 

1.  Type System

ASP.NET AJAX Library leyts you create the following OOP constructs:

  • Namespaces
  • Classes
  • Interfaces
  • Enums

 

2. Type class

The “Type” class provides a type-reflection system for JavaScript OOP functionality. It is global and not part of a namespace.

– Type Checking Methods –

  • Type.isClass(type): indicates whether the specified type is a class
  • Type.isEnum(type): indicates whether the specified type is a enumeration
  • Type.isInterface(type): indicates whether the specified type is an interface
  • Type.isNamespace(object): indicates whether the specified object is a namespace
  • <Type>.isInstanceOfType(object): indicates whether the specified object is an instance of a specified class
  • <Type>.inheritsFrom(<parentType>): checks the inheritance relationship
  • <ClassType>.implementsInterface(<InterfaceType>): determines whether a class implements a specified interface type
  • <InterfaceType>.isImplementedBy(object): determines whether an instance implements an interface

– Type Registering Methods –

  • <typeInstanceVar>.registerClass(typeName, baseType, interfaceTypes): registers a class
  • <typeInstanceVar>.registerEnum(name, flags): registers an enumeration
  • <typeInstanceVar>.registerInterface(typeName): registers an interface
  • Type.registerNamespace(namespacePath): creates a namespace

– Type Information Methods –

  • <typeInstanceVar>.getBaseType(): returns the base class
  • <typeInstanceVar>.getInterfaces(): returns an Array object that contains the list of interfaces that the type implements
  • <typeInstanceVar>.getName(): returns the name of the type
  • Type.getRootNamespaces(): returns an Array object containing references to all the root namespaces of the client application

 

3. Reflection

The main benefit to use “Type System” in the ASP.NET AJAX Library is that it allows us to perform reflection on client types.

When you work with the JavaScript object directly, it is hard to check the type at runtime. For any object types, the “typeof()” operator returns just “object”, which is not useful at all.

By registering an object as a class, interface, or enum, you can easily verify the type at runtime.

 

4. Simple JavaScript Reflector

The following code shows a list of classes and interfaces using reflection technique.

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
  <asp:ScriptReference Path="~/Chapters/AjaxTest/Reflector.js" ScriptMode="Release" />
</Scripts>
</asp:ScriptManager>
<div>
Namespace:
<select id="ddlNS">
  <option>Select a Namespace</option>
  <option>Sys</option>
  <option>Sys.Net</option>
  <option>Sys.UI</option>
  <option>Sys.Serialization</option>
  <option>Sys.WebForms</option>
</select>
</div>
<br /><br />
<div id="reflectiondata">
</div>
//Reflector.js
function pageLoad() {
  $addHandler($get('ddlNS'), 'change', onNSChange, true);
}
function onNSChange() {
  var ddl = $get('ddlNS');
  var dataArea = $get('reflectiondata');
  var classes = [];
  var interfaces = [];

  if (ddl.selectedIndex == 0) {
    dataArea.innerHTML = '';
    return;
  }
  var ns = eval(ddl.options[ddl.selectedIndex].text);
  for (var attr in ns) {
    var member = ns[attr];
    if (typeof (member) == 'function') {
      if (Type.isClass(member)) {
        Array.add(classes, member.getName());
      } else if (Type.isInterface(member)) {
        Array.add(interfaces, member.getName());
      }
    }
  }
  var sb = new Sys.StringBuilder();
  sb.append('<b>Interfaces:</b><br />');
  sb.append(interfaces.join('<br />'));
  sb.append('<br /><br /><b>Classes:</b><br />');
  sb.append(classes.join('<br />'));
  dataArea.innerHTML = sb.toString();
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s