今天初步研究了HTC,感觉DHTML比原本想象的神奇多了——这么晚才发觉这点真是失败。
HTC的作用类似ACTIVEX等COMPONENT,提供了DHTML一个定义自己COMPONENT的空间。一个HTC可以视为一个CLASS——但远不止CLASS。出自IE5.5时代的HTC,在功能上居然和现在VS.NET下的ATTRIBUTE有很多类似的地方。对BEHAVIOR的后期绑定和对TAG的拓展都显示HTC的强大威力——据说MS担心HTC的过度壮大会影响到业界对其桌面系统的关注。
从功能上说,HTC即使在ASP时代也提供了相当强大的CLIENT与SERVER的交互能力,尤其是CLIENT方面,许多功能与ASP.NET下的COMPONENT非常神似——如果不注意的话会以为IE5.5时代的HTC就是现在的ASP.NET的——说的是COMPONENT方面,不是别的方面。
今天帮老张UPGRADE整个网站的时候就体会了次HTC,相当神奇。SPACE的输入界面现在基本已经可以做出来了——感觉太神奇了。
事实上,在了解了HTC以后发现原来以前感到很神奇与神气的BBS、SPACE输入界面做起来是那么的轻而易举。
好了,废话不说了,下面对HTC、USERDATA以及EXECCOMMAND做一点介绍。
先说EXECCOMMAND。它是一条JAVASCRIPT命令,在BBS系统中一般都是用DOCUMENT.EXECCOMMAND(),用途就是让文档进行某种操作。比如,document.execCommand("Bold")将文档的当前状态设为粗体或者从粗体中退出。document.execCommand("InsertImage",true,"true")则弹出一个图片设置框,用来在CONTAIN中插入图片,或者也可以用document.execCommand("InsertImage",false,"aa.jpg")用来直接指定要插入的图片的SRC。这个命令结合Div、Span等TAG的contenteditable属性就能实现BBS上的输入功能了——甚至比用VB做WORD还简单!(这个是废话)
网络上已经有不少EXECCOMMAND的详细参数表了,这里也不用多做介绍。
下面是USERDATA,这个东西的功能不是一般的强大。它的作用类似COOKIE,但是比COOKIE具有更高的灵活性。我的BBS中提供的保存文档功能就是用USERDATA实现的——当然,还没有完全作完,打开USERDATA资料的部分没有深入制作,因为没有时间了。还可以在HTC加一个TIMER函数,用来定时保存文档,或者在ONBEFORUNLOAD中保存文档,都可以。有了这个东西,许多数据根本不用通过SERVER就能在CLIENT端进行相当完整的处理了——这个让我想到了AJAX。事实上,USERDATA的确与XML一同合作能完成相当绚丽的MENU功能——当初我都是用JAVASCRIPT死做做出那些MENU来的。事实上,USERDATA的出项一下子就让做网站时的思路开阔了许多——以致于都不习惯这么开阔的思路了。
当然了,主体还是HTC。
从某种意义上说,即使不用HTC也可以,但是HTC提供了一个封装环境,更主要的是这种封装让我们这种CODER感到非常的亲切——就好比虽然一个程序用C我也可以写出来,但是我就是喜欢用VB写一样——似乎没什么太大的关联性哦。
HTC的全程为HTML COMPONENT,是DHTML技术的一部分。一个完整的HTC既可以做为TAG用,也可以作为CSS的延伸,可以对BEHAVIOR做后期绑定,也可以定义属于自己的COMPONENT让别人无法破解——尤其是这个部分,可以让你的HTML或者ASP变得非常简洁明了,而且便于维护——只需要修改一个HTC,所有的相关PAGE就都UPGRADE了。
下面就是我做的BBS输入的HTC,是一个TAG的CLASS,包含了完整的界面和功能实现JAVASCRIPT,界面采用的是WINWORD与SPACE混合的形式。没有做HTML转换的部分,要做也很简单,一个TEXTAREA和一个DIV轮换显示就OK了,用JS实现的话非常简单的。
其中,第一行用来生命这个HTC的类型为TAG,然后定义了其属性和方法,申明它为VIEWLINK的。在STYLE中申明了USERDATA可用,SCRIPT中提供了其方法的具体实现和一些内部方法。HTC与CLASS的一个不同的地方,就在于HTC可以提供对外的EVENTHANDLER,接受其所在环境发生的EVENT并处理。此外,如果在COMPONENT申明中不申明为TAG的话,也能申明为BEHAVIOR,这样就能实现后期绑定了。绑定采用的是CSS技术。
DIV标签的UNSELECTABLE保证了这个TAG是作为CONTAIN的,第二层的DIV则将contenteditable=true以及designMode=on,并且其ID为USERDATA,因为它将作为USERDATA的响应对象,用以操纵USERDATA。
《public:component tagName=editBox》
《public:property name="value" get="getvalue" put="putvalue"/》
《public:Method name="clean"/》
《public:Method name="cleanData"/》
《public:defaults viewlinkContent/》
《style》
.userData{behavior:url(#default#userdata);}
《/style》
《script language="javascript"》
function getvalue(){
var ys;
ys=editBox.innerHTML;
ys=ys.replace(new RegExp(String.fromCharCode(34),"gm"),’"’);
return ys;
}
function putvalue(value){
var ys;
ys=value;
ys=ys.replace(new RegExp(‘"’,"gm"),String.fromCharCode(34));
editBox.innerHTML=ys;
}
function saveData(){
editBox.setAttribute("Context",editBox.innerHTML);
editBox.save("XMLContext");
}
function loadData(){
editBox.load("XMLContext");
editBox.innerHTML=editBox.getAttribute("Context");
}
function cleanData(){
editBox.setAttribute("Context","");
editBox.save("XMLContext");
}
function clean(){
cleanData();
editBox.focus();
document.execCommand(‘SelectAll’);
document.execCommand(‘Delete’);
}
《/script》
《/public:component》
《div unselectable="on" align=center style="height:250; width:450;
background-color:powderblue; border:outset powderblue"》
《DIV style="height=7px;overflow=hidden;"》《/DIV》
《div class="userData" id=editBox contenteditable=true designMode=on align=left
style="display:block;height:200; width:430;background-color:white; font-face:Arial; padding:3;
border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;"》
《/div》
《DIV style="height=7px;overflow=hidden;"》《/DIV》
《button unselectable="on" onclick="clean();editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="新建"》《Img alt="新建" src="imagesNew.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="loadData();editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="载入"》《Img alt="载入" src="imagesLoad.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="saveData();editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="记录"》《Img alt="记录" src="imagesSave.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Cut’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="剪切"》《Img alt="剪切" src="imagesCut.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Copy’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="复制"》《Img alt="复制" src="imagesCopy.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Past’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="粘贴"》《Img alt="粘贴" src="imagesPaste.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Undo’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="撤消"》《Img alt="撤消" src="imagesUndo.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Redo’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="重复"》《Img alt="重复" src="imagesRedo.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘CreateLink’,true,’true’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="插入超连接"》《Img alt="插入超连接" src="imagesLink.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘UnLink’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="删除超连接"》《Img alt="删除超连接" src="imagesUnLink.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘InsertImage’,true,’true’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="插入图片"》《Img alt="插入图片" src="imagesPic.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="(OverWrite.innerHTML==’开启覆盖’)?OverWrite.innerHTML=’关闭覆盖’:OverWrite.innerHTML=’开启覆盖’;document.execCommand(‘OverWrite’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;"
title="覆盖状态"》《B》《P id="OverWrite"》开启覆盖《/P》《/B》
《/button》
《BR》
《font size=2》《B》字体:《/B》《/font》《input id="font" size=7》
《button unselectable="on" onclick="editBox.focus();document.execCommand(‘FontName’,true,font.value);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;"
title="设置字体"》《B》《P id="OverWrite"》设置《/P》《/B》
《/button》
《font size=2》《B》大小:《/B》《/font》《input id="size" size=5》
《button unselectable="on" onclick="editBox.focus();document.execCommand(‘FontSize’,true,size.value);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;"
title="设置大小"》《B》《P id="OverWrite"》设置《/P》《/B》
《/button》
《font size=2》《B》《SPAN id=color color=#000000》颜色:《/SPAN》《/B》《/font》《input onKeyUp="color.style.color=’#’+red.value+green.value+blue.value;" id="red" size=1 value=00》《input onKeyUp="color.style.color=’#’+red.value+green.value+blue.value;" id="green" size=1 value=00》《input onKeyUp="color.style.color=’#’+red.value+green.value+blue.value;" id="blue" size=1 value=00》
《button unselectable="on" onclick="editBox.focus();document.execCommand(‘ForeColor’,true,color.style.color);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;"
title="设置大小"》《B》《P id="OverWrite"》设置《/P》《/B》
《/button》
《BR》
《button unselectable="On" onclick=’document.execCommand("SuperScript");editBox.focus();’
style="background-color:powderblue; border-color:powderblue" title="上标"》
《B》^《/B》《/button》
《button unselectable="On" onclick=’document.execCommand("SubScript");editBox.focus();’
style="background-color:powderblue; border-color:powderblue" title="下标"》
《B》_《/B》《/button》
《button unselectable="on" onclick="document.execCommand(‘Bold’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="粗体"》《Img alt="粗体" src="imagesB.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Italic’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="斜体"》《Img alt="斜体" src="imagesI.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘UnderLine’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="下划线"》《Img alt="下划线" src="imagesU.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘StrikeThrough’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="删除线"》《Img alt="删除线" src="imagesS.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘JustifyLeft’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="左对齐"》《Img alt="左对齐" src="imagesL.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘JustifyCenter’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="居中"》《Img alt="居中" src="imagesM.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘JustifyRight’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="右对齐"》《Img alt="右对齐" src="imagesR.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘InsertOrderedList’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="已排序列表"》《Img alt="已排序列表" src="imagesOL.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘InsertUnorderedList’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="未排序列表"》《Img alt="未排序列表" src="imagesUL.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Outdent’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="突出"》《Img alt="突出" src="imagesOD.jpg" width=20 height=20》
《/button》
《button unselectable="on" onclick="document.execCommand(‘Indent’);editBox.focus();"
style="background-color:powderblue;border-color:powderblue;width=25px;height=25px;"
title="缩进"》《Img alt="缩进" src="imagesID.jpg" width=20 height=20》
《/button》
《/div》