开发基于Web的CSS设计器.代码参考

这里对前面文章讲的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

  1<intcategory; !="**null**" (="" (actnode.text="select" (onode="" )="" **function**="" **if**="" **var**="" +="&lt;select id='" +namenode.text+"'="" ---="" ;="" actnode='dom.selectSingleNode(path+"ActionType");' anode="**null**" attvalue="**null**" buildinput="" class="eSelect" i++)="" name='"+nameNode.text+"' namenode='dom.selectSingleNode(path+"CssName");' onode="oNodes.nextNode;" path="" str="" {="" }="" ……="" 如果属性为选择输入，则读取selectitems，并构建select控件="" 样式分类界面构建代码-略="" 样式输入控件构建函数，该函数作用是根据xpath路径查询xml定义，生成交互控件="" 获取集合中的节点="" 通过selectsinglenode返回符合条件的第一个节点="">\n";
  2          
  3          //查询该项的所有选择列表项
  4           **var** itemsNodes = dom.selectNodes (path+"SelectItems/Item");
  5          str += "<option value="-1">未设置</option>\n";
  6          **for** (ii=0;ii<itemsnodes.length;ii++) (attvalue="**null**" (path+"selectitems="" )="" **if**="" **var**="" +="&lt;option value='" +txtnode.text+"'="" anode="dom.selectSingleNode" attvalue='aNode.getAttribute("Name")' item["+ii+"]");="" str="" txtnode="dom.selectSingleNode" {="" 如果该项含有name属性则在列表中显示name属性值="">"+txtNode.text+"\n";
  7             **else**
  8                str += "<option value='"+txtNode.text+"'>"+attValue+"</option>\n";
  9          }
 10          
 11          str += "";
 12       }
 13       **else**
 14       
 15       //如果属性为其他模式，则构建input输入，设置class属性为ActionType
 16       {
 17          str = "<input class='"+actNode.text+"' id='"+nameNode.text+"' name='"+nameNode.text+"'/>\n";
 18       }
 19       
 20       **return** (str);
 21    }
 22      
 23  
 24---  
 25  
 26  
 27  
 28**设计器初始化  
 29**   
 30Js脚本读取解析样式元素的style属性值，然后为设计器中构建的控件赋值   
 31  
 32
 33    
 34    
 35    //设计器初始化
 36    **function** Init()
 37    {
 38       //获得由服务器端赋值的样式属性值
 39       **var** txt=document.all("DemoShow").style.cssText;
 40       **if** (txt.length&gt;0)
 41       {
 42          **var** strClassName;
 43          
 44          //解析字符串
 45           **var** aryClass = txt.split(/[:;]/);
 46          **for** ( i **in** aryClass)
 47          {
 48             **var** str = aryClass[i].replace(/(^\s*)|(\s*$)/g, "");
 49             **if** (!(i%2==1))
 50             {
 51                //当i为奇数时，解析的字符串应该为样式属性名称
 52                strClassName=str;
 53             }
 54             **else**
 55             {
 56                //当i为偶数时，获得属性值
 57                  //属性名称即控件ID
 58                //判断该属性对应的控件是输入框还是选择列表            
 59                **if** (document.all(strClassName).type=="select-one")
 60                {
 61                   
 62                   //如果是选择列表通过setIndexOfValue函数设定选择项
 63                   setIndexOfValue(strClassName,str);
 64                   
 65                }
 66                **else**
 67                {
 68                   document.all(strClassName).value=str;
 69                }
 70             }
 71             i++;
 72          }
 73       }
 74    }
 75      
 76  
 77---  
 78  
 79  
 80  
 81**界面交互**   
 82  
 83在XML中一共定义了select/input_ColorSelect/input_SizeSelect/input_BorderSelect（后3种为颜色/大小/边框输入模式）共4种输入模式，除select为直接选择外，其他在对应控件初始化的时候作为class属性赋值到控件中，类似class代码如下    
 84  
 85
 86    
 87    
 88    /* 颜色输入模式input框的样式类 */
 89    .input_ColorSelect{
 90    width:100px;
 91    font-family:Tahoma;
 92    behavior:url(htc/effColorSelect.htc);
 93    }
 94      
 95  
 96---  
 97  
 98  
 99通过behavior属性，把该输入控件和相应的组件相关联，该组件effColorSelect.htc代码如下   
100  
101
102    
103    
104    <public:attach event="onfocus" onevent="getShow()"></public:attach>
105<public:method name="getChange"></public:method>
106<script language="JScript"> 
107    **function** getShow()
108    {
109       element.blur();
110       
111       //记录当前交互控件的ID
112       effElement=element.id;
113       //在页面中加载输入控件
114       ShowControl ("SelectColor");
115    }
116    
117    **function** getChange()
118    {
119       //当值发生变化时，对可视化样式元素赋值
120       SetAttribute(element.id,element.value);
121    }
122    </script> 
123    
124      
125  
126---  
127  
128  
129  
130**其他**   
131  
132设计器中的值输入模式框只是页面中的几个层，通过上面的htc组件触发显示出来，输入后再把值传入到样式属性控件中，同时也会设置可视化样式元素。   
133  
134另外还需要注意的是，XML文档是可以自行扩展或缩减的，但是在实际应用中，不能完全依据CSS标准来定义，因为可视化元素的style属性会自动格式化。例如如果你在XML中定义border-bottom-width属性，在将值取出时会自动格式化为border-bottom，这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档，所以只有经过实际测试来验证。    
135  
136  
137OK,比较关键的代码已经差不多了……希望能对大家有所帮助。   
138  
139  
140**参考**   
141  
142另外再列出部分技术参考，如果大家对其中的技术细节如HTC和XmlDom等有所疑问，可以再详细研究一下，也欢迎大家来和我交流 [email protected] 。   
143  
144MSDN关于JS操作XmlDom的文档   
145这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧 :)   
146(最近MSDN不知道什么毛病，经常访问有问题，如果无法访问，请先登录msdn，再输入地址浏览)   
147  
148蓝色理想的HTC教程   
149网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。</itemsnodes.length;ii++)></intcategory;>