这里对前面讲的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'>";

//查询该项的所有选择列表项 
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);
}

不断学习的过程中，经常遇到一些代码编写技巧性的东西，虽然通常不是什么特别困难的技术问题，不过也十分重要。

说明: 将下面代码加入干净的aspx页或隐藏代码页即可(此处假设页面为download.aspx)；
效果: 链接到地址[download.aspx?file=filename]直接产生下载；
目的: 与直接链接文件地址下载方式比较，可以在下载前加入代码，统计下载数；另外，根据需要可以改写参数(例如改为数据库中该下载文件记录的id)，做简单的代码处理，就可以在一定程度上隐藏下载地址，防止盗链……

Response.AddHeader(“Content-Length”, file.Length.ToString());
Response.ContentType = “application/octet-stream”;
Response.WriteFile(file.FullName);
Response.End();
}

整个操作交互过程，除了最后保存文件外，其他都是由javascript完成。

首先DesignerBuild函数读取XML样式属性定义文件，构建整个设计器界面。然后Init函数读取服务器端赋给设计元素的Style属性，并把属性作为输入控件ID在设计器中查找并赋值，完成初始化。

在操作过程中，根据输入控件的样式类Class，触发绑定的HTC组件，做相应的客户端操作。

最后再读取设计元素的style属性，保存。

设计器界面

不同的设计元素

不同输入控件的不同class属性（根据XML中ActionType生成）触发不同HTC组件，实现不同输入模式。

由于商业原因，这里不便提供源代码；我将在后面提供部分关键代码供参考。

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属性，将显示在设计器中，否则直接显示该元素的文本内容

框架图

XML源文件

为了操作样式表，设计了一个简单的样式表操作类。功能主要是解析操作指定样式表文件，实现对样式类的添加、修改、删除、保存。

机制：读取Web服务器上某样式表文件,将文本转化为一个ArrayList，数组元素为自定义的ClassItem对象,包含Name和Text属性（Name即样式名称，Text即样式的内容）；然后通过对ArrayList操作，控制样式，最后保存。

由于在服务器段我们不作具体样式定义，因此该类只操作到样式类级别，不涉及样式属性和值。

下面提供该类的UML图 ClassItem 是一个结构体，仅包含两个属性；

最近做了一个CSS设计器，主要功能是在web界面上操作设计CSS样式表，目的是方便用户自定义系统界面。

其实我个人看法这个东西并没有太大必要，对于最终用户来说，一般不熟悉网页制作，是不可能进行这种操作的，而且就系统整体来考虑，也不应该给用户这种权限。另外，相对于本来就比较紧张时间资源来讲，花这么多时间，实现这种用户需求优先度较低的功能，实在不合算……

奈何项目经理雄心勃勃，在大而全的方针指导下，不得不做啊。

月初就作的差不多，来总结一下吧

流程再简单说明一下

1．如果可能尽量使用接口来编程

所以，在初始化变量的时候不要用基类中的数据，因为它们还没有被构造。

这两天看了看JSP，查资料安装调试系统花了半天，Tomcat5.0.19 + SqlServer2K JDBC + Eclipse2.1.2。

JSP粗略看了看，感觉几点

• 细节琐碎，很多代码细节比较琐碎，写起来很麻烦；
• 命名不友好，一些方法、类等等命名不够友好，直观看不清楚什么意思，可能是我习惯了.NET的命名，不过记得我初学.NET时对命名理解还是很清楚的啊；
• 错误异常很难懂，我的英文虽然不咋地，但是看计算机英语也很久了，一般都没有什么问题，不过tomcat的Erro页面完全没看懂……

可能是我还不习惯Java的文化吧 我对java强大的企业级开发技术很有兴趣，以后还要多花时间来看看。

Eclipse这个IDE虽然很多地方不如VS，不过在重构应用上有很多让我惊喜赞叹的地方，她对不同项目对象包括项目、包、类、方法、属性等等都有不同的重构应用，还有JUnit测试，不知道.NET什么时候才能具备这些特性……

Eclipse截图两张

很让人兴奋的消息,到了3.31去看,虽然早有心理准备,知道不可能有太多内容,但还是有几分失望,内容太少了点,还是继续看英文版吧.

应用程序设计指南：从 N 层到 .NET
概要描述了Windows DNA构架和.NET构架下的设计,讲的比较清楚,可以看看,清晰一下.

领悟Web设计模式
一篇Web设计模式入门文章,浅显易懂,如果刚入门可以看看参考一下.

如何快速实现HTML编辑器.NET组件
过于快速的东西总是不太稳妥的,在稳定性和性能上会损失一些,不过这个例子可以初步了解一下如何封装一个简单的组件.

大数据量下的分页
两种大数据量分页方法,具有参考价值,或者直接照搬也不错啊

使用NUnit在.Net编程中进行单元测试
不错的文章,以前没做过NUnit的单元测试,要试试.

利用数据库模版创建方便部署的.Net项目调试环境
数据库部署,以前没这么做过,要试试!

MVP专栏作家列表

社区成员原创文章

最近比较忙……

目前我做一个CSS生成器，基本就是模仿VS.NET或DW的CSS生成器。计划采用XML/XSLT/XSD/Javascript开发，利用 XSD作数据约束，XSLT/JS作界面和交互控制，XML保存数据。我目前对具体技术还不清楚，不知道这么构架是否可行……先看书吧……