June 23, 2000 - HTML Components | WebReference

June 23, 2000 - HTML Components

Yehuda Shiran June 23, 2000
HTML Components
Tips: June 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

HTML Components are encapsulated HTML content that can be rendered in other HTML document, in Internet Explorer 5.5 and above. Before HTML Components, the only way to create custom controls for use in HTML documents was through Microsoft ActiveX Controls. HTML authors had to use the OBJECT tag to include ActiveX Controls on their pages. We covered ActiveX Controls in several columns. Columns 21, Embedding Sound in Web Pages, Part I, and 22, Embedding Sound in Web Pages, Part II explain how to embed sound objects in your page. In Column 55, OLE Automation in JavaScript, we taught you how to call external application such as Word and Excel (encapsulated in ActiveX Controls) from your script. And finally, we showed you how to embed a streaming media jukebox in Column 51, A Streaming Media JukeBox, Column 52, A Streaming Media JukeBox, Part II: Netscape, Column 53, A Streaming Media JukeBox, Part III: Browser-Independent, and Column 54, A Streaming Media JukeBox, Part IV: F-W Properties.

One of the drawbacks of ActiveX Controls is that they require installation on the client machine before usage. HTML Controls, on the other hand, are downloaded to the client machine with the primary document that the user downloads any way. HTML Controls are also more attractive to DHTML authors because they can develop their own controls and components in a language they are already familiar with, DHTML.

HTCs provide a simple mechanism to implement DHTML behaviors in script. An HTC file is nothing but an HTML file, saved with an .htc extension, that contain scripts and a set of HTC-specific custom elements that expose properties, methods, and events that define the component. All HTC elements are accessible from script as objects using their ID attributes. This allows all attributes and methods of HTC elements to be dynamically manipulated through script.

Next, we show the CALENDAR custom tag:

<PUBLIC:COMPONENT tagName="CALENDAR">
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

The PUBLIC:COMPONENT tag is used to declare the new CALENDAR tag. In between the opening and closing tags you can attach events to the new CALENDAR tag. The event is oncontentready which is fired when the imported calendar.htc file is fully loaded and rendered on the containing page.