宝玉

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

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

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

It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thanks
2010/3/14 6:41 | Scary Halloween Masks

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

This looks absolutely perfect. All these tinny details are made with lot of background knowledge. I like it a lot. Keep on taking action!

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

great post and very useful i used Google translation and i am so pleased now
2010/3/23 11:40 | pet games

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

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

右键菜单弹出位置的确有点问题
2010/3/23 12:12 | Ragdoll games

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

Hi ho, squares again. what is that font?
2010/3/28 2:15 | girl games

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

Squares squares everywhere, I just love squares, it is like a puzzle
2010/3/28 2:18 | ben10 games

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

<DOWNLOAD ID=dwn STYLE="behavior:url(#default#download)" />这句话什么意思?
2010/4/7 22:41 | aa

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

The blog is in reality the great on this worthy subject. I match in together with your conclusions and looking forward to your coming updates. Just saying thanks will not just be enough, for the fantastic clarity inside your writing. I put a link to your blog at my site, hope you dont mind?
2010/4/18 20:47 | Electric Adjustable Bed

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

I just stumbled upon this awesome post and want to say that I have really enjoyed reading it. Thanks for sharing such well written articles.
2010/4/21 12:48 | Houston Pressure Washing

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

I have visited my individual blog and so its good to pickup hints from what you have going here. Numerous Thanks. Do you need to get any information?
2010/4/22 4:22 | Watch Hot Movies Online

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

its really very nice and fantastic posting thanks for sharing this with us..
2010/5/3 1:35 | 642-845 Actual Test

# tattoo removal cream

I am really interested in this program but I do not know much about it. After reading your article, i have more experiences to work with it. Your post is interesting and picturesque. I hope i can get your post in next time. Keep on!

2010/5/3 22:02 | charles_camelia@yahoo.com.vn

# Custom Stickers Printing

These all posting are really funny i cant understand it.
2010/5/6 0:55 | emanprinting1@gmail.com

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

I wish i could understand. Seems to b worth reading
2010/5/17 7:02 | birthday sms

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

out of sight, out of mind..
2010/5/18 1:23 | cheap roger waters tickets

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

好像用的人呢不多
2010/5/27 22:39 | Bearings

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

How are you. There is only one success - to be able to spend your life in your own way.
2010/5/31 10:45 | Stock Picks

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

Very informative and helpful post. You have good command on the topic and have explained in a very nice way. Thanks for sharing.
2010/6/2 5:09 | Attache

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

A bit off topic perhaps, but I really need to know - which template are you using? I especially like the sidebar style
2010/6/2 21:55 | Flipminohd

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

Thank you for this blog. Thats all I can say. You most definitely have made this blog into something thats eye opening and important. You clearly know so much about the subject, youve covered so many bases. Great stuff from this part of the internet. Again, thank you for this blog.
2010/6/4 10:21 | Pattaya sex

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

subject, youve covered so many bases
2010/6/5 15:25 | silver

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

antique tables
2010/6/6 17:15 | antique tables

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

Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one. Keep posting. Thanks for sharing.
2010/6/7 4:26 | Background Check

# Pc video conferencing

GREAT POST.
2010/6/7 4:52 | Pc video conferencing

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

antique buffet
2010/6/8 17:31 | antique buffet

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

giltwood mirror
2010/6/10 17:13 | giltwood mirror

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

rosewood sofa
2010/6/13 11:08 | rosewood sofa

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

narrow hall stands
2010/6/15 11:22 | narrow hall stands

# wicked4all@gmail.com

i cant understand your language but nice images.
2010/6/23 7:32 | cheap wicked tickets

# wicked4all@gmail.com

i cant understand your language but nice images.
2010/6/23 7:32 | cheap wicked tickets

# office chairs

Executive range of high quality Office Chairs for your home and office. Leather office chairs on sale.
2010/6/29 2:33 | office chairs

# My thought

Aw, it was a top quality content. Actually I would like to write like this as well - taking time and real energy to bring about an excellent post... however what can I say... I procrastinate an awful lot and by no means appear to get things completed...

# Motorbike Jeckets

Thanx for this.
2010/7/13 4:50 | riderwear000@gmail.com

# Business Process Outsourcing

Thank you very much for this idea.
2010/7/14 1:39 | riderwear000@gmail.com

#  Offshore Outsourcing

This is really fantastic post.
2010/7/15 0:51 | riderwear000@gmail.com

# BPO Services

This is really nice and interesting post.
2010/7/15 1:59 | riderwear000@gmail.com

# Motorbike clothing

You have good command on the topic and have very explained in very nice way.This is really very nice and helpful post.
2010/7/15 3:12 | riderwear000@gmail.com

# Caberg helmet

Nice picture,thanx for this post.
2010/7/15 5:43 | riderwear000@gmail.com

# my thoughts

I have been searching for a website like this in the field I am interested in. I am a big fan. I was thinking about creating my own blog about similar ideas for like-minded people. Some good ideas here. Thanks, I can only hope mine turns out as good as this one
2010/7/16 1:51 | injury lawyer

# discount jovan perfumes

yah its really very nice and informative thanks
2010/7/18 8:09 | perfumesnow110@gmail.com

# Cheap Motorcycle Leather Jacket

Excellent site, where did you come up with the knowledge
in this article? Im happy I found it though.Thank you very much for this sharing.
2010/7/19 6:46 | riderwear000@gmail.com

# Motorbike Jeckets

I am really interested in this program but I do not know much about it.Image is nice thank you for this sharing.
2010/7/19 8:35 | riderwear000@gmail.com

# Viper Helmet

This is new ideas and also helpful for others. I really appreciate work done on this blog.Thanks for this informative post.
2010/7/19 9:07 | riderwear000@gmail.com

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


I was searching the net and finally i ended up in the nice post. Proud to be that i have gained some knowledge by reading the informative post.
2010/8/2 4:20 | Moroccanfurniture

# Well,

Well, I have been to your blog before and there are some awesome posts that i can find. I have actually forwarded this post to many of my friends as this would be great for discussion in our school! . Thanks a million and please keep up the effective work
2010/8/24 10:27 | lingerie

Post Comment

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