ADF Skin Editor的使用

介绍

自从Oracle发布Skin Editor之后，开发ADF Skin变的比之前要简单了，利用Skin Editor做好Skin之后，可以直接将Skin打包成jar，在任何一个ADF的应用中使用。本文就介绍如何使用Skin Editor开发ADF Skin以及发布和使用。

目前Skin Editor的版本是11.1.2.3,点此处访问，通过它可以为ADF11g R2中的11.1.2.0.0~11.1.2.3.0，以及R1版本的11.1.1.4.0~11.1.1.6.0的ADF应用开发Skin。另外，在11.1.2.3.0的Jdeveloper中包含了Skin Editor的功能，不过好像只能为R2版本的ADF开发Skin。

安装

下载好Skin Editor之后，直接解压到文件目录，运行skineditor.exe即可运行。 

使用Skin Editor开发ADF Skin，以ADF Table为例

1.创建Skin Application，

选择菜单Application→New

选择目标ADF应用的版本

2.创建ADF Skin File

3.创建发布的ADF Library

4.使用skin Editor编辑css文件

[css]  view plain copy

1. /**ADFFaces_Skin_File / DO NOT REMOVE**/  
2. @namespace af "http://xmlns.oracle.com/adf/faces/rich";  
3. @namespace dvt "http://xmlns.oracle.com/dss/adf/faces";  
4.   
5.   
6. .AFTableCellPadding:alias {  
7.     padding-left: 2px;  
8.     padding-right: 2px;  
9. }  
10.   
11. .AFTableCellDataBorder:alias {  
12.     border-right: 1px solid #BBD3EB;  
13.     border-bottom: 1px solid #BBD3EB;  
14. }  
15.   
16. .AFTableCellData:alias {  
17.     padding-right: 2px;  
18.     padding-left: 2px;  
19. }  
20.   
21. .AFTableCellDataVGrid:alias {  
22.     /* 垂直线 */  
23.     padding-right: 2px;  
24.     border-right: 1px solid #BBD3EB;  
25. }  
26.   
27. .AFTableCellDataHGrid:alias {  
28.     /* 水平线 */  
29.     border-bottom: 1px solid #BBD3EB;  
30. }  
31.   
32. .AFTableCellHeaderBorder:alias {  
33.     border-bottom: 1px solid #BBD3EB;  
34.     border-right: 1px solid #BBD3EB;  
35. }  
36.   
37.   
38.   
39. af|table {  
40.     -tr-padding-left-width: 2;  
41.     -tr-padding-right-width: 2;  
42.     background-color: InactiveBorder;  
43.     border: 1px solid #BBD3EB;  
44. }  
45.   
46. af|table::column-resize-indicator {border: 1px dotted #002f6c;}  
47.   
48. af|column::column-header-cell {  
49.     background-image: url("images/tb_header.gif");  
50.     background-repeat: repeat-x ;  
51.     background-position: top left;  
52.     text-indent: 0px;  
53.     height: 25px;  
54.     text-align: center;  
55. }  
56.   
57. af|column::column-header-cell-content {  
58.     font-weight: bold;  
59.     text-indent: 0px;  
60. }  
61. /* 奇数行 */  
62. af|column::data-cell {  
63.     background-color: #ffffff;  
64.     height: 22px;  
65.     font-size: 12px;  
66.     font-weight: normal;  
67.     overflow: hidden;  
68. }  
69. /* 偶数行 */  
70. af|column::banded-data-cell {  
71.     background-color: #F7FAFF;  
72.     height: 22px;  
73.     font-size: 12px;  
74.     font-weight: normal;  
75.     overflow: hidden;  
76. }  
77.   
78. /* table focus时鼠标选中时样式 */  
79. af|table::data-row:selected:focused af|column::data-cell, af|table::data-row:selected:focused af|column::banded-data-cell {  
80.     background-color: #C1D8FD;  
81. }  
82. /* table 鼠标选中时样式 */  
83. af|table::data-row:selected af|column::data-cell, af|table::data-row:selected af|column::banded-data-cell {  
84.     background-color: #C1D8FD;  
85. }  
86. /* table 焦点离开时选中table的样式 */  
87. af|table::data-row:selected:inactive af|column::data-cell, af|table::data-row:selected:inactive af|column::banded-data-cell {  
88.     background-color: #C1D8FD;  
89. }  
90. /* table 鼠标划过时样式 */  
91. af|table::data-row:highlighted af|column::data-cell, af|table::data-row:highlighted af|column::banded-data-cell {  
92.     background-color: #E2EBFA;  
93. }  

5.发布

在项目中使用以上发布的jar包

1.新建一个ADF应用程序（11.1.1.6.0，和以上skin匹配），将jar包引入View Controller Project

此处一定需选择deployed by default，否则部署的时候，jar包不会被打包部署到weblogic。

2.修改trinidad-config.xml(注意skin-family标签，和前面步骤中的要一致)

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">  
3.   <skin-family>adfskin</skin-family>  
4. </trinidad-config>  

运行结果

相关主题

http://blog.csdn.net/ygj26/article/details/7945446

参考文献

http://docs.oracle.com/cd/E16162_01/user.1112/e17456/toc.htm

http://jdevadf.oracle.com/adf-richclient-demo/docs/skin-selectors.html

Using ADF Faces 11g Skinning for setting the styles of specific component instances or groups of instances

http://technology.amis.nl/2009/07/01/using-adf-faces-11g-skinning-for-setting-the-styles-of-specific-component-instances-or-groups-of-instances/

转自：http://blog.csdn.net/ygj26/article/details/8299644