设计器的主要功能就是在web界面上设计操作CSS样式表，目的是方便用户自定义系统界面。
相信做过Web开发的人大多用过Dreamweaver或者做asp.net开发也应该用过vs.net，那么应该熟悉里面的样式（style）设计器，这里就是在Web上实现这个设计器。
javascript:DrawImage(this); border=0 pop="按此在新窗口打开图片">1.系统流程
下面我们先来了解一下整个系统流程
流程再简单说明一下
·先传入参数包括文件名/样式名/操作方法/可视化样式元素；其中可视化样式元素是要在设计器中即时显现，供效果预览的，同时也是承载样式定义内容的要素（样式就加载在元素的style属性上）。
·然后设计器根据传入参数操作，根据操作方法-新建文件/新建样式/修改样式，前两者在初始化时不用读取样式文件，最后者需要读取样式进行初始化；利用一个设计的C#类来对样式文件和样式类进行操作。
·在客户端利用Javascript操作XmlDocument对象读取XML定义的样式文件，进行设计器构建。
·利用Javascript通过样式元素的cssText属性读取样式值，对设计器初始化。
·用户操作设计器，利用HTC组件操作设计样式。
·保存，利用C#类操作。
2.CSS设计器之样式表操作类
下面，我们来详细察看流程的每个环节。
为了操作样式表，设计了一个简单的样式表操作类。功能主要是解析操作指定样式表文件，实现对样式类的添加、修改、删除、保存。
机制：读取Web服务器上某样式表文件,将文本转化为一个ArrayList，数组元素为自定义的ClassItem对象,包含Name和Text属性（Name即样式名称，Text即样式的内容）；然后通过对ArrayList操作，控制样式，最后保存。
由于在服务器段我们不作具体样式定义，因此该类只操作到样式类级别，不涉及样式属性和值。
下面提供该类的UML图 ClassItem 是一个结构体，仅包含两个属性；
3.CSS设计器之XML样式属性定义
CSS样式中包含很多属性设置，设计器中当然要包含相应的属性；那么这些属性信息从哪里来呢？
采用XML定义是一种很自然就会想到的方式。
经常使用DW和VS.NET，所以在交互设计上采用了类似的模式；先将样式属性按应用分类，再设置详细属性。
CSS属性是比较复杂的，如果要完全按照DW或VS.NET的模式，实现会比较复杂。为了简化，我把值的输入简化为两种形式，选择和文本输入。对于选择，直接在XML文件中定义；对于文本输入，抽象几种输入类型，在设计器生成时根据类型设定不同的HTC组件操作。这样就将一些复杂的属性输入封装到HTC组件中，整个构架就简洁起来。
XML文件描述
首先是属性分类
<CSSDesign>
<Category>
<Name>文字</Name>
<Style>
<Name>字体</Name>
......
</Style>
<Style>
<Name>样式</Name>
......
</Style>
......
</Category>
<Category>
<Name>背景</Name>
<Style>
<Name>颜色</Name>
......
</Style>
......
</Category>
</CSSDesign>
系统分为文字、背景、文本、位置、布局、方框、边框和其他，每种类型有一个Name子元素和若干Style子元素。
每个Style子元素表示一个Style属性，结构如下
<Style>
<Name>字体</Name>
<CssName>font-family</CssName>
<ActionType>select</ActionType>
<SelectItems>
<Item>verdana,arial</Item>
<Item Name="宋体">SimSun</Item>
<Item Name="黑体">SimHei</Item>
</SelectItems>
</Style>
<Style>
<Name>大小</Name>
<CssName>font-size</CssName>
<ActionType>select</ActionType>
<SelectItems>
<Item>12px</Item>
<Item>14px</Item>
<Item>9px</Item>
</SelectItems>
</Style>
<Style>
<Name>颜色</Name>
<CssName>background</CssName>
<ActionType>input_ColorSelect</ActionType>
</Style>
Name 为该属性的描述名称，在设计器中为文本描述；
CssName 为属性名，在设计器中即输入字段的ID，初始化时也据此赋值；
ActionType 为属性设置方法，在设计器中为输入字段的样式类名，该样式中含有Behavior属性，制定HTC组件；
SelectItems 为选择项，如果ActionType为Select，将会在此列出选择项；其子元素Item如果含有Name属性，将显示在设计器中，否则直接显示该元素的文本内容
框架图
此为缩略图，请点击打开
4.CSS设计器之界面交互
整个操作交互过程，除了最后保存文件外，其他都是由javascript完成。
首先DesignerBuild函数通过XmlDocumnet读取XML样式属性定义文件，构建整个设计器界面。然后Init函数读取服务器端赋给设计元素的Style.cssText属性，并把属性作为输入控件ID在设计器中查找并赋值，完成初始化。
在操作过程中，根据输入控件的样式类Class，触发绑定的HTC组件，做相应的客户端操作。
最后再读取设计元素的style属性，保存。
设计器界面
不同的设计元素
不同输入控件的不同class属性（根据XML中ActionType生成）触发不同HTC组件，实现不同输入模式。
由于商业原因，这里不便提供源代码；我将在后面提供部分关键代码供参考。
| 程序代码： |
| 这里对前面文章讲的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; //将文本转化为ArrayList foreach ( 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'>\n"; //查询该项的所有选择列表项 var itemsNodes = dom.selectNodes (path+"SelectItems/Item"); str += "<option value='-1'>未设置</option>\n"; 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>\n"; else str += "<option value='"+txtNode.text+"'>"+attValue+"</option>\n"; } str += "</select>"; } else //如果属性为其他模式，则构建input输入，设置class属性为ActionType { str = "<input name='"+nameNode.text+"' id='"+nameNode.text+"' class='"+actNode.text+"'>\n"; } 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.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，再输入地址浏览) 蓝色理想的HTC教程 网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。 |
延伸阅读
文章来源于领测软件测试网 https://www.ltesting.net/
