Dorado 5 : 15.2.定制组件皮肤 (RF1)

This page last changed on Dec 07, 2010 by thomas.ding@bstek.com.

系统组件皮肤设定

以上所说的都是如何指定统皮肤，皮肤设定当中很大的一块工作都是定制组件皮肤，组件皮肤的设定主要是通过[dorado home]/smartweb/v2/skins皮肤目录下的图片以及skin.css文件设定，如skin.css文件中关于button皮肤的设定如下:

.Button {
cursor: hand;
font-family: Verdana;
font-size: 9pt;
height: 22;
border-width: 1;
border-color: #CCCCCC;
border-style: solid;
background-color: buttonface;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DDDDDD);
}

.Button_Down {
color: white;
cursor: hand;
font-family: Verdana;
font-size: 9pt;
height: 22;
border-width: 1;
border-color: #555555;
border-style: solid;
background-color: #999999;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#777777, endColorstr=#BBBBBB);
}

不同组件皮肤的CSS详细说明参考<<dorado5 组件使用详解>>。
如果我们通过skin.css文件实现了皮肤修改，则整个系统都会的风格都具有统一性。

页面级的皮肤设定

以上通过skin.css文件处理系统皮肤的方式是系统级别的，如果只是希望实现具体某个页面的具体按钮的特殊皮肤指定，我们还可以通过如下的两种方式特别设定:

皮肤重载

如按钮皮肤的设定中我们可以在jsp中在<d:View>标签之后加入如下的申明即可重载调整系统默认的按钮皮肤风格:

.Button {
cursor: help;
font-family: Verdana;
font-size: 9pt;
height: 22;
border-width: 1;
border-color: #CCCCCC;
border-style: solid;
background-color: buttonface;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DDDDDD);
}

在Button的CSS设定中我们修改其cursor为help。这样就相当于覆盖了系统默认的.Button皮肤设定。

指定新的classname

Dorado所有可视化的组件都提供了style属性，该属性主要就用于皮肤指定时自定义classname所用，如上节的皮肤设定中，可以在jsp页面中添加如下代码:

.ButtonCustom {
cursor: hand;
font-family: Verdana;
font-size: 9pt;
height: 22;
border-width: 1;
border-color: #CCCCCC;
border-style: solid;
background-color: buttonface;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DDDDDD);
}

.ButtonCustom_Down {
color: white;
cursor: hand;
font-family: Verdana;
font-size: 9pt;
height: 22;
border-width: 1;
border-color: #555555;
border-style: solid;
background-color: #999999;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#777777, endColorstr=#BBBBBB);
}

以上代码中将所有的Button相关的css name调整为ButtonCustom，注意一个可视化组件一般都会有多个classname与之对应，但是都有相同的前缀。在重命名之后注意完整性。
之后就可以设定button的定义:

<Control id="buttonDeleteSelection" type="Button"
value="删除选中记录" command="commandDeleteSelection"
style="ButtonCustom" />

这样就完成了组件新classname的指定工作。