开发基于Web的CSS设计器.代码参考
来源:互联网 发布:浙江大学网络认证 编辑:程序博客网 时间:2024/06/07 20:38
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
解析CSS样式文件
这段代码主要作用是把CSS文件分解为多个样式类,并按名称/文本属性生成ClassItem对象,并保存在一个ArrayList(CSSList)中(C#代码)
交互界面构建
交互界面由Javascript通过XmlDocument读取Xml文件动态生成。
首先要读取XML文件,然后遍历整个XML文件,先遍历样式分类,再对每个分类遍历其下的所有样式属性。比较关键的代码是对XML的遍历,下面是对样式分类的遍历代码。
样式输入控件构建函数,该函数作用是根据XPath路径查询XML定义,生成交互控件
设计器初始化
Js脚本读取解析样式元素的style属性值,然后为设计器中构建的控件赋值
界面交互
在XML中一共定义了select/input_ColorSelect/input_SizeSelect/input_BorderSelect(后3种为颜色/大小/边框输入模式)共4种输入模式,除select为直接选择外,其他在对应控件初始化的时候作为class属性赋值到控件中,类似class代码如下
通过behavior属性,把该输入控件和相应的组件相关联,该组件effColorSelect.htc代码如下
其他
设计器中的值输入模式框只是页面中的几个层,通过上面的htc组件触发显示出来,输入后再把值传入到样式属性控件中,同时也会设置可视化样式元素。
另外还需要注意的是,XML文档是可以自行扩展或缩减的,但是在实际应用中,不能完全依据CSS标准来定义,因为可视化元素的style属性会自动格式化。例如如果你在XML中定义border-bottom-width属性,在将值取出时会自动格式化为border-bottom,这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档,所以只有经过实际测试来验证。
OK,比较关键的代码已经差不多了……希望能对大家有所帮助。
参考
另外再列出部分技术参考,如果大家对其中的技术细节如HTC和XmlDom等有所疑问,可以再详细研究一下,也欢迎大家来和我交流 linnchord@tom.com 。
MSDN关于JS操作XmlDom的文档
这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧 :)
(最近MSDN不知道什么毛病,经常访问有问题,如果无法访问,请先登录msdn,再输入地址浏览)
Web/2003/1227.asp" target=_blank>蓝色理想的HTC教程
网上也没看见比较全面的讲述,这个简单易学,基本概念清楚了。 <script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
这里对前面文章讲的CSS设计器系统关键代码作一些小结,如果没有看过前面文章的请先参看"开发基于Web的CSS设计器"解析CSS样式文件
这段代码主要作用是把CSS文件分解为多个样式类,并按名称/文本属性生成ClassItem对象,并保存在一个ArrayList(CSSList)中(C#代码)
//读取文件FileInfo theSource= new FileInfo (@m_filePath);StreamReader reader = theSource.OpenText();//将文件流转化为文本m_CSSText = reader.ReadToEnd();reader.Close();//定义CSS文本分割符char[] delimiters = new char[] { '{','}'};int iCheck = 1;string className = null;//将文本转化为ArrayListforeach ( string substring in m_CSSText.Split(delimiters)){ if (iCheck%2==0) //当iCHeck为偶数时,字符串为样式属性内容 //将解析的样式名和属性作为ClassItem对象存入CSSList CSSList.Add( new ClassItem ( className, substring.Trim() ) ); else //当iCHeck为奇数时,字符串为样式名,暂存 className = substring.Trim(); iCheck++;}
交互界面构建
交互界面由Javascript通过XmlDocument读取Xml文件动态生成。
首先要读取XML文件,然后遍历整个XML文件,先遍历样式分类,再对每个分类遍历其下的所有样式属性。比较关键的代码是对XML的遍历,下面是对样式分类的遍历代码。
//LoadXML是XML文件读取函数var dom = LoadXML("CSS.xml");
//通过XPath和selectNodes方法返回一个XMLDOMNodeList对象var oNode = dom.selectNodes("//Category/Name");
//获取该对象长度,即XML文档中该路径节点的数量var intCategory = oNodes.length; for (i=0; i<intCategory; i++){ //获取集合中的节点 oNode = oNodes.nextNode; if (oNode != null) { //样式分类界面构建代码-略 …… }}
样式输入控件构建函数,该函数作用是根据XPath路径查询XML定义,生成交互控件
function BuildInput ( path ){ var str=""; var aNode=null; var attValue=null;
//通过selectSingleNode返回符合条件的第一个节点 var actNode = dom.selectSingleNode(path+"ActionType"); var nameNode = dom.selectSingleNode(path+"CSSName");
//如果属性为选择输入,则读取SelectItems,并构建select控件 if (actNode.text=="select") { str += "<select id='"+nameNode.text+"' name='"+nameNode.text+"' class='eSelect'>"; //查询该项的所有选择列表项 var itemsNodes = dom.selectNodes (path+"SelectItems/Item"); str += "<option value='-1'>未设置</option>"; for (ii=0;ii<itemsNodes.length;ii++) { aNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]"); //如果该项含有Name属性则在列表中显示Name属性值 attValue = aNode.getAttribute("Name") var txtNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]"); if (attValue==null) str += "<option value='"+txtNode.text+"'>"+txtNode.text+"</option>"; else str += "<option value='"+txtNode.text+"'>"+attValue+"</option>"; } str += "</select>"; } else //如果属性为其他模式,则构建input输入,设置class属性为ActionType { str = "<input name='"+nameNode.text+"' id='"+nameNode.text+"' class='"+actNode.text+"'>"; } return(str);}
设计器初始化
Js脚本读取解析样式元素的style属性值,然后为设计器中构建的控件赋值
//设计器初始化function Init(){ //获得由服务器端赋值的样式属性值 var txt=document.all("DemoShow").style.CSSText; if (txt.length>0) { var strClassName; //解析字符串 var aryClass = txt.split(/[:;]/); for( i in aryClass) { var str = aryClass[i].replace(/(^s*)|(s*$)/g, ""); if(!(i%2==1)) { //当i为奇数时,解析的字符串应该为样式属性名称 strClassName=str; } else { //当i为偶数时,获得属性值 //属性名称即控件ID //判断该属性对应的控件是输入框还是选择列表 if(document.all(strClassName).type=="select-one") { //如果是选择列表通过setIndexOfValue函数设定选择项 setIndexOfValue(strClassName,str); } else { document.all(strClassName).value=str; } } i++; } }}
界面交互
在XML中一共定义了select/input_ColorSelect/input_SizeSelect/input_BorderSelect(后3种为颜色/大小/边框输入模式)共4种输入模式,除select为直接选择外,其他在对应控件初始化的时候作为class属性赋值到控件中,类似class代码如下
/* 颜色输入模式input框的样式类 */.input_ColorSelect{width:100px;font-family:Tahoma;behavior:url(htc/effColorSelect.htc);}
通过behavior属性,把该输入控件和相应的组件相关联,该组件effColorSelect.htc代码如下
<PUBLIC:ATTACH EVENT="onfocus" ONEVENT="getShow()"/><PUBLIC:METHOD NAME="getChange"/><SCRIPT LANGUAGE="JScript"> function getShow(){ element.blur(); //记录当前交互控件的ID effElement=element.id; //在页面中加载输入控件 ShowControl ("SelectColor");}function getChange(){ //当值发生变化时,对可视化样式元素赋值 SetAttribute(element.id,element.value);}</SCRIPT>
其他
设计器中的值输入模式框只是页面中的几个层,通过上面的htc组件触发显示出来,输入后再把值传入到样式属性控件中,同时也会设置可视化样式元素。
另外还需要注意的是,XML文档是可以自行扩展或缩减的,但是在实际应用中,不能完全依据CSS标准来定义,因为可视化元素的style属性会自动格式化。例如如果你在XML中定义border-bottom-width属性,在将值取出时会自动格式化为border-bottom,这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档,所以只有经过实际测试来验证。
OK,比较关键的代码已经差不多了……希望能对大家有所帮助。
参考
另外再列出部分技术参考,如果大家对其中的技术细节如HTC和XmlDom等有所疑问,可以再详细研究一下,也欢迎大家来和我交流 linnchord@tom.com 。
MSDN关于JS操作XmlDom的文档
这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧 :)
(最近MSDN不知道什么毛病,经常访问有问题,如果无法访问,请先登录msdn,再输入地址浏览)
Web/2003/1227.asp" target=_blank>蓝色理想的HTC教程
网上也没看见比较全面的讲述,这个简单易学,基本概念清楚了。 <script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 开发基于Web的CSS设计器.代码参考
- 开发基于Web的CSS设计器.代码参考
- 开发基于Web的CSS设计器
- 开发基于Web的CSS设计器
- web开发不容错过的20段css代码
- Web开发的30段实用CSS代码
- Web项目开发中常用的代码——CSS
- 基于勤哲excel服务器系统的web开发设计
- 基于jquery、canvas开发的jbpm-web设计器的雏形
- Web开发之CSS代码缩写
- 基于AJAX的WEB设计
- 基于AJAX的WEB设计
- 基于AJAX的WEB设计
- web开发优秀的参考资源
- 实用的web开发技术参考网址
- 基于web标准的网页设计与制作知识整理---CSS
- 基于Silverlight4开发的工作流设计器
- Web开发参考文档
- 设计模式C#描述——单例与多例模式
- dwr与session
- ASP.NET中根据XML动态创建并使用WEB组件(一)
- ASP.NET中根据XML动态创建并使用WEB组件(二)
- 我的新Blog
- 开发基于Web的CSS设计器.代码参考
- 在ASP.NET中实现MVC模式(一)
- 我国网民数达2.21亿人超美国居全球首位
- 在DWR调用的java代码中使用Session,Request,Response等
- 在ASP.NET中实现MVC模式(三)
- C# 多网卡 Server Listen
- DWR中取得session等信息
- 越过调试这道槛——ASP.NET无法调试问题剖析
- ASP.NET缓存:方法和最佳实践