June 26, 2000 - Element Components' Terminology | WebReference

June 26, 2000 - Element Components' Terminology

Yehuda Shiran June 26, 2000
Element Components' Terminology
Tips: June 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The subject of Element Components is quite complex. To elaborate, an element component is like a standalone library that you can call from your page. The name of the component is given by its namespace. An element component may be regarded as a namespace. Each element component includes custom tags and behaviors that are attached to these tags. Two different element components may have different tags with the same name. Therefore, any reference to an element component's tag must be prefixed with its namespace. Behaviors were introduced in IE 5.0 for intrinsic HTML tags. IE 5.5 extends behaviors to custom tags, which makes element component a more robust feature. Behaviors, in general, can add properties, methods, and event handlers to tags. Sometimes, you'll see the term Element Behaviors. These are behaviors assigned to custom tags, creating element components. Let's look at some code:

Here are the top six lines of an element component, in today.htc:

<HTML XMLNS:TODAY>
<HEAD>
<PUBLIC:COMPONENT tagName="DAY">
  <PROPERTY NAME="value"></PROPERTY>
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"></ATTACH>
</PUBLIC:COMPONENT>

The name of the element component (namespace) is TODAY. There is one custom tag defined, DAY. The behavior adds one property to it (value) and one event (oncontentready).

Now, suppose you want to call this element component from another page, calendar.htc. You have to make sure its header includes its own namesapce, as well as the one positioned (called) on the page. In this case, its own namespace is MYCAL, and it calls ANYDAY and TODAY:

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY>

Somewhere, you need to load the page today.htc before you use it in calendar.htc:

<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

And, finally, you position it somewhere on the page:

<ANYDAY:DAY value=31></ANYDAY:DAY>