Now we turn our focus to our Calendar application example, which includes 4 different pages, canlendar.html as the top-level HTML document, which contains the CALENDAR.HTC HTC, While CANLENDAR.HTC has in turn included two individual HTC:day.htc and today.htc,calendar.html
The contents are as follows:
Click a day in the calendar to add or modify your schedule.
There are several important points you must focus on: first, namespace definition in the 〈html〉 tag, we need to use the namespaces defined in the HTC we are calling, the namespaces in CANLENDAR.HTC are: mycal, so the xmlns ID must appear in the tag.
The tag starts with a question mark and distinguishes it from a normal tag that requires the browser to import the specified HTC:CALENDAR.HTC,HTC to have multiple namespaces, so you need to specify the namespace (mycal) to use when importing:
One of HTC's main advantages is that browsers will suspend page parsing until all the input files have been imported. The asynchronous mechanism of page processing will cause many problems, the browser does not wait for the elements have been fully displayed before beginning to parse the page, as an example, you can create an object, and at the top of the text to access a method at the bottom of the page, if the object for some reason to be prepared, You will get an error indicating that the object does not exist or that the object does not support the method you are trying to access, and I believe you have already encountered this kind of thing! Whatever it is, huh? The import is synchronized, and the browser waits until the page is imported and the content is ready.
The only and important line for a page is to invoke the custom tag Mycal:calendar:
Because the page has been imported, the call will create a calendar as specified in CALENDAR.HTC.
You may have noticed that HTC can contain other HTC,CALENDAR.HTC including two other HTML components, all the dates for each month: DAY.HTC and TODAY.HTC that coincide with the current date, the following is the top 15 lines of CANLENDAR.HTC:
<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 of XML namespaces that the HTC will use. These namespaces include the one you want to use on this page, as well as the namespaces you need to invoke on the page (Anyday and today), noting that namespaces are not necessarily consistent with HTC file names. Next, we import these HTC:
? IMPORT namespace= "anyday" implementation= "DAY.HTC"/>
? IMPORT namespace= "Today" implementation= "TODAY.HTC"/>
When we parse to these rows, the browser waits until the file being imported is imported to continue page resolution (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, and between the opening and closing tags, you can attach events to the calendar tag. Event Oncontentready will be imported into the CALENDAR.HTC file and resolved, specifying the processing time is the function defined in javascript: Fninit ():
<script language= "JavaScript" >
<!--
function Fninit ()
{
Defaults.viewlink = document;
}
-->
</SCRIPT>
Viewlink The value specified is very important, it is the basis of the HTML component, it connects the HTML component and the page that calls the HTML component, defaults objects are different attributes and will be overwritten elsewhere, we give the Viewlink property is an HTML document object, Because of this connection, we can build HTC components and Include page visits.
We'll explain the layers of the calendar later. Note that although the same day box in the calendar is different from other days and empty boxes, we implement the precedence rule in the inclusion page, where the HTML component ignores any conflicting style definitions. The CALENDAR.HTC style is defined as follows:
<STYLE>
TD {
Background-color:tan;
width:50;
height:50;
}
</STYLE>
Now compare the definition with the calendar, only the empty box is the color is tawny, we call HTC ignores these definitions, the pages are called are embedded in the page customization. To downgrade the Today:day HTML component:
<today:day value= ' + dayofmonth + ' ></TODAY:DAY>
We simply passed in the first few days of the month, and the same call Anyday:day was simply passed in the first day of the month:
<anyday:day value= ' + dayofmonth + ' ></ANYDAY:DAY>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
