Skin-Builder 是什么

Skin-Builder是一套dorado控件的皮膚定制工具，通過(guò)它你可以通過(guò)可視化的方式修改和調(diào)整控件的CSS風(fēng)格，而不要掌握很多CSS底層的實(shí)現(xiàn)細(xì)節(jié)。

Skin-Builder 功能簡(jiǎn)介與功能列表

?

Skin-Builder 入門教程

創(chuàng)建皮膚

登陸Skin-Builder 通過(guò)這個(gè)網(wǎng)址訪問(wèn)Skin-Builder:http://dorado.bstek.com/skin-builder/Main.d?并用微信賬號(hào)登陸，選擇一套皮膚。 下面我們就以經(jīng)典水晶皮膚珊瑚礁的定制為例詳細(xì)說(shuō)明使用過(guò)程。 首先打開(kāi)珊瑚礁的皮膚，進(jìn)入皮膚維護(hù)管理界面: 首先我們單擊另存為按鈕，將這套皮膚另外起一個(gè)名字，并確定存儲(chǔ)。 保存好之后當(dāng)前工作空間自動(dòng)切換到新的皮膚編輯維護(hù)狀態(tài)。

使用皮膚

繼續(xù)上面，然后單擊下載皮膚按鈕，下載當(dāng)前的皮膚,這個(gè)時(shí)候會(huì)有一個(gè)彈出框，告訴你如何使新的皮膚起作用，你按照步驟做就可以: 點(diǎn)擊下載按鈕我們就獲得一個(gè)名稱為dorado-skin-cay2015-1.0.0.jar文件，把這個(gè)jar放在項(xiàng)目的lib下: 然后找到WEB-INF下的dorado-home下的configure.properties配置文件，設(shè)置view.skin的值: 這樣這套新皮膚就起作用了。 但是就目前而言，這套皮膚和你之前看的可能并沒(méi)有什么差別，下面我們嘗試修改這套皮膚，再來(lái)查看效果。

修改皮膚

當(dāng)你用自己的BSDN賬號(hào)登陸Skin-Builder后可以看到自己定制的皮膚，我們回到皮膚管理的主界面上看: 之前我們創(chuàng)建的cay2015就出現(xiàn)在我的皮膚列表中，現(xiàn)在我們可以雙擊cay2015皮膚包，進(jìn)入編輯界面。 例如我們希望修改Grid的皮膚，可以找到列表型控件的分類。 修改表格當(dāng)前行的顏色: 調(diào)整列表當(dāng)前行立體度和列表標(biāo)題欄立體度為0. 并設(shè)置表格標(biāo)題欄顏色： 設(shè)置好之后你可以單擊預(yù)覽按鈕，預(yù)覽效果(如本例，你需要切換到表格標(biāo)簽頁(yè)): 如果效果符合預(yù)期，則單擊保存按鈕，先保存當(dāng)前的皮膚。然后再次下載皮膚，這個(gè)時(shí)候皮膚的版本好會(huì)自動(dòng)升級(jí)一個(gè)版本，如本例你獲得的文件將會(huì)是:?dorado-skin-cay2015-1.0.1.jar 把這個(gè)jar放在項(xiàng)目的lib中(注意刪除老版本的皮膚jar包，本例為:dorado-skin-cay2015-1.0.0.jar). 然后重新啟動(dòng)項(xiàng)目，這個(gè)時(shí)候Grid控件的皮膚就變成新的了：