One of HTML Components (HTML Components)
2004-06-17 10:55:27
HTML Components is one of the main extensions of IE5.0. It is also the most revolutionary, Microsoft's intentions use HTML components to replace ActiveX controls, like Active controls, HTML components are self-sustainable enclosed objects, can be once Develop any use, there are many benefits to using the HTML components, this article will reveal some of them!
The HTML component has brought a lot of new terms, ideas, objects, methods, and properties. I will accept these through a calendar application, this calendar application shows the current month, the current date is displayed, and the current date is displayed.
==== HTML behavior and HTC behavior ===
The HTML component encapsulates HTML content and can be inserted into other HTML documents. Before the HTML component, the only way to use custom control in the HMTL document is to use Microsoft ActiveX controls. One of the shortcomings of ActiveX controls is that the client must install HTML control before use, and on the other hand download the main page to the client. For DHTML's authors, HTML controls are more attractive because they can develop their own controls and components in the language they are familiar with, and HTC provides a simple mechanism to implement DHTML behavior in the script. An HTC file and HTML file do not have any difference, and ".htc" is a suffix, which includes scripts and a series of HTC custom description elements that define the properties, methods, events, etc. of HTML components, all HTC elements pass objects. The id attribute is used as an object in the script, and all methods and properties can be dynamically operated in the script.
You can use HTC to implement the following behavior:
* Set the properties and methods. Definition through "Property" and "Method" element
* Setting a custom event. Implement the "Event" element, "Fire ()" method is used to release the event,
Set the event environment via the "CreateEventObject () method.
* Access the DHTML object model of the HTML page that contains the HTC, use the HTC's "Element" object, return
An additional behavior element, using this object, HTC can access the object model (attributes, methods, events) that contains the text and its object model (attribute, method, event).
* Take a notification, implement the "attach" element, the browser not only informs the HTC standard DHTML event, but also
Know HTC two special events: OnContentReady events and the onDocumentReady event.
HTC encapsulates the definition of behavior. The first appearance of behavior is in IE5.0. The advanced behavior package in HTC is inhane and elemental mark separation. In IE5.0, the behavior in the script can be separated from the elements. Come out, and in IE5.5, the elements cannot be separated from their original behavior.
HTML Components (HTML Components)
2004-06-17 10:55:14
=== Define the tag and namespace ===
The basis of HTC is custom tag, and the first appearance of custom tags is in IE5.0, which allows the Web author to define a textbook structure through a series of styles associated with the structure, for example: You can define a new tag.
@Media all {
DOCJS /: Right {text-align: right; width: 100}
}
Style>
HEAD>
Read Doc Javascript's Column, Tips, Tools, and Tutorials
Docjs: Right>
Body>
Html>
In Internet Explorer, you want to define custom tags for the page, you must provide namespaces for this tag, and custom tags are XML namespaces based on XML symbols, as shown below. We use DOCJS namespace:
XMLNs is an abbreviation for XML NameSpace. I define a custom tag called Right. To use this tag, you must add the correct XML namespace prefix before the tag: DOCJS: Right, if the namespace is not defined, the document parsing When the custom tag is handled as an unknown marker although there is an unknown mark, it does not cause errors, not affecting the other tag, and there is no behavior to be applied there, you can define multiple namespaces in a single HTML tag. :
HTML Components (HTML Components)
2004-06-17 10:55:00
=== The top page ===
Now let's turn our focus to our calendar application example, which includes 4 different pages, canlendar.html is the top HTML document, which contains Calendar.htc HTC, and canlendar.htc has in turn contain two other things HTC: day.htc and today.htc, calendar.html
The content is as follows:
Import namespace = "mycal" Implementation = "Calendar.htc" />
HEAD>
Click a day in the calendar to add or modify your schedule. P>
Body>
Html>
There are several points, you must focus: First, namespace definitions in the tag, we need to use the namespace defined in the HTC we want to call, in the canlendar.htc namespace is: Mycal, so The XMLNS ID must appear in the tag.
IMPORT> Tags Started by Questions and other normal tags, which requires the browser to import the specified HTC: Calendar.htc, HTC can have multiple namespaces, so you need to specify the namespace to use when importing (MyCal):
Import namespace = "mycal" Implementation = "Calendar.htc" />
One of the main advantages of HTC is that the browser will have been resoluntary until the input file is imported. The asynchronous mechanism for page processing will result in many problems, and the browser does not have the elements that have been fully displayed to start the parsing page. As an example, you can create an object, and access a method at the bottom of the page at the top of the text, if the object is Some reasons are ready, you will get an error indication that there is no way to do or does not support you to access the method, I believe that you have already encountered such a thing! No matter what this is the case, IMPORT is synchronized, and the browser will wait for the page to import and ready. The only page of the page and the important line is to call the custom tag MyCal: Calendar:
Because the page has been imported, the call will create a calendar like it is specified in Calendar.htc.
You may have noticed that HTC can include other HTCs, Calendar.htc includes two other HTML components, all dates per month: day.htc and Today.htc consistent with the current date, the following is the top 15 of Canlendar.htc 15 Row:
Import namespace = "anyday" importation = "day.htc" />
Import namespace = "today" type = "Today.htc" />
Public: Component>
Function Fninit ()
{
DEFAULTS.VIEWLINK = Document
}
// ->
Script>
The first line will use the XML namespace used by these HTCs. These namespaces include this page yourself to be used, including Nyday and Today, which need to call, and note that namespace does not have to match the HTC file file name. Then we import these HTCs:
Import namespace = "anyday" importation = "day.htc" />
Import namespace = "today" type = "Today.htc" />
When we resolve these lines, the browser will continue to introduce files to be imported to continue page resolution (synchronous import).
Then we define the Calendar custom tag:
Public: Component>
Public: Component is used to describe Calendar tags, between start and end tags, you can attach events to the Calendar tag, and event onContentReady will be imported in the Calendar.htc file and is parsed, the specified processing time is defined. Functions in JavaScript: Fninit ():
Function Fninit ()
{
DEFAULTS.VIEWLINK = Document
}
// ->
Script>
ViewLink specified is very important, it is the foundation of the HTML component, which is connected to the HTML component and calls the HTML component, which has other properties and will be overwritten in other places. We give the ViewLink property to HTML. Document objects are precisely because of this connection, we can establish an HTC component and include page visits.
We will explain the layer of the calendar later. Note that although the style of the air frame is different in the day frame and other ski frames in the calendar, we are implemented by priority rules, and the HTML component ignores any mutually conflicting style definitions. The style of Calendar.htc is defined as follows:
Td {
Background-color: TAN;
Width: 50;
HEIGHT: 50;
}
Style>
The definition and calendar is now compared, only the empty box is yellow, and the HTC we call ignores these definitions, and the page being called is embedded. The following calls: day html components:
We are just a simple introduction in the month of the month, the same call Anyday: day is also the first few days in which it is incoming the month:
HTML Components (HTML Components)
2004-06-17 10:54:43
=== Writing calendar one ===
When Calendar.html calls MyCal: Calendar, the calendar in the month will be displayed on the page, and the function setcal () is the primary block, which initializes some variables and calls the DrawCal () function. We also use three other functions: getMonthname (), getDays () and leafyear (). Let us start from the last function:
The getDays () function receives the value and which year value, and builds an array of 12 elements to store the monthly days. Which year is used to decide whether it is a leap year, in the middle of the year 29 days, Not the leap year is 28 days. This function returns the number of days of the specified month.
The following is getDays ():
Function getDays (Month, Year) {
// Create Array to Hold Number of Days in Each Month
Var ar = new array (12);
Ar [0] = 31; // january
Ar [1] = (Leapyear (YEAR))? 29: 28; // February
Ar [2] = 31; // march
Ar [3] = 30; // april
Ar [4] = 31; // Mayar [5] = 30; // june
Ar [6] = 31; // july
Ar [7] = 31; // August
Ar [8] = 30; // september
Ar [9] = 31; // october
Ar [10] = 30; // November
Ar [11] = 31; // decEmber
// Return Number of Days in the specified month (parameter)
Return Ar [Month];
}
If the specified number of years can be removed, the LeepYear () function will return "true", otherwise returns "false":
Function Leepyear (Year) {
IF (Year% 4 == 0) // Basic Rule
Return true; // is leap year
/ * else * / // else not needed when statement is "return"
Return false; // is not Leap year
}
GetMonthname () function returns the name of the specified month:
Function getMonthname (Month) {
// Create Array to Hold Name of Each Month
Var ar = new array (12);
Ar [0] = "January";
Ar [1] = "february";
Ar [2] = "march";
Ar [3] = "April";
Ar [4] = "may";
Ar [5] = "june";
Ar [6] = "july";
Ar [7] = "August";
Ar [8] = "september";
Ar [9] = "october";
Ar [10] = "november";
Ar [11] = "decEmber";
// Return Name of Specified Month (Parameter)
Return Ar [Month];
}
The setCal () function is the main module and we call it on the first line of the script. This function is the day (now), and a DATE object is established in the first day of the month (firstdayInstance). With these objects, the setCal () function parses all the information about the first day of a month, the day, and the last day.
Function setcal () {
// Standard Time Attributes
Var now = new date ();
Var year = now.getfullyear ();
VAR MONTH = now.getMonth ();
VAR MONTHNAME = GetMonthname (Month);
Var Date = now.getdate ();
Now = NULL;
// Create Instance of First Day of Month, And Extract The Day on Which It Occurs
Var first Date (Year, Month, 1);
Var firstday = firstdayInstance.getday ();
FirstdayInstance = null; // Number of days in current month
Var days = getDAYS (Month, Year);
// Call Function to Draw Calendar
Drawcal (Firstday 1, Days, Date, Monthname, Year);
}
HTML Components (HTML Components)
2004-06-17 10:54:27
The AnyDay component is defined in DAY, HTC, which is a package of the calendar unit. The name of the component is determined by the XML namespace defined in the first line.
As can belenaar.htc, you only have a namespace definition because it doesn't have to call other HTCs on this page, that is, the HCT is a leaf HTC, where we define the custom label is DAY, and we also define it Behavior, in fact, the definition of HTML components is the definition of custom label behavior, which includes an attribute and an event:
Public: Component>
Pay attention to the event onContentReady, when its caller Calendar.htc requires importing day.htc and is fully imported, the event will be generated, the handler is fninit (). Let's take a look at it:
Function Fninit () {
Document.body.innerhtml = element.value;
Document.body.classname = "clsday";
DEFAULTS.VIEWLINK = Document
Element.Appointments = ""
Element.date = element.value;
}
Fninit () demonstrates a lot of important HTC chapters. The first line specifies the ELEMENT.VALUE to the InnerHTML property of the call page. The HTML component is always encapsulated in the ELEMENT object. The value attribute is generally defined in the Property tab, as a reminder, the actual value is incorporated from the call page, canlendar.htc:
Text = '
The unit style is specified in the second line:
Document.body.classname = "clsday";
Styles CLSDay defines elsewhere at this page:
. clsday {
Width: 50;
HEIGHT: 50;
Background-color: lightyellow;
Align: center;
Text-align: Right;
}
Style>
Note that the desired yellow dates in the calendar, which proves that the specified mode of the HTC format is dominated by its caller, namely: Calendar.htc.
FNInit () Third line Set the ViewLink property of the default object, the ViewLink property is the foundation of the HTML component, which makes an HTC document (day.htc) is visible to another HTML component (Calendar.htc). This is ViewLink Setting: defaults.viewLink = document;
Note that you need to join the entire Document object. The last two lines of Fninit () initialize the two internal properties we will explain later:
Element.Appointments = ""
Element.date = element.value;
For its own display, DAY HTML components and mouse click related:
When the day was clicked, the user was reminded to add his or her dating, or to modify the already existing date:
Function fnshowapp () {
NewAppointments = prompt ("Add your appointment:", Element.Appointments;
IF (NewAppointments! = null) Element.Appointments = NewAppointments;
Document.body.innerhtml = '' element.date ' font>' "<" ' element.appointments ' Font> ';
}
The input mechanism here is very original, and the user adds a new line tag (
) in the appointment designation, otherwise they will be displayed in one line. Final InnerHTML is the connection link for Date data (Element.date) and date designation.
Today HTML Components (Today.htc) and AnyDay Components (Day.htc) are very similar. The only difference is that the style fast background-color is PINK instead of lightyellow, and the font color is Blue instead of RED.
Note The current date in the calendar is a blue word on a background of pink (pink).
The next section will list the full code of the calendar we talk about and a calendar code that does not implement the HTC component method.
HTML Components (HTML Components)
2004-06-17 10:54:04
==== Calendar main page ===
Import namespace = "mycal" Implementation = "Calendar.htc" />
HEAD>
Click a day in the calendar to add or modify your schedule. P>
Body>
Html>
=== Calendar htc ===
Import namespace = "anyday" type = "day.htc" /> Import namespace = "Today" type "type" = "today.htc" />
Public: Component>
Function Fninit () {
DEFAULTS.VIEWLINK = Document
}
// ->
Script>
Td {
Background-color: TAN;
Width: 50;
HEIGHT: 50;
}
Style>
HEAD>
// Copyright 1997 - Tomer Shiran
setcal ();
Function Leepyear (Year) {
IF (Year% 4 == 0) {// Basic Rule
Return true; // is leap year
}
/ * else * / // else not needed when statement is "return"
Return false; // is not Leap year
}
Function getDays (Month, Year) {
// Create Array to Hold Number of Days in Each Month
Var ar = new array (12);
Ar [0] = 31; // january
Ar [1] = (Leapyear (YEAR))? 29: 28; // February
Ar [2] = 31; // march
Ar [3] = 30; // april
Ar [4] = 31; // May
Ar [5] = 30; // june
Ar [6] = 31; // july
Ar [7] = 31; // August
Ar [8] = 30; // september
Ar [9] = 31; // october
Ar [10] = 30; // November
Ar [11] = 31; // decEmber
// Return Number of Days in the specified month (parameter)
Return Ar [Month];
}
Function getMonthname (Month) {
// Create Array to Hold Name of Each Month
Var ar = new array (12);
Ar [0] = "January";
Ar [1] = "february";
Ar [2] = "march";
Ar [3] = "April";
Ar [4] = "may";
Ar [5] = "june";
Ar [6] = "july"; ar [7] = "August";
Ar [8] = "september";
Ar [9] = "october";
Ar [10] = "november";
Ar [11] = "decEmber";
// Return Name of Specified Month (Parameter)
Return Ar [Month];
}
Function setcal () {
// Standard Time Attributes
Var now = new date ();
Var year = now.getfullyear ();
VAR MONTH = now.getMonth ();
VAR MONTHNAME = GetMonthname (Month);
Var Date = now.getdate ();
Now = NULL;
// Create Instance of First Day of Month, And Extract The Day on Which It Occurs
Var first Date (Year, Month, 1);
Var firstday = firstdayInstance.getday ();
FirstdayInstance = NULL;
// Number of Days in Current Month
Var days = getDAYS (Month, Year);
// Call Function to Draw Calendar
Drawcal (Firstday 1, Days, Date, Monthname, Year);
}
Function Drawcal (Firstday, LastDate, Date, Monthname, Year) {
// constant Table Settings
// var headerheight = 50 // Height of the table's header Cell
Var border = 2; // 3d Height of Table's Border
Var cellspacing = 4; // width of table's border
Var headercolor = "midnightblue"; // color of Table's Header
Var headersize = " 3"; // size of Tables Header Font
Var colwidth = 60; // width of column in table
Var daycellheight = 25; // Height of Cells Containing Days of the week
Var daycolor = "darkblue"; // color of font representing week day
Var cellheight = 40; // Height of cells representing dates in the calendar
VAR TodayColor = "red"; // color specifying Today's Date in the Calendar
Var timecolor = "purple"; // color of font representing current time // Create Basic Table Structure
Var text = ""; // Initialize Acumulative Variable To Empty String
TEXT = '