開發基于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教程
網上也沒看見比較全面的講述，這個簡單易學,基本概念清楚了。
