HTC simple tutorial

Before the release of Microsoft IE 5.0, the biggest challenge in Web programming was the inability to easily create components for code reuse and multi-page sharing. This problem has plagued DHTML (dynamic HEML) web programmers. They can only repeatedly write HTML, CSS, and javascript code to meet repeated or similar features on multiple pages. This situation has been improved since the release of the IE 5.0 browser. It brings us a new command combination method that can encapsulate code that implements specific functions in one component, in this way, code can be reused on multiple pages, allowing web programming to enter a new world. This new technology is the Behaviors in DHTML ).
As an easy-to-use component, "behavior" encapsulates specific functions or actions on the page. When a "behavior" is attached to a component on the WEB page, the original behavior of the component changes. Therefore, web programmers can develop common DHTML commands, modify some attributes of the original object, use "behavior" to enhance the function of an object, and simplify the HTML code of the page. In addition, the creation and use of "behavior" is very simple and convenient. The required knowledge is just the CSS style sheet, HTML instructions, and javascript scripting language that we used to use. As long as you have some knowledge about this, have had practical programming experience, and learn and master the use of "behavior", there is no problem at all. We will take a "behavior" component that changes the font effect as an example to illustrate how to write and use a "behavior" and experience the advantages and convenience of "behavior" for page editing.

First, create a text file named font_efftce.htc. All the files that make up the "behavior" component are with the. htc extension. The content of this file is our description of this "behavior. The steps for creating and using it are as follows:
(1) first, add several event responses to this "action". The Statement format is as follows:
<PUBLIC: attach event = "onmouseover" ONEVENT = "glowit ()"/>
<PUBLIC: attach event = "onmouseout" ONEVENT = "noglow ()"/>
<PUBLIC: attach event = "onmousedown" ONEVENT = "font2yellow ()"/>
<PUBLIC: attach event = "onmouseup" ONEVENT = "font2blue ()"/>
"EVENT" corresponds to the required EVENT names, which are onmouseover, onmouseout, onmousedown, and onmouseup respectively. You can add other EVENT names to meet your specific needs. ONEVENT corresponds to an event handle, that is, the name of the function called when the event is triggered. The glowit () function generates a red glow around the font. The noglow () function eliminates the font glow. The Font2yellow () function changes the font color to yellow. The Font2blue () function changes the font color to blue. The definitions of the four events are similar.
(2) Next, add two "methods" for this "behavior". The content is as follows.
<PUBLIC: method name = "move_down"/>
<PUBLIC: method name = "move_right"/>
The "NAME" parameter corresponds to the given "method" NAME. Move_down and move_right are the function names corresponding to the "method" that moves down and right respectively. Note: do not include "()" parentheses after the method name, that is, do not write "move_down ()". This is not allowed in the syntax defined by "method.

(3) the next step is to compile the function content corresponding to the "event handle" and "method" using javascript script statements in the familiar DHTML environment to achieve the expected results. For details, refer to the following source program. The "element" parameter indicates the object to which the "behavior" is attached, because the "behavior" is always attached to the page element and plays a role through this element. Other statements are the programming content of DHTML. If you have any questions, refer to the IE browser content in Microsoft's MSDN development document, which contains detailed DHTML programming reference content, attributes, and method instructions, it also contains a large number of articles and example programs. I often visit Microsoft's MSDN documentation, especially for beginners. It is a good learning habit. You can get almost any answers you want. Its website is http://msdn.microsoft.com/ie /.
The complete "behavior" document "font_0000t.htc" contains the following content:
/// // The "action" document starts /////// ////////////////////////////
// Add four mouse events to "behavior"
<PUBLIC: attach event = "onmouseover" ONEVENT = "glowit ()"/>
<PUBLIC: attach event = "onmouseout" ONEVENT = "noglow ()"/>
<PUBLIC: attach event = "onmousedown" ONEVENT = "font2yellow ()"/>
<PUBLIC: attach event = "onmouseup" ONEVENT = "font2blue ()"/>
// Define two methods for "behavior"
<PUBLIC: method name = "move_down"/>
<PUBLIC: method name = "move_right"/>
<Script language = "JScript">
// Define a variable for saving the font color
Var font_color;
// Define the method for moving down text
Function move_down ()
{
Element. style. posTop + = 2;
}
// Define the method for moving text to the right
Function move_right ()
{
Element. style. posLeft + = 6;
}
// Define the call function of the mouse onmouseup event
Function font2blue (){
If (event. srcElement = element)
{
Element. style. color = 'Blue ';
}
}
// Define the call function of the mouse onmousedown event
Function font2yellow (){
If (event. srcElement = element)
{
Element. style. color = 'yellow ';
}
}

