Home > Article > Web Front-end > HTML COMPONENTS Part 3

HTML COMPONENTS Part 3

黄舟Original: 2016-12-17 13:48:211200browse

===Top page===

Now we turn our focus to our calendar application example. The application includes 4 different pages. canlendar.html is the top-level HTML document, which contains calendar.htc HTC, and canlendar.htc in turn contains two other HTCs: day.htc and today.htc, calendar.html
The content is as follows:

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 points you must pay attention to: First, the namespace is defined in In the tag, we need to use the namespace defined in the HTC we want to call. The namespace in canlendar.htc is: MYCAL, so the XMLNS tag must appear in the 6a74014ee44f5deb5894267f99b68016 tag.
　　The f442b94949c0d646ac360291f638c46f tag starts with a question mark to distinguish it from other normal tags. This tag requires the browser to import the specified HTC: calendar.htc. HTC can have multiple namespaces, so you need to specify the one to be used when importing. Namespace (MYCAL):

d1da7a5118e510a4595ed5b5805823e1

　One of the main advantages of HTC is that the browser will suspend page parsing until all input files have been imported. The asynchronous mechanism of page processing will cause many problems. The browser does not wait for the element to be fully displayed before starting to parse the page. As an example, you can create an object and access a method at the bottom of the page at the top of the document. If the object is because Be prepared for some reason, you will get an error indicating that the object does not exist or the object does not support the method you want to access. I believe you have encountered such things! Regardless, ?IMPORT It's synchronous, and the browser waits until the page is imported and the content is ready.

　The only and important line on the page is to call the custom tag MYCAL:CALENDAR:

f815752b699473ba4718f31ac0c9b58ac315d85ac7fc8f273e9e4963bb4dd146

Since the page has already been imported, this call will create a calendar as specified in calendar.htc.

You may have noticed that HTC can contain other HTCs. calendar.htc contains two other HTML components, all the days of each month: day.htc and today.htc that is consistent with the current date. The following is canlendar.htc Top 15 lines:

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY> 
<HEAD> 
<?IMPORT NAMESPACE="ANYDAY" 
IMPLEMENTATION="day.htc"/> 
<?IMPORT NAMESPACE="TODAY" 
IMPLEMENTATION="today.htc"/> 

<PUBLIC:COMPONENT 
tagName="CALENDAR"> 
<ATTACH EVENT="oncontentready" 
ONEVENT="fnInit()"/> 
</PUBLIC:COMPONENT> 
<SCRipT LANGUAGE="javaScript"> 
<!-- 
function fnInit() 
{ 
defaults.viewLink = document; 
} 
// --> 
</SCRIPT>

The first line is in these XML namespaces that HTC will use. These namespaces include those used by this page itself, as well as namespaces that the page needs to call (ANYDAY and TODAY ), note that the namespace does not have to be the same as the HTC file name. Next, we import these HTCs:

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

When we parse these lines, the browser will wait until the file to be imported is imported before continuing the page parsing (synchronous import).

Then we define the CALENDAR custom tag:

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

PUBLIC:COMPONENT is used to describe the CALENDAR tag. Between the start and end tags, you can attach events to the CALENDAR tag. The event oncontentready will be in the calendar.htc file When all are imported and parsed, the processing time is specified by the function defined in Javascript: fnInit():

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function 
fnInit() 
{ 
defaults.viewLink = document; 
} 
// --> 
</SCRIPT>

The value specified by viewLink is very important. It is the basis of the HTML component. It connects the HTML component and calls the For HTML component pages, the defaults object has other attributes and will be overridden elsewhere. We assign the viewLink attribute to the HTML document object. Because of this connection, we can establish mutual access between the HTC component and the containing page.
　We will explain the layers of the calendar later. Note that although the day box of the current month in the calendar has different styles from other day boxes and empty boxes, we use the priority rule to achieve that in the containing page, the HTML component ignores any conflicting style definitions. The style definition of calendar.htc is as follows:

<STYLE> 
TD { 
background-color:tan; 
width:50; 
height:50; 
} 
</STYLE>

Now compare this definition with the calendar. Only the color of the empty box is tan. The HTC we called ignored these definitions, and the page being called has page customization embedded in it. The following calls TODAY:DAY HTML component:

d61cf43a855e052a93cad934d5c1e329df6879774f7e535618eec112bf43935a

　 We simply pass in the day of the month. The same call to ANYDAY:DAY also simply passes in the day of the month:

68ff40c1a4cfb4439ed76ebf0fb45b127710ec56a4b2af8032401628a11805db

The above is the content of HTML, components, and COMPONENTS. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML COMPONENTS Part 2Next article：HTML COMPONENTS Part 2

See more

HTML COMPONENTS Part 3

Related articles