HTML Components: The Top-Level Page | WebReference

HTML Components: The Top-Level Page


HTML Components

The Top Level Page

Now we switch focus to our calendar example. This application consists of four different pages, calendar.html being the top-level HTML document. This page contains the HTC calendar.htc, which in turn contains two other HTCs: day.htc and today.htc. Let's look at calendar.html:

<HTML XMLNS:MYCAL>
<HEAD>
  <TITLE>Calendar Example</TITLE>
  <?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>
</HEAD>
<BODY>
<P>Click a day in the calendar to add or modify your schedule.</P>
<MYCAL:CALENDAR></MYCAL:CALENDAR>
</BODY>
</HTML>

There are several new features you need to pay close attention to. First is the namespace definition at the <HTML> tag. We need to use the namespace that is defined by the HTC we call. The namespace used in our HTC calendar.htc is MYCAL, so this is the XMLNS we need to enter at the <HTML> tag.

The <?IMPORT> tag starts with a question mark to distinguish it from a regular tag. This tag asks the browser to load the specified HTC, calendar.htc. An HTC may have multiple namespaces, so we need to specify which namespace we want to use during this import (MYCAL):

<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>

One of the main advantages of HTCs is that the browser halts its page rendering until the imported file is fully loaded. Many problems arise because of the asynchronous nature of the page processing. The browser does not wait for elements to be fully displayed when it parses an HTML document. You can create an object, for example, at the top of the document and try to access its methods at the bottom of the page, but if the object is not ready yet for some reason, you will get an error message telling you that the object does not exist or that it does not support the method you are trying to access. I am sure you can trace many problems you had in the past to this phenomenon. A good indication is when you get different behavior of the page when you work locally as oppose to over the Internet (because of the loading time difference). Anyhow, the ?IMPORT operation is synchronous and the browser does wait until the page is loaded and its content is ready.

The punch (and only) line of this page is the call to the custom tag MYCAL:CALENDAR: 

<MYCAL:CALENDAR></MYCAL:CALENDAR>

Since calendar.htc is already loaded, a call to this tag creates the calendar, as specified by this tag in calendar.htc. We'll see later in this column how to create the calendar itself.

Next: How to write the calendar HTC

https://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

Created: July 3, 2000
Revised: July 3, 2000

URL: https://www.webreference.com/js/column64/4.html