// Define the call function of the mouse onmouseover event
Function glowit ()
{
If (event. srcElement = element)
{
Font_color = style. color;
Element. style. color = 'white ';
Element. style. filter = "glow (color = red, strength = 2 )";
}
}

// Define the call function of the mouse onmouseout event
Function noglow ()
{
If (event. srcElement = element)
{
Element. style. filter = "";
Element. style. color = font_color;
}
}
</SCRIPT>
///// // The end of the "action" document ///////////////// //////////////

(4) how to use "behavior" on a page"
You do not need to learn new knowledge when using the "behavior" component on the page. The required knowledge is only about CSS style sheets and HTML settings. See the following statements.
<STYLE>
. Myfilter {behavior: url (font_0000t.htc); position: relative; font-weight: bold; width = 180; left: 0 ;}
</STYLE>
We can see that this is exactly the same as the style sheet settings we have known before. The preceding statement defines a style name: "myfilter". For us, the new content is: "behavior: url (font_0000t.htc );", "behavior" is the new "behavior" attribute name, which is the setting method of "behavior" in the style sheet. The content in the brackets is the file name of the "behavior" document. In this example, it indicates that the "behavior" document is in the same directory as the page file. If the "behavior" document is placed in another directory, add the corresponding path name before this parameter to ensure that the location of the "behavior" document can be correctly located. The other content in this "style" is the general style attribute settings, which can be increased or decreased according to your needs. However, in this example, because the "glow" filter effect is used, you must set at least one width attribute. By specifying the style above, we have a style named "myfilter" with a "behavior" with a font change effect ". If you want to use the style with "behavior" on a page element, it is also very easy to place this "style name" in the attribute setting area of the component, see the following statement.
<Span id = "myspan" class = 'myfilter'> text effects produced by behaviors </span> <br>
<Span class = 'myfilter'> a glow is generated when the cursor points to it. </span>
There is no new content in the above statement, and class = 'myfilter' is the style setting we are familiar. A "id" Mark is also defined in the attribute of the first "span" mark. It will be seen later. This is used to demonstrate the setting of calling the "method" in "behavior. After this setting, the content in the "span" component shows the predefined effect in the "behavior" component:
1. When the mouse pointer moves to the text content, a red glow appears around the text, and the text turns white.
2. When the mouse button is pressed, the text color changes to yellow.
3. After the mouse button is raised, the text color changes to blue.
4. When the mouse pointer moves beyond the text area, the red glow is removed and the text is restored to its original state.
In addition, we set two "methods", "move_down" and "move_right" when defining "behavior ". To call these two "methods", two buttons are defined:
<Button onclick = "myspan. move_right ();"> move the first line of text to the right </button> <br>
<Button onclick = "myspan. move_down ();"> move the first line of text down </button>
Use the onclick event of the button to call the two "methods". The previously defined "id" is used as the object name of the component, and the "myspan. move_down "to call the" method "and manipulate this object. As you can see, after you press the corresponding button, the text in the first line will be moved down or to the right. Although it only demonstrates the use of the first line of text, you can also move other objects as long as the corresponding settings are made. The complete content of the page source document is as follows:
<Html>
<HEAD>
<TITLE> behavior effect demonstration </TITLE>
<STYLE>
. Myfilter {behavior: url (font_0000t.htc); position: relative; font-weight: bold; width = 180; left: 0 ;}
</STYLE>
</HEAD>
<BODY>
<Span id = "myspan" class = 'myfilter'> text effects produced by behaviors </span> <br>
<Span class = 'myfilter'> a glow is generated when you point to it. </span> <br>
<Span class = 'myfilter'> white text at the same time </span> <br>
<Span class = 'myfilter'> Press the mouse and the text turns yellow </span> <br>
<Span class = 'myfilter'> move the mouse up and the text turns blue </span> <br>
<Span class = 'myfilter'> The text is restored after the mouse leaves </span> <br>
<Button onclick = "myspan. move_right ();"> move the first line of text to the right </button> <br>
<Button onclick = "myspan. move_down ();"> move the first line of text down </button>
</BODY>
</Html>
Through the simple introduction above, we can see that we can easily combine a variety of text changes in a "behavior" at the same time, through simple "style" settings, connecting it to page components arbitrarily reflects the advantages and powerful functions of the "behavior" component. A "behavior" component can be used not only on one page, but also on all pages on the same site. If you do not use "behavior" to achieve the above effect, you can call a set of predefined functions on the page to complete the same function, however, each component on the page that uses text effects must be appended with four mouse events. If the same effect is used on multiple pages, the called function must be set repeatedly on each page. In contrast, the advantages and disadvantages are obvious. Therefore, you can use the "behavior" component to create a simple, efficient, universal, and easy-to-maintain page. The example in this article is only to illustrate the compilation and use process of the "behavior" component, so that readers can have a general understanding of "behavior" programming, based on these components, you can create the "behavior" components you need, or directly reference the ready-made "behavior" components that meet your individual needs, because the concept of "component sharing" is also the original intention of "behavior" developers. Finally, I hope this article will serve as a "reference" to bring readers into the wonderful DHTML web page programming world.

