HTC-浏览器上的舞者

很久以来一直为页面工作的繁琐和杂乱而苦恼，做B/S很多时候痛苦就在做表现层这一块，业务逻辑和数据层的处理反而轻松不少。

为什么？因为不能复用，大量的CSS和Javascript 和HTML交错在一起，然后再夹杂一些程序代码，维护的时候只有痛苦的感觉，往往做好了就不愿意动，不愿意改。

同时又想客户端的操作尽可能的漂亮易用，javascript不用是不可能的。

在做.NET的时候这种感觉到并不强烈，因为.NET已经把控件做的很完善，常用控件也都有了。

直到遇到JSP……基于.NET的开发经验，我非常想把页面上的代码能够写的比较清晰，但是JSP里面没有服务端控件，突然想到.NET里面的TREEVIEW控件是采用HTC制作的，于是从这开始我进入的HTC的殿堂。

HTC (HTML Component)HTML组件通过不断的学习与研究，我认为他就是基于脚本的面向对象编程技术。

由于Javascript和Html的基础还比较好，所以很快就能够熟练应用。

而其中DOM 文档对象模型将会在HTC中成为主要的应用点。

采用HTC带来的好处是巨大的，服务端程序不用再考虑样式之类的问题，所有的样式都可以在HTC中进行设置，服务端只需要装填数据，然后HTC根据设置的属性来显示出想要的效果，我在做一个TreeView控件的时候，甚至把递归都写在了HTC里面，服务端只是把数据取出来而已。

另外的好处是复用，大家采用统一的HTC控件，带来了风格的一致，同时节省了大量的编码时间，很多不懂Javascript的程序员也能非常容易的使用。

有时候想什么MVC,STRUTS之类的技术在某些方面带来的好处也许还不如HTC带来的好处多，因为表现层的工作一直以来都是最繁重的。

这是我的一点感受，希望能够对大家的工作带来一点帮助。

下面是学习HTC的MSDN站点，有时间我也会写一些。

/library/default.asp?url=/workshop/components/htc/ref erence/htcref.asp在微软IE 5.0版本的浏览器发布以前，网页编程中面对的最大挑战就是不能轻易地创建组件，以达到代码重用和多页面共享的目的。

这个问题一直困扰着DHTML（动态 HEML）的网页编程者。

他们只能不断地重复书写HTML、CSS和javascript的代码，以满足多个页面上的重复或相似的功能。

自IE 5.0浏览器发布后，这种情况得到了改善，它带给我们一个新的指令组合方法，可把实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，使网页编程进入一个全新的天地。

这个新的技术就是我们要谈到的DHTML中的“行为”（B ehaviors）。

“行为”作为一个简单易用的组件，它封装了页面上特定的功能或动作。

当把一个“行为”附到WEB页面中的一个元件上时，这个元件的原有行为就会有所改变。

因此，网页编程者可以开发通用的DHTML指令，并改变原有对象的一些属性，用“行为”来增强一个对象的功能，同时也简化了页面的HTML代码。

而且“行为”的创建和使用也非常简单方便，所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。

只要你对此有所了解，有过实际编程的经历，学习并掌握“行为”的使用完全没有问题。

我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”，并体验“行为”给页面编辑带来的优点和方便之处。

首先新建一个名为font_efftce.htc的文本文件，组成“行为”组件的文件都是以.ht c为扩展名，这个文件中的内容就是我们对这个“行为”的描述。

它的创建和使用步骤如下：“EVENT”对应所需事件名,在这里分别为:onmouseover,onmouseout,onmousedown,onmouse up四个事件名，你当然可以再增加其它的事件名来满足你的特定需求。

“ONEVENT”对应着个自的事件句柄，即事件触发时所调用的函数名称。

glowit()函数使字体周围产生一个红色的辉光。

noglow()函数是消除字体的辉光效果。

Font2yellow()函数是把字体颜色改为黄色。

Font2blue()函数是把字体颜色改为蓝色。

四个事件的定义都是相似的。

“NAME”参数对应的是给定的“方法”名称。

move_down和move_right分别是向下和向右移动的“方法”对应的函数名称。

注意，在方法名的后面不要带“( )”括号，即不要写成“move_down()”这个样子，这在“方法”定义的语法上是不允许的。

