HTC(HTML Component) 入门

caiwenhn2008

浏览: 191439 次
性别:
来自: 上海

最近访客更多访客>>

athlon

mack

i221bci

SinichEveen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J2EE/UI

HTC HTML 浏览器编程脚本

   新项目用了Chordiant框架（cafe），使用了大量的js函数，而且遇到了一个htc类型的文件。搜了一篇文章。

   HTC是HTML Component的缩写，是IE5及后续版本浏览器所支持的客户端组件。HTC就是一组以DHTML为基础封装了客户端行为的脚本，每HTC以*.htc的文件存储，一个HTC是一个客户端“类”。

编写HTC最重要的一点是知道element对象的意思，它代表了当前的HTC，类似于Java类中的this。例如element.innerHTML可以访问当前HTC对象在document中所包含的html代码。既然HTC是“类”，它当然有属性、方法、事件，下面简要说明其定义方式：

l <PUBLIC:COMPONENT></PUBLIC:COMPONENT>：定义HTC，这个标签是其他定义的父元素。

2 <PUBLIC:PROPERTY NAME=”pName” GET=”getMethod” PUT=”putMethod” />：定义HTC的属性，里面三个定义分别代表属性名、读取属性、设置属性时HTC所调用的方法。

3 <PUBLIC:METHOD NAME=”mName” />：定义HTC的方法，NAME定义了方法名。

4 <PUBLIC:EVENT NAME=”eName” ID=”eId” />：定义了HTC的事件，NAME定义了事件名，ID是个可选属性，在HTC中唯一标识这个事件。

5 <PUBLID:ATTACH EVENT=”sEvent” ONEVENT=”doEvent” />：定义了浏览器传给HTC事件的相应方法，其中EVENT是浏览器传入的事件，ONEVENT是处理事件的方法。

    我们经常看到某些网页上有这样的效果：用户点击一个按钮，文本显示，再次点击这个按钮，文本消失，但浏览器并不刷新。下面我就用HTC来实现这个简单效果。编程思路是这样的：用HTC模拟一个开关，它有”on”和”off”两种状态（可读/写属性status）；用户可以设置这两种状态下开关所显示的文本（设置属性 turnOffText和turnOnText）；用户点击开关时，开关状态被反置，并触发一个事件（onStatusChanged）通知用户，用户可以自己写代码来响应这个事件；该HTC还定义了一个方法（reverseStatus），用来反置开关的状态。下面是这个HTC的代码：

<!—switch.htc定义 -->
<PUBLIC:COMPONENT TAGNAME="Switch">
    <!--属性定义-->
    <PUBLIC:PROPERTY NAME="turnOnText" PUT="setTurnOnText" VALUE="Turn on" />
    <PUBLIC:PROPERTY NAME="turnOffText" PUT="setTurnOffText" VALUE="Turn off" />
    <PUBLIC:PROPERTY NAME="status" GET="getStatus" PUT="setStatus" VALUE="on" />

    <!--定义事件-->
    <PUBLIC:EVENT NAME="onStatusChanged" ID="changedEvent" />

    <!--定义方法-->

    <PUBLIC:METHOD NAME="reverseStatus" />

    <!--关联客户端事件-->
    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="initialize()"/>
    <PUBLIC:ATTACH EVENT="onclick" ONEVENT="expandCollapse()"/>

</PUBLIC:COMPONENT>

<!-- htc脚本 -->
<script language="javascript">
    var sTurnOnText;    //关闭状态所显示的文本
    var sTurnOffText;   //开启状态所显示的文本
    var sStatus;    //开关状态
    var innerHTML   //使用开关时包含在开关中的HTML   

    //设置开关关闭状态所显示的文本
    function setTurnOnText(value)
    {
        sTurnOnText = value;
    } 

    //设置开关开启状态所显示的文本
    function setTurnOffText(value)
    {
        sTurnOffText = value;
    }   

    //设置开关状态
    function setStatus(value)
    {
        sStatus = value;
    } 

     //读取开关状态
    function getStatus()
    {
        return sStatus;
    }   

    //反向开关的状态
    function reverseStatus()
    {
        sStatus = (sStatus == "on") ? "off" : "on";
    }

    //获取htc控制界面html文本
    function getTitle()
    {
        var text = (sStatus == "on") ? sTurnOffText : sTurnOnText;
        text = "<div id='innerDiv'>" + text + "</div>";
        return text;

    }

    //htc初始化代码
    function initialize()
    {
        //back up innerHTML
        innerHTML = element.innerHTML;
        element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();
    } 

    //响应用户鼠标事件的方法
    function expandCollapse()
    {
         reverseStatus();
         //触发事件
         var oEvent = createEventObject();
         changedEvent.fire(oEvent);  
         var srcElem = element.document.parentWindow.event.srcElement;
         if(srcElem.id == "innerDiv")
         {
              element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();
         }
    }
</script>

下面是如何使用这个HTC，注释写的比较清楚了，不再多解释了！

<!--learnhtc.html-->
<html xmlns:frogone><!--定义一个新的命名空间-->
<head>
    <!--告诉浏览器命名空间是由哪个HTC实现的-->
    <?IMPORT namespace="frogone" implementation="switch.htc">
</head>
<body>
   <!--设置开关的各个属性及内部包含的内容-->
   <frogone:Switch id="mySwitch"
                    TurnOffText="off"
                    TurnOnText="on"
                    status="off"
                    onStatusChanged="confirmChange()">
        <div id="dBody">文本内容...... </div>
    </frogone:Switch>
</body>
<script language="javascript">
    //相应开关事件
    function confirmChange()
    {
        if(!confirm("是否改变开关状态?"))
            mySwitch.reverseStatus();
    }
</script>
</html>

原文地址：http://blog.csdn.net/crazy_rain/archive/2007/03/14/1529427.aspx