Advanced Articles for developing intelligent Web applications with Ajax (2)

Ajax|web| Program | Advanced • Standard HTML check box does not support the checksum event to allow the cancellation of a GUI behavior that may exist in some applications .

Now, let's look at a sample usage of the control that is being built, which may be used in the following situations:

Label= "show Details:" onvalue= "Y" offvalue= "N"/>

In addition, our controls will support Onitemchanging event and notification event onitemchanged.

Defining Custom Labels

Structurally, a custom tag is a file with a HTC extension-it describes its properties, methods, and events between the and flags.

To define a custom checkbox tag, we create a file checkbox.htc-in the following code fragment where the first line is responsible for setting the label name of the component:

We put all the other attributes of the component here We put all the other methods of the component here We'll put the components here in all the other events that the application activates We'll put the other events that the component is dealing with here.

Using custom Labels

Although the content of the HTC file is more important, it has nothing to do with the file name . It is noteworthy that the URL pointing to the HTC file needs to be specified using the import directive-this must be done before the corresponding custom tag first appears (on the page) . below is the simplest possible page to use a custom check box may look like-assuming that the page and HTC files are processed under the same folder:

? IMPORT namespace= "MyNS" implementation= "CHECKBOX.HTC"

Notice how the Custom checkbox is mapped to a Non-default namespace "MyNS" in an open HTML tag . This import instruction implements to load HTC synchronously into the browser's memory and also instructs the browser how to implement name determination for the appropriate namespace (HTC to namespace association may be many-to-many).

Customizing the Label Builder

The best way to initialize HTC is to handle Oncontentready events once it is loaded . so we can define the processor function--for the sake of clarity, we call it the constructor:

The logic of the constructor () is simple: Connect a regular HTML check box and an HTML tag sequentially, based on the value of the attribute Labelonleft (see the property definition below):

function Constructor () { We will add an HTML check box and tag to the element body See Listing 2 for a detailed scenario }

Defining Custom Label Properties

To define the property labelonleft, we add a row to the section:

Note that this property does not contain getter and/or setter methods . attributes Onvalue and Offvalue not only provide mappings from check box states to a business domain, but also do not require getters and setters:

However, the attribute checked is defined with two getter and setter:

Therefore, we have established the definitions of the above two methods in the

var _value; function putchecked (newvalue) { Value = (newvalue?onvalue:offvalue); } function getchecked () { return (_value = = Onvalue); }

Vi. Defining events for custom tags

Let's look at the definition of onitemchanging and onitemchanged events and how these events are fired and handled within the setter of the Value property (see Listing 2 in the attached source code). Method Putvalue () There are a few interesting places to be interested in . First, you can call this method during the parsing of the checkbox label-just specify the Htmlvalue property . explains why we create a separate logical branch for unstructured objects-to differentiate the construction process from a response to a user keystroke . Second, here we show the creation and processing of custom event onitemchanging-it allows the application to cancel the behavior . Note that in this way, either keystroke or programmatic implementation of the assignment can achieve the cancellation purpose .

Event cancellation

To cancel an event, an application should intercept the event and set Event.returnvalue to False. The following code fragment shows how the application implements the Cancel event procedure:

Cbx_1::onitemchanging () { . . . . . if (cannotbeallowed) { Event.returnvalue=false; . . . . . }

If the event is not canceled, Putvalue () sets the checked property of the inner plain HTML checkbox to each corresponding current value-if it equals onvalue, the Inner check box is selected and if it equals offvalue (no third option exists), check box is not selected (For the complete list, see Listing 2 in the source code attached to this article) .

The HTML insider of the check box

The drawing of our controls is implemented through the Assistant function AddLabel () and AddCheckBox () and is invoked from within a constructor () . These functions inject HTML into the innerHTML of the element. a simplified form of this type of injected HTML is as follows:

show Details:

Here, UniqueID is the only (in one page) string generated by IE, which is used to identify instances of HTC .

Vii. Re-encapsulation

There is a disadvantage in our checkbox . in the way we built it, the HTML injected during constructor () will be attached to the DOM of the page hosting the HTC. also, global JavaScript variables like_value belong to the global scope of the document in which they are located . This is dangerous because we stumble across the possibility of naming conflicts: The most obvious scenario is to use multiple instances of the same component . This also leads to the possibility that our controls might accidentally refer to other objects with the same name, and vice versa .

For simplicity, a special mechanism is needed to start a truly modular approach to object authorization . Fortunately, HTC Technology supports a smart answer-viewlink.

The easiest way to declare a control as encapsulated is to put an extra declaration between the open and closed public:component tags:

The control becomes encapsulated immediately, and it has its own HTML document tree-the atomic component of the main document . each instance of the object has a collection of its own instance values and only public methods and properties can be accessed from outside code . in other words, the viewlink mechanism fully initiates the design and implementation of complex Web applications-by using a truly OO component-based approach .

In particular, we can simplify the code-by removing the UniqueID suffix from the definition of the internal check box and the HTML tag, because we are no longer worried about naming conflicts . Therefore, we can replace the following line:

Eval (' Cb_ ' +uniqueid). Checked = (_value = = Onvalue);

Use

cb.checked = (_value = = Onvalue);

and change AddCheckBox () and AddLabel () accordingly.

Viii. Conclusion

Now that the Ajax race has just begun, there is no AJAX standard and there is no readily available RAD tool that you can rely on to build your application . While it may take a long time for software vendors to create such a robust development platform, Ajax enthusiasts have begun to prepare for the encapsulation of reusable blocks of code into commercial components through well-defined APIs .

Navigating in this direction, this article summarizes the Ajax language of OO "power"-javascript. In addition, an available component-authorization policy-client-side custom label technology is also presented . We have also provided a downloadable instance of an extensible binding instance for Mozilla browsers while describing only the specific custom tags of IE .

• Ajax: A new way to build Web apps
• Discussion on the error handling mechanism of AJAX (2)
• Discussion on the error handling mechanism of AJAX (1)
• First experience. NET Ajax Brushless New technology
• A brief analysis of Ajax development Technology in Rails system (4)