(3）接下来的工作就是在我们熟悉的DHTML环境下，用javascript脚本语句编写“事件句柄”和“方法”所对应的函数内容，实现预期的效果。

具体内容参考下面的源程序。

其中的“element”参数指的是这个“行为”所附着的对象，因为“行为”总是被附着到页面的元件上面，并通过这个元件发挥作用。

其它语句都是DHTML的编程内容，就不再多说了。

如有不明之处，可参考微软的MSDN开发文档中有关IE浏览器的内容，上面有详细的DHTML编程参考内容、属性和方法使用说明等，并包含了大量的文章和举例程序。

经常访问微软的MSD N文档，尤其对于初学者来说是一个良好的学习习惯，你几乎可以得到任何你想找的答案，它的网址为：/ie/。

(4)如何在一个页面上使用“行为”在页面上使用“行为”组件，并不需要学习新的知识。

所需的知识的也不过是CSS样式表和HTML的设置而已，请看下面的语句。

可以看出，这和以前我们已经熟知的样式表设置完全相同。

上面的语句定义了一个样式名：“myfilter”，其中对我们来说比较新的内容是：“behavior:url(font_effect.htc);”，“behavior”是新增的“行为”属性名，这就是“行为”在样式表中的设置方式。

括号中的内容是“行为”文档的文件名，本例中表明“行为”文档在与页面文件在同一个目录下，如果“行为”文档安置在其它目录下，在此参数的前面要加上相应的路径名，以保证可以正确地定位“行为”文档的位置。

此“样式”中的其它内容就是普通的样式属性设置，可根据你的需要增减，但在此例中，由于使用了“glow”滤镜效果，至少要设置一个宽度（width）属性。

通过以上的样式指定，我们就有了一个名为：“myfilter”的样式，它附带一个有字体变化效果的“行为”。

如果你想要在一个页面元件上使用这个附带“行为”的样式，同样以上语句里面没有什么新的内容，class='myfilter'就是我们所熟悉的样式设置。

在第一个“span”标记的属性中还定义了一个“id”标记，稍后就会看到，这是用来演示调用“行为”内的“方法”而设置的。

这样设置后，“span”元件中的内容就可以显示出“行为”组件内的预定效果：1．鼠标指针移动到文字内容上时，在文字周围产生红色的辉光效果，同时文字变成白色。

2．当鼠标按钮按下时，文字颜色改变为黄色。

3．鼠标按钮抬起后，文字颜色又改变为蓝色。

4．当鼠标指针移动到文字区域以外时，去掉了红色辉光效果，文字恢复原样。

另外，我们在定义“行为”时设置了二个“方法”，“move_down”和“move_right”。

用按钮的onclick事件去调用这二个“方法”，先前定义的“id”标记就作为元件的对象名称，用“myspan.move_down”来调用“方法”，操纵这个对象。

可以看到，在按下相应的按钮后，会使第一行的文字产生向下或向右的移动。

虽然只是用第一行文字做了示范，实际上，只要做相应的设置，你也可以移动其它对象。

页面源文档的完整内内容如下：通过以上的简单介绍，可以看出，我们很容易地在一个“行为”中同时组合了多种文字变化效果，通过简单的“样式”设置，任意地将它与页面元件相关连，体现了“行为”组件的优点和强大功能。

一个“行为”组件，不仅能在一个页面内重复使用，也可供同一站点上的所有页面使用。

试想一下，如果不使用“行为”来完成上述的效果，虽然可以在页面内调用一组预定的函数来完成同样的功能，但页面内每一个使用文字效果的元件都要附加四个鼠标事件，如果在多个页面内使用相同的效果，被调用的函数也需要在每一个页面内重复设置。

相比之下，孰优孰劣是很明显的。

所以，使用“行为”组件，可以制作出简洁、高效、通用和便于维护的页面。

本文的举例只是为了说明“行为”组件的编写和使用过程，使读者对“行为”编程有一个概括的了解，并以此基础制作出自己所需要的“行为”组件，或直接引用满足个人需要的现成“行为”组件，因为“组件共享”的概念也是“行为”开发者的初衷。

最后，愿本文能起到“抛砖引玉”的目的，使读者步入精彩的DHTML网页编程天地。

说明:HTC是HTML component的缩写,是IE5.0的主要扩展之一,除了具备一般组件的可重用优点之外,还具有易于开发使用等优点,因为需要引入外部文件,这里就不举例了,宝库里有例子.控件和组件HTC提供了一个简单机制以在脚本中实现DHTML行为。

一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀，可以使用HTC实现以下行为：设定属性和方法。

通过“PROPERTY”和“METHOD”元素定义设置自定义事件。

通过“EVENT”元素实现，用该元素的“fire()”方法释放事件，通过“createEventObject()”方法设置事件环境。

访问所包含该HTC的的HTML页的DHTML对象模型，使用HTC的“element"对象，返回一个附加行为的元素，使用该对象，HTC可以访问包含文挡及它的对象模型（属性、方法、事件）。

收取通知，使用”ATTACH“元素实现，浏览器不但通知HTC标准的DHTML事件，而且通知H TC两种特殊事件：oncontentready事件和ondocumentready事件。

定义标记和命名空间HTC的基础是自定义标记要为页面定义自定义标记，必须为该标记提供命名空间要使用该标记必须在该标记前加上正确的XML命名空间前缀例如:定义一个新标记RIGHT的例子组件定义组件的名字是由HTC文档里定义在第一行的XML命名空间决定的该页不用调用其他的HTC话,就只有一个命名空间定义实际上，HTML组件的定义就是自定义标签行为的定义其中的oncontentready是在组件被调用者完全导入时触发。