這半年參與了一個(gè)基于asp.net的中型應(yīng)用系統(tǒng)開發(fā)，其間經(jīng)歷種種，收獲不少。前段時(shí)間做了一個(gè)基于Web的CSS設(shè)計(jì)器，雖然技術(shù)不算復(fù)雜，不過(guò)綜合了C#/XML/HTC等技術(shù)，對(duì)于大家應(yīng)該有一定參考價(jià)值；而且該設(shè)計(jì)器相對(duì)于系統(tǒng)比較獨(dú)立，因此在這里和大家共享，供大家參考，并請(qǐng)多提意見(jiàn)！

設(shè)計(jì)器的主要功能就是在web界面上設(shè)計(jì)操作CSS樣式表，目的是方便用戶自定義系統(tǒng)界面。

相信做過(guò)Web開發(fā)的人大多用過(guò)Dreamweaver或者做asp.net開發(fā)也應(yīng)該用過(guò)vs.net，那么應(yīng)該熟悉里面的樣式（style）設(shè)計(jì)器，這里就是在Web上實(shí)現(xiàn)這個(gè)設(shè)計(jì)器。


1.系統(tǒng)流程

下面我們先來(lái)了解一下整個(gè)系統(tǒng)流程








































流程再簡(jiǎn)單說(shuō)明一下

·先傳入?yún)��?shù)包括文件名/樣式名/操作方法/可視化樣式元素；其中可視化樣式元素是要在設(shè)計(jì)器中即時(shí)顯現(xiàn)，供效果預(yù)覽的，同時(shí)也是承載樣式定義內(nèi)容的要素（樣式就加載在元素的style屬性上）。

·然后設(shè)計(jì)器根據(jù)傳入?yún)��?shù)操作，根據(jù)操作方法-新建文件/新建樣式/修改樣式，前兩者在初始化時(shí)不用讀取樣式文件，最后者需要讀取樣式進(jìn)行初始化；利用一個(gè)設(shè)計(jì)的C#類來(lái)對(duì)樣式文件和樣式類進(jìn)行操作。

·在客戶端利用Javascript操作XmlDocument對(duì)象讀取XML定義的樣式文件，進(jìn)行設(shè)計(jì)器構(gòu)建。

·利用Javascript通過(guò)樣式元素的cssText屬性讀取樣式值，對(duì)設(shè)計(jì)器初始化。

·用戶操作設(shè)計(jì)器，利用HTC組件操作設(shè)計(jì)樣式。

·保存，利用C#類操作。


2.CSS設(shè)計(jì)器之樣式表操作類

下面，我們來(lái)詳細(xì)察看流程的每個(gè)環(huán)節(jié)。

為了操作樣式表，設(shè)計(jì)了一個(gè)簡(jiǎn)單的樣式表操作類。功能主要是解析操作指定樣式表文件，實(shí)現(xiàn)對(duì)樣式類的添加、修改、刪除、保存。

機(jī)制：讀取Web服務(wù)器上某樣式表文件,將文本轉(zhuǎn)化為一個(gè)ArrayList，數(shù)組元素為自定義的ClassItem對(duì)象,包含Name和Text屬性（Name即樣式名稱，Text即樣式的內(nèi)容）；然后通過(guò)對(duì)ArrayList操作，控制樣式，最后保存。

由于在服務(wù)器段我們不作具體樣式定義，因此該類只操作到樣式類級(jí)別，不涉及樣式屬性和值。

下面提供該類的UML圖 ClassItem 是一個(gè)結(jié)構(gòu)體，僅包含兩個(gè)屬性；




3.CSS設(shè)計(jì)器之XML樣式屬性定義

CSS樣式中包含很多屬性設(shè)置，設(shè)計(jì)器中當(dāng)然要包含相應(yīng)的屬性；那么這些屬性信息從哪里來(lái)呢？

采用XML定義是一種很自然就會(huì)想到的方式。

經(jīng)常使用DW和VS.NET，所以在交互設(shè)計(jì)上采用了類似的模式；先將樣式屬性按應(yīng)用分類，再設(shè)置詳細(xì)屬性。

CSS屬性是比較復(fù)雜的，如果要完全按照DW或VS.NET的模式，實(shí)現(xiàn)會(huì)比較復(fù)雜。為了簡(jiǎn)化，我把值的輸入簡(jiǎn)化為兩種形式，選擇和文本輸入。對(duì)于選擇，直接在XML文件中定義；對(duì)于文本輸入，抽象幾種輸入類型，在設(shè)計(jì)器生成時(shí)根據(jù)類型設(shè)定不同的HTC組件操作。這樣就將一些復(fù)雜的屬性輸入封裝到HTC組件中，整個(gè)構(gòu)架就簡(jiǎn)潔起來(lái)。


XML文件描述

首先是屬性分類

<CSSDesign>
<Category>
<Name>文字</Name>
<Style>
<Name>字體</Name>
......
</Style>
<Style>
<Name>樣式</Name>
......
</Style>
......
</Category>
<Category>
<Name>背景</Name>
<Style>
<Name>顏色</Name>
......
</Style>
......
</Category>
</CSSDesign>

系統(tǒng)分為文字、背景、文本、位置、布局、方框、邊框和其他，每種類型有一個(gè)Name子元素和若干Style子元素。


每個(gè)Style子元素表示一個(gè)Style屬性，結(jié)構(gòu)如下

<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 為該屬性的描述名稱，在設(shè)計(jì)器中為文本描述；

CssName 為屬性名，在設(shè)計(jì)器中即輸入字段的ID，初始化時(shí)也據(jù)此賦值；

ActionType 為屬性設(shè)置方法，在設(shè)計(jì)器中為輸入字段的樣式類名，該樣式中含有Behavior屬性，制定HTC組件；

SelectItems 為選擇項(xiàng)，如果ActionType為Select，將會(huì)在此列出選擇項(xiàng)；其子元素Item如果含有Name屬性，將顯示在設(shè)計(jì)器中，否則直接顯示該元素的文本內(nèi)容


框架圖

此為縮略圖，請(qǐng)點(diǎn)擊打開





4.CSS設(shè)計(jì)器之界面交互

整個(gè)操作交互過(guò)程，除了最后保存文件外，其他都是由javascript完成。

首先DesignerBuild函數(shù)通過(guò)XmlDocumnet讀取XML樣式屬性定義文件，構(gòu)建整個(gè)設(shè)計(jì)器界面。然后Init函數(shù)讀取服務(wù)器端賦給設(shè)計(jì)元素的Style.cssText屬性，并把屬性作為輸入控件ID在設(shè)計(jì)器中查找并賦值，完成初始化。

在操作過(guò)程中，根據(jù)輸入控件的樣式類Class，觸發(fā)綁定的HTC組件，做相應(yīng)的客戶端操作。

最后再讀取設(shè)計(jì)元素的style屬性，保存。


設(shè)計(jì)器界面






不同的設(shè)計(jì)元素





不同輸入控件的不同class屬性（根據(jù)XML中ActionType生成）觸發(fā)不同HTC組件，實(shí)現(xiàn)不同輸入模式。








由于商業(yè)原因，這里不便提供源代碼；我將在后面提供部分關(guān)鍵代碼供參考。

由于時(shí)間有限，無(wú)法一次完成，請(qǐng)見(jiàn)諒。


謝謝大家捧場(chǎng)看了這