[ASP.NET AJAX Client Component] NonVisual Components

Nonvisual components are directly inherited from the “Sys.Component” class and is not associated with visual elements. “Sys.Application” object is a typical example of an nonvisual component.  

1. Creating a Component Class

A component is just a class. Therefore you need to create a class first and then create a component with the class.

  • Register a namespace if necessary
  • Define the constructor function and intialize the base class
  • Override the “initialize()” and “dispose()” method defined in the base class
  • Add custom methods and properties
  • Register a clss with a base class “Sys.Component
  • Create a component using the “$create()” method

As an example, Let’s create a component that says “Hello, World“.

Type.registerNamespace('MyAjax');
MyAjax.HelloWorldComponent = function () {
  MyAjax.HelloWorldComponent.initializeBase(this);
  this._greetMessage = 'Hello, World';
}
MyAjax.HelloWorldComponent.prototype = {
  initialize: function () {
    MyAjax.HelloWorldComponent.callBaseMethod(this, 'initialize');
    alert('Being initialized');
  },
  dispose: function () {
    alert('Being Disposed');
    MyAjax.HelloWorldComponent.callBaseMethod(this, 'dispose');
  },
  greet: function() {
    alert(this._greetMessage);
  }
}
MyAjax.HelloWorldComponent.registerClass('MyAjax.HelloWorldComponent', Sys.Component);

2. Creating a Component

Just creating a class derived from the “Sys.Component” class is not enough to upgrade a class to a component.

You need to do the following 4 steps:

  • Create an object
  • Set the component id
  • call the initialize() method
  • add the component object to a container (usually the “Sys.Application” object)
var helloWorldCmp = new MyAjax.HelloWorldComponent();
helloWorldCmp.set_id('HelloWorld');
helloWorldCmp.initialize();
Sys.Application.addComponent(helloWorldCmp);

This works Ok. But it is cumbersome to do all these steps whenever you create a component. Luckily, ASP.NET AJAX library provides a function to the job in a single call.

The “Sys.Component” class has the “create()” method and you can call “create()” method using any component object. in most cases, you are going to use the “Application” object. Therefore, an alias or a shortcut “$create()” is provided for you to refer to “Sys.Application.create()” method.

create(type, properties, events, references, element)

  • type: the type of the component to create
  • properties: a JSON object that describes the properties and their values
  • events: a JSON object that describes the events and their handlers
  • references: a JSON object that describes the properties that are references to other components
  • element: the DOM element that the component should be attached to
$create(MyAjax.HelloWorldComponent, { 'id': 'HelloWorld' }, null, null, null);

3. Accessing Components

To access an component you need to use the “Sys.Application.findComponent()” method. The alias “$find()” is provided for you as a shorcut.

findComponent(id, parent)

  • id: a string that contains the ID of the component to find
  • parent: the component that contains the component to find, This papameter is optional. If it is not specified, the search starts from the top-level component (Application)
<input type="button" id="clickBtn" value="Click Me" />
function pageLoad() {
  $addHandler($get('clickBtn'), 'click', onBtnClick, true);
}
function onBtnClick() {
  var helloWorld = $find('HelloWorld');
  helloWorld.greet();
}

Note that the “$get()” and “$find()” do the different tasks. The “$get()” (Sys.UI.DOMElement.getElementById()) method returns a reference to a DOM element. The “$find()” method returns a reference to a component.

4. PropertyChanged Event

Sometimes it is very helpful to monitor the status of a property. You can attach the “PropertyChanged” event to a component and handle any property changes.

  • Add get_ and set_ methods for properties that you want to monitor
  • In the set_ method, call the “raisePropertyChanged()” method; this will raise the event
  • Register an event handler using the “add_propertyChanged()” method of the component
MyAjax.HelloWorldComponent = function () {
  MyAjax.HelloWorldComponent.initializeBase(this);
  this._greetMessage = 'Hello, World';
}
MyAjax.HelloWorldComponent.prototype = {
  ...
  get_greetMessage: function() {
    return this._greetMessage;
  },
  set_greetMessage : function(value) {
    if (this._greetMessage != value) {
      this._greetMessage = value;
      this.raisePropertyChanged('greetMessage');
    }
  },
  greet: function() {
    alert(this._greetMessage);
  }
}
function pageLoad() {
  $addHandler($get('clickBtn'), 'click', onBtnClick, true);

  MyAjax.HelloWorldComponent.registerClass('MyAjax.HelloWorldComponent', Sys.Component);
  $create(MyAjax.HelloWorldComponent, { 'id': 'HelloWorld' }, null, null, null);

  var helloWorld = $find('HelloWorld');
  helloWorld.add_propertyChanged(onPropertyChanged);
  helloWorld.set_greetMessage('Hello, Universe');
}
function onPropertyChanged(sender, e) {
  if (e.get_propertyName() == 'greetMessage') {
    alert ('New value for the GreetMessage Property: ' + sender.get_greetMessage());
  }
}
function onBtnClick() {
  var helloWorld = $find('HelloWorld');
  helloWorld.greet();
}

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