開發基于Web的CSS設計器
2024-07-21 02:16:21
供稿：網友
國內最大的酷站演示中心!
這半年參與了一個基于asp.net的中型應用系統開發，其間經歷種種，收獲不少。前段時間做了一個基于web的css設計器，雖然技術不算復雜，不過綜合了c#/xml/htc等技術，對于大家應該有一定參考價值；而且該設計器相對于系統比較獨立，因此在這里和大家共享，供大家參考，并請多提意見！
設計器的主要功能就是在web界面上設計操作css樣式表，目的是方便用戶自定義系統界面。
相信做過的人大多用過dreamweaver或者做asp.net開發也應該用過vs.net，那么應該熟悉里面的樣式（style）設計器，這里就是在web上實現這個設計器。
1.系統流程
下面我們先來了解一下整個系統流程
流程再簡單說明一下
·先傳入參數包括文件名/樣式名/操作方法/可視化樣式元素；其中可視化樣式元素是要在設計器中即時顯現，供效果預覽的，同時也是承載樣式定義內容的要素（樣式就加載在元素的style屬性上）。
·然后設計器根據傳入參數操作，根據操作方法-新建文件/新建樣式/修改樣式，前兩者在初始化時不用讀取樣式文件，最后者需要讀取樣式進行初始化；利用一個設計的c#類來對樣式文件和樣式類進行操作。
·在客戶端利用javascript操作xmldocument對象讀取xml定義的樣式文件，進行設計器構建。
·利用javascript通過樣式元素的csstext屬性讀取樣式值，對設計器初始化。
·用戶操作設計器，利用htc組件操作設計樣式。
·保存，利用c#類操作。
2.css設計器之樣式表操作類
下面，我們來詳細察看流程的每個環節。
為了操作樣式表，設計了一個簡單的樣式表操作類。功能主要是解析操作指定樣式表文件，實現對樣式類的添加、修改、刪除、保存。
機制：讀取web服務器上某樣式表文件,將文本轉化為一個arraylist，數組元素為自定義的classitem對象,包含name和text屬性（name即樣式名稱，text即樣式的內容）；然后通過對arraylist操作，控制樣式，最后保存。
由于在服務器段我們不作具體樣式定義，因此該類只操作到樣式類級別，不涉及樣式屬性和值。
下面提供該類的uml圖 classitem 是一個結構體，僅包含兩個屬性；
3.css設計器之xml樣式屬性定義
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屬性，將顯示在設計器中，否則直接顯示該元素的文本內容
框架圖
此為縮略圖，請點擊打開
4.css設計器之界面交互
整個操作交互過程，除了最后保存文件外，其他都是由javascript完成。
首先designerbuild函數通過xmldocumnet讀取xml樣式屬性定義文件，構建整個設計器界面。然后init函數讀取服務器端賦給設計元素的style.csstext屬性，并把屬性作為輸入控件id在設計器中查找并賦值，完成初始化。
在操作過程中，根據輸入控件的樣式類class，觸發綁定的htc組件，做相應的客戶端操作。
最后再讀取設計元素的style屬性，保存。
設計器界面
不同的設計元素
不同輸入控件的不同class屬性（根據xml中actiontype生成）觸發不同htc組件，實現不同輸入模式。
由于商業原因，這里不便提供源代碼；我將在后面提供部分關鍵代碼供參考。
由于時間有限，無法一次完成，請見諒。
謝謝大家捧場看了這么久 :)
