开发基于Web的CSS设计器.代码参考
2024-07-21 02:21:42
供稿：网友
这里对前面文章讲的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='"+txtnode.text+"'>"+txtnode.text+"</option>/n";
else
str += "<option value='"+txtnode.text+"'>"+attvalue+"</option>/n";
}
str += "</select>";
}
else
//如果属性为其他模式，则构建input输入，设置class属性为actiontype
{
str = "<input name='"+namenode.text+"' id='"+namenode.text+"' class='"+actnode.text+"'>/n";
}
return(str);
}
设计器初始化
js脚本读取解析样式元素的style属性值，然后为设计器中构建的控件赋值
//设计器初始化
function init()
{
//获得由服务器端赋值的样式属性值
var txt=document.all("demoshow").style.csstext;
if (txt.length>0)
{
var strclassname;
//解析字符串
var aryclass = txt.split(/[:;]/);
for( i in aryclass)
{
var str = aryclass[i].replace(/(^/s*)|(/s*$)/g, "");
if(!(i%2==1))
{
//当i为奇数时，解析的字符串应该为样式属性名称
strclassname=str;
}
else
{
//当i为偶数时，获得属性值
//属性名称即控件id
//判断该属性对应的控件是输入框还是选择列表
if(document.all(strclassname).type=="select-one")
{
//如果是选择列表通过setindexofvalue函数设定选择项
setindexofvalue(strclassname,str);
}
else
{
document.all(strclassname).value=str;
}
}
i++;
}
}
}
界面交互
在xml中一共定义了select/input_colorselect/input_sizeselect/input_borderselect（后3种为颜色/大小/边框输入模式）共4种输入模式，除select为直接选择外，其他在对应控件初始化的时候作为class属性赋值到控件中，类似class代码如下
/* 颜色输入模式input框的样式类 */
.input_colorselect{
width:100px;
font-family:tahoma;
behavior:url(htc/effcolorselect.htc);
}
通过behavior属性，把该输入控件和相应的组件相关联，该组件effcolorselect.htc代码如下
<public:attach event="onfocus" onevent="getshow()"/>
<public:method name="getchange"/>
<script language="jscript">
function getshow()
{
element.blur();
//记录当前交互控件的id
effelement=element.id;
//在页面中加载输入控件
showcontrol ("selectcolor");
}
function getchange()
{
//当值发生变化时，对可视化样式元素赋值
setattribute(element.id,element.value);
}
</script>
其他
设计器中的值输入模式框只是页面中的几个层，通过上面的htc组件触发显示出来，输入后再把值传入到样式属性控件中，同时也会设置可视化样式元素。
另外还需要注意的是，xml文档是可以自行扩展或缩减的，但是在实际应用中，不能完全依据css标准来定义，因为可视化元素的style属性会自动格式化。例如如果你在xml中定义border-bottom-width属性，在将值取出时会自动格式化为border-bottom，这样会造成设计器中控件不能匹配。我在msdn没有查到相关文档，所以只有经过实际测试来验证。
ok,比较关键的代码已经差不多了……希望能对大家有所帮助。
参考
另外再列出部分技术参考，如果大家对其中的技术细节如htc和xmldom等有所疑问，可以再详细研究一下，也欢迎大家来和我交流 [email protected] 。
msdn关于js操作xmldom的文档
这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧 :)
(最近msdn不知道什么毛病，经常访问有问题，如果无法访问，请先登录msdn，再输入地址浏览)
蓝色理想的htc教程
网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。