Note:
HTC is the abbreviation of HTML component,
Is one of the major extensions of IE5.0,
In addition to the reusable advantages of general components,
It also has advantages such as ease of development and use,
Because external files need to be introduced, we will not give an example here, but there are examples in the treasure.

Controls and components
HTC provides a simple mechanism to implement DHTML behavior in scripts. There is no difference between an HTC file and an HTML file, and it is suffixed with ". htc,

You can use HTC to perform the following actions:
Set attributes and methods. Defined by "PROPERTY" and "METHOD" elements
Set Custom events. Use the "EVENT" element to release the EVENT using the "fire ()" method of the element,
Use the createEventObject () method to set the event environment.
Access the DHTML object model of the HTML page containing the HTC, and use the HTC "element" object to return
An element of an additional action. With this object, HTC can access the object model (attributes, methods, and events) that contains the document ).
Receive notifications using the "ATTACH" element. The browser not only notifies HTC of standard DHTML events, but also two special events: oncontentready events and ondocumentready events.


Define tags and namespaces
HTC is based on custom tags
To customize a tag for a page, you must provide a namespace for the tag
To use this tag, you must add the correct XML namespace prefix before the tag.
For example:

Example of defining a new RIGHT mark
The code snippet is as follows: <HEAD>
<STYLE>
@ Media all {
DOCJS: RIGHT {text-align: right; width: 100}
}
</STYLE>
</HEAD>
<BODY>
<DOCJS: RIGHT>
Read Doc JavaScript's columns, tips, tools, and tutorials
</DOCJS: RIGHT>
</BODY>
</HTML>


You can tag in a single HTML
Multiple namespaces are defined in:
<Html xmlns: docjs xmlns: DOCjavascript>

Component definition
The component name is determined by the XML namespace defined in the first line in the HTC document.
This page has only one namespace definition without calling other HTC words.
In fact, the definition of HTML components is the definition of custom tag behavior.
This action includes an attribute and an event:

<HTML xmlns: MyTag>
<HEAD>
<PUBLIC: COMPONENT tagName = "MyTag">
<Property name = "value"> </PROPERTY>
<Attach event = "oncontentready" ONEVENT = "fnInit ()" <>/ATTACH>
</PUBLIC: COMPONENT>
<STYLE> // define a STYLE sheet for the component
. CssMyTag {
}
</STYLE>
<SCRIPT language = javascript>
Function MyTagBehavior1 () {}// define a method for the component
</SCRIPT>
</HEAD>
<BODY onclick = MyTagBehavior1> // define a response event for the component
</BODY>
</HTML>


Oncontentready is triggered when the component is completely imported by the caller.
Let's take a look at fnInit ()

Function fnInit (){
Document. body. innerHTML = element. value; // sets the display content of the component.
Document. body. className = "clsMyTag"; // sets the display style table,
Defaults. viewLink = document; // make this component visible to other documents
Element. aProperty = element. value; // you can specify the attribute value of a widget.
}


Call of components

<HTML xmlns: MyCom>
<HEAD>
<? Import namespace = "MyCom" IMPLEMENTATION = "MyTag. htc"/>
</HEAD>
<BODY>
<MyCom: MyTag> </MyCom: MyTag>
</BODY>
</HTML>