3.CSS设计器之xml样式属性定义
CSS样式中包含很多属性设置,设计器中当然要包含相应的属性;那么这些属性信息从哪里来呢?
采用xml定义是一种很自然就会想到的方式。
经常使用DW和VS.NET,所以在交互设计上采用了类似的模式;先将样式属性按应用分类,再设置详细属性。
CSS属性是比较复杂的,如果要完全按照DW或VS.NET的模式,实现会比较复杂。为了简化,我把值的输入简化为两种形式,选择和文本输入。对于选择,直接在xml文件中定义;对于文本输入,抽象几种输入类型,在设计器生成时根据类型设定不同的HTC组件操作。这样就将一些复杂的属性输入封装到HTC组件中,整个构架就简洁起来。
xml文件描述
首先是属性分类
......
......
系统分为文字、背景、文本、位置、布局、方框、边框和其他,每种类型有一个Name子元素和若干Style子元素。
每个Style子元素表示一个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组件,实现不同输入模式。
由于商业原因,这里不便提供源代码;我将在后面提供部分关键代码供参考。