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