宝玉

专注于web开发技术
随笔 - 114, 评论 - 1668 , 引用 - 593

xml+xsl+htc,web控件开发的理想组合

最近,尝试着写web下的listview控件,listview一般有四种显示模式——平铺、图标、列表和详细信息。这些显示模式唯一的共同点就是数据是相同的,显示效果完全不一样。这时候xml的优势就完全体现出来了。

第一步,就是建立一个自定义格式的xml,用来保存listview数据

第二步,xsl可以解析xml生成html,所以就针对listview的每一种显示效果设计了一个对应的xsl。这样前面定义的xml数据和不同的xsl一起就可以显示出不同的效果。

第三步,htc在开发web控件时,非常灵活和功能强大,可以采用客户端脚本如js,可以对控件进行封装,使之有自己的属性、方法和事件等。利用htc封装的listview控件中对外有两个属性CfgXMLSrc(配置文件,设置listview的每一种显示模式对应的xsl文件路径等信息)和View(listview的显示模式),在htc中根据listview的View属性来选择不同的xsl文件和xml数据文件生成html,并输出。

这样就可以通过改变listview控件的view属性来切换listview的不同显示效果。

在线演示  打包下载

以前写换皮肤的控件,都是通过更换css和图片路径来做的(可以看看http://www.stedy.com),局限性很大,例如toolbar,在winxp和win2000下差别很大,只靠通过换css和图片路径无法应付这种情况。通过开发listview的经验,从中悟到了一种更好的开发换皮肤的web控件的模式:

首先将控件的相关数据用xml描述出来,对于每一种Theme(皮肤/主题样式),有一个相关的配置文件,配置文件中记载了该控件所用到的xsl、css、图片路径、htc等信息。在控件相关的htc中,根据Theme属性组合这些。从而可以灵活的应付各种情况。

例如刚才说的toolbar,假如入我们有三种风格:winxp蓝色、winxp银色和windows经典,前面两种基本差不多,只是样式和图片不一样,而后面一种和前面的两种差别比较大。那么我们需要写两个xsl,三个css文件,三个图片文件夹,组合一下就可以生成这三种风格的toolbar了。

这种控件开发模式会慢慢流行起来并在asp.net控件中发挥重要作用的,我相信:)

发表于 2004年6月29日 19:10

评论

# re: xml+xsl+htc,web控件开发的理想组合

不错太酷了。
2004/12/27 20:37 | 历害啊

# re: xml+xsl+htc,web控件开发的理想组合

好像右键菜单弹出位置有点问题。hehe
2004/12/27 22:18 | Jula

# re: xml+xsl+htc,web控件开发的理想组合

太厉害啦。我也在尝试写listview控件,没有成功。想不到你早就有啦,多谢多谢。

右键菜单弹出位置的确有点问题
2005/1/6 13:31 | fanchuangen@126.com

# re: xml+xsl+htc,web控件开发的理想组合

非常感谢~
google上能搜到唯一相关中文内容的就是这里了
2005/4/13 4:18 | zakkzhang

# re: xml+xsl+htc,web控件开发的理想组合

强!!楼主真的豪强
2005/5/18 8:01 | rrongcheng

# re: xml+xsl+htc,web控件开发的理想组合

感激啊 拿来做基于WEB的管理木马平台。
2005/5/31 4:51 | gds117

# re: xml+xsl+htc,web控件开发的理想组合

还不错.好像是从MSDN中搬过来的.
2005/6/8 2:51 | a

# re: xml+xsl+htc,web控件开发的理想组合

这是正宗的MVC的设计模式的WEB应用. 呵呵.
M ---- XML
V ---- XSL
C ---- HTC
2006/1/5 3:38 | Marksim

# re: xml+xsl+htc,web控件开发的理想组合

MVC 是软件设计中的一个非常用的, 并且也非常好用的设计模式. 不过, 没想到在WEB开发也能如此完美体现.

楼主真是强啊. 建议楼主看看设计模式相关的书, 看看还能不能应用其他的模式. 如果能的话, 那就太强了. WEB前端的开发将会更加有序, 更好管理, 更好维护, 更好扩展

厉害厉害. 抽空我也学习学习.
2006/1/5 3:46 | Marksim

# re: xml+xsl+htc,web控件开发的理想组合

搂主:你用过STEDY中的技术作过开发吗?
我们可以一起讨论:
QQ:376661716
2006/3/14 21:54 | lingh

# re: xml+xsl+htc,web控件开发的理想组合

楼主,详细列表时右键菜单弹出位置应该怎么改啊?
2006/5/8 3:09 | 123

# 无限菜单之 xml popup 版

zt无限菜单之xml popup版(IE5.5 ) 无限菜单之xml popup版(IE5.5 ) 终于成功实现了用IE5.5 中的Popup结合xml来制作无限级菜单,这个菜单将...
2008/8/6 10:53 | 鱻鯹鯹oоО

# re: xml+xsl+htc,web控件开发的理想组合

菜单位置修正:
将ListView.htm中的ContextMenu函数替换为
function ContextMenu()
{
var w=110,h=78;
var x=event.screenX,y=event.screenY,scrW=screen.width,scrH=screen.height;
if(x+w+2>scrW)x=x-w-2;
if(y+h+2>scrH)y=y-h-2;
oPopup.show(x, y, w, h);
}
2009/6/2 5:48 | 愚公

# re: xml+xsl+htc,web控件开发的理想组合

学习了
2009/6/7 22:07 | 黑八

# re: xml+xsl+htc,web控件开发的理想组合

Thanks for sharing~
2009/12/11 4:03 | cleaner reviews

# The modeling industry agrees

Model Stardom is the leading modeling community. This was brilliant.
2010/1/27 3:31 | Model

# re: xml+xsl+htc,web控件开发的理想组合

I like your website, It has been a pleasure to read the different articles in it, I'm subscribing to your rrs feed right now!
2010/3/2 6:47 | chat server

Post Comment

主题  
姓名  
主页
校验码  
内容   
京ICP备 05050892号