这里对前面文章讲的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++)
}
样式输入控件构建函数，该函数作用是根据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>";
}
else
//如果属性为其他模式，则构建input输入，设置class属性为ActionType
return(str);
}
设计器初始化
Js脚本读取解析样式元素的style属性值，然后为设计器中构建的控件赋值
//设计器初始化
function Init()
{
//获得由服务器端赋值的样式属性值
var txt=document.all("DemoShow").style.CSSText;
if (txt.length>0)
else
else
}
i++;
}
}
}
界面交互
在xml中一共定义了select/input_ColorSelect/input_SizeSelect/input_BorderSelect（后3种为颜色/大小/边框输入模式）共4种输入模式，除select为直接选择外，其他在对应控件初始化的时候作为class属性赋值到控件中，类似class代码如下
/* 颜色输入模式input框的样式类 */
.input_ColorSelect
通过behavior属性，把该输入控件和相应的组件相关联，该组件effColorSelect.htc代码如下
<PUBLIC:ATTACH EVENT="onfocus" ONEVENT="getShow()"/>
<PUBLIC:METHOD NAME="getChange"/>
<SCRIPT LANGUAGE="JScript">
function getShow()
function getChange()
</SCRIPT>
其他
设计器中的值输入模式框只是页面中的几个层，通过上面的htc组件触发显示出来，输入后再把值传入到样式属性控件中，同时也会设置可视化样式元素。
另外还需要注意的是，xml文档是可以自行扩展或缩减的，但是在实际应用中，不能完全依据CSS标准来定义，因为可视化元素的style属性会自动格式化。例如如果你在xml中定义border-bottom-width属性，在将值取出时会自动格式化为border-bottom，这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档，所以只有经过实际测试来验证。
OK,比较关键的代码已经差不多了……希望能对大家有所帮助。
