Create custom ASP. net ajax non-visualized client components (1)

Bkjia.com exclusive featureDraft] I. Introduction

In this article, we will discuss how to create an ASP. net ajax non-visualized client Component derived from the base class Sys. Component and demonstrate its usage on Web pages.

Specifically, you will learn how to implement:

◆ Use prototype design mode to define a non-visualized component class in JavaScript.
◆ Register a non-visualized Component as a class derived from the base class Component.
◆ Initialize the base class-Component of the non-visual Component and call its method.
◆ Create an attribute that can inspire a change notification.
◆ Create a complete Demo. Timer non-visual component.
◆ Events that use this component and bind it to a Web page.

Note: In ASP. net ajax 1.0 framework to build client components, in addition to the methods described in this article, these components are derived from Component), there are two other types of extended basic Component functions ASP. net ajax client component object: Derived from Sys. UI. behavior and derived from Sys. UI. control. The following table lists the differences between Component, Behavior, and Control.

 

In addition, to run the example in this article, you must meet the following conditions:

◆ A test website;
◆ Install the Microsoft ASP. net ajax 1.0 framework, which will not be described here.

2. Basic functions of non-visual client components

An ASP. net ajax non-visualized client component encapsulates JavaScript code that is reused in applications. A typical example of a non-visualized component is a timer component that fires events at intervals.

Derived from the Component base class, your custom components can automatically inherit many of these features, including:

◆ A cross-browser model-the processor used to manage events bound to client objects.
◆ Automatically register the component in the client application as a releasable object that implements the Sys. IDisposable interface.
◆ A notification event is triggered when the attribute changes.
◆ Implement batch processing of Component Attribute settings, which is more effective in script size and processing time than using the get and set accessors of a single attribute to process all logics ).
◆ Reload the Sys. UI. Control. initialize method to initialize all attributes and event listeners.

3. Implement a client Component derived from Component

The following list summarizes the steps required to implement a custom client Component derived from Component. Later, we will make a detailed analysis.

◆ Define a component class in prototype design mode.
◆ Initialize the base component instance of the component.
◆ Expose all attribute accessors and selectively trigger a propertyChanged notification event.
◆ Reload the dispose method to release resources, such as the clearing event processor.

1) define a component class using Prototype design mode

An ASP. net ajax client class that includes a component class) is defined using the prototype design mode in JavaScript. The following lists the steps required to define a component class using prototype design patterns:

◆ Register the namespace of your component class.
◆ Create the constructor function of the component, define any private fields in the constructor function, and set their initial values.
◆ Use prototype design mode to define the prototype of the component.
◆ Register the Component function as a class derived from Component.

2) initialize the base class

Any component class derived from a base component class, such as a component, control, or behavior, must initialize its base class in its constructor. This allows the base class object to execute initialization tasks-for example, registering the component as a releasable object-using the Sys. Application instance.

In the constructor function of this component, you can call the inherited Type. initializeBase method.-typically, it is performed before any other code in the constructor is run. The initializeBase method initializes the base type of a registration class. A non-visualized Component class is registered as a class-with a Component base type. When the Component base class is initialized, its method can be used in this Component, and it will automatically register this Component as ASP.. net ajax applications.

The following example shows the constructor function of a non-visualized Component derived from Component. The constructor calls its inherited initializeBase method.

Samples.SimpleComponent = function() {   Samples.SimpleComponent.initializeBase(this); }

3) define attributes and trigger propertyChanged notifications

Generally, you need to define attributes in the class of the component to which the page developer binds. In addition, you can also choose to trigger the propertyChanged notification event from the attributes of your component. Then, you can bind your component page developer to these events. An ASP. net ajax Component derived from Component, Behavior, or Control inherits the raisePropertyChanged method. Calling this method will trigger a propertyChanged event.

4) initialize attributes and Event Listeners

If your custom component must initialize any attribute or event listener, you can reload the Sys. UI. Control. initialize method in the prototype of the component. For example, a non-visual Component derived from Component may delegate an event-for example, Window. onFocus. Typically, a client Control derived from the Control base class binds any proxy to its DOM element events and sets these DOM element attributes as initial values. In the last step, you need to call the initialize method of the base class to make the base class of the component complete initialization.

5) release resources

If your custom component must release resources before releasing the component, You need to reload the dispose method and release the resource in this method. This ensures that the resource is released immediately before the component is released. Resources that should be released may include proxies used to bind to DOM events. By removing the cyclic reference between the DOM element and the component object, you can completely delete the object from the memory.

Article content]

Page 1: Basic functions of non-visual client components

Page 2: Implement a client Component derived from Component

Page 3: Apply components on the Web page