CSS设计器之XML样式属性定义

星期二, 四月 27th, 2004

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源文件

XML/XSL实现界面自定义

星期二, 二月 24th, 2004

最近比较忙……

公司的项目目前进入了代码开发阶段,不过很多构架设计上的东西都还不清楚,我觉得应该还算是设计阶段。

目前系统要实现完全自定义界面,按项目经理说这个搞出来了,后面的业务界面就不用每个开发了。界面的实现方式是XML/XSLT/CSS的实现,而且最后要达到可视化设计实现。项目经理描述的是,针对不同的业务逻辑,产生不同的XML,然后用匹配的XSLT进行解释,生成aspx页面。

坦白的说,这个描述是不是反映了项目经理的原意,我也不太清楚,因为我一直也没弄明白整个构架实现的机制。只是我觉得在这种从上到下都不熟悉XML/XSLT,只是因为大约的了解,就贸然采用方案,对于这样一个时间紧迫的项目而言,风险实在不小。

上面的实现,说来还仅仅是难度较大、实现困难,但是希望象普通web编辑器那样可视化生成XSLT,那几乎就是不可实现的了。XSLT并非仅仅是对外观的格式化描述,还带有很多可编程元素,目前甚至有的系统完全采用xslt作为业务逻辑控制,可想其复杂性。目前还没有哪个软件能够实现可视化操作的,当然从功能和应用本身来说也没有这个必要。

我很担心因为技术难度过大而导致项目风险的大大增加,延期是肯定的了,只是希望最后不要失败才好。我做事情通常会先确保一个必须达到的最低标准,然后在比较有把握的情况下作锦上添花的工作。这算是比较保守吧,毕竟这不是我一个人的事情,有责任在。

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