开发基于Web的CSS设计器
2024-07-21 02:16:21
供稿：网友
国内最大的酷站演示中心!
这半年参与了一个基于asp.net的中型应用系统开发，其间经历种种，收获不少。前段时间做了一个基于web的css设计器，虽然技术不算复杂，不过综合了c#/xml/htc等技术，对于大家应该有一定参考价值；而且该设计器相对于系统比较独立，因此在这里和大家共享，供大家参考，并请多提意见！
设计器的主要功能就是在web界面上设计操作css样式表，目的是方便用户自定义系统界面。
相信做过的人大多用过dreamweaver或者做asp.net开发也应该用过vs.net，那么应该熟悉里面的样式（style）设计器，这里就是在web上实现这个设计器。
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组件，实现不同输入模式。
由于商业原因，这里不便提供源代码；我将在后面提供部分关键代码供参考。
由于时间有限，无法一次完成，请见谅。
谢谢大家捧场看了这么久 :)
