開發基於Web的CSS設計器.代碼參考

來源:互聯網
上載者:User
css|web|參考|設計 這裡對前面文章講的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等有所疑問,可以再詳細研究一下,也歡迎大家來和我交流 linnchord@tom.com 。

MSDN關於JS操作XmlDom的文檔
這是英文文檔,網上沒有看到比較詳細的中文文檔,好在不複雜,大家將就一下吧 :)
(最近MSDN不知道什麼毛病,經常訪問有問題,如果無法訪問,請先登入msdn,再輸入地址瀏覽)

藍色理想的HTC教程
網上也沒看見比較全面的講述,這個簡單易學,基本概念清楚了。

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。