 |
教程: ASP.NET教程-.NET技巧-开发基于Web的CSS设计器 |
 |
|
|
| 教程: ASP.NET教程-.NET技巧-开发基于Web的CSS设计器 |
|
|
|
|
.quickviews.net/data/css/" target="_blank" class="keylink">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组件，实现不同输入模式。
由于商业原因，这里不便提供源代码；我将在后面提供部分关键代码供参考。
程序代码：
这里对前面文章讲的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 )
{
//获取集合中的节点
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'>\n";
//查询该项的所有选择列表项
var itemsNodes = dom.selectNodes (path "SelectItems/Item");
str = "<option value='-1'>未设置</option>\n";
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='" txtNod
上一页 [1] [2] [3] [4] 下一页
|
|
| 教程录入：admin 责任编辑：admin |
|
|
上一篇教程： 教程: ASP.NET教程-.NET技巧-ASP.NET无法调试问题剖析
下一篇教程： 教程: ASP.NET教程-.NET技巧-用ImessageFilter接口实现截获键盘消息 |
|
|
|
|
|
|
|
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
|
|
|
|
|
