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文件

 /**ADFFaces_Skin_File / DO NOT REMOVE**/
 @namespace af "http://xmlns.oracle.com/adf/faces/rich";
 @namespace dvt "http://xmlns.oracle.com/dss/adf/faces";


 .AFTableCellPadding:alias {
     padding-left: 2px;
     padding-right: 2px;
 }

 .AFTableCellDataBorder:alias {
     border-right: 1px solid #BBD3EB;
     border-bottom: 1px solid #BBD3EB;
 }

 .AFTableCellData:alias {
     padding-right: 2px;
     padding-left: 2px;
 }

 .AFTableCellDataVGrid:alias {
     /* 垂直线 */
     padding-right: 2px;
     border-right: 1px solid #BBD3EB;
 }

 .AFTableCellDataHGrid:alias {
     /* 水平线 */
     border-bottom: 1px solid #BBD3EB;
 }

 .AFTableCellHeaderBorder:alias {
     border-bottom: 1px solid #BBD3EB;
     border-right: 1px solid #BBD3EB;
 }



 af|table {
     -tr-padding-left-width: 2;
     -tr-padding-right-width: 2;
     background-color: InactiveBorder;
     border: 1px solid #BBD3EB;
 }

 af|table::column-resize-indicator {border: 1px dotted #002f6c;}

 af|column::column-header-cell {
     background-image: url("images/tb_header.gif");
     background-repeat: repeat-x ;
     background-position: top left;
     text-indent: 0px;
     height: 25px;
     text-align: center;
 }

 af|column::column-header-cell-content {
     font-weight: bold;
     text-indent: 0px;
 }
 /* 奇数行 */
 af|column::data-cell {
     background-color: #ffffff;
     height: 22px;
     font-size: 12px;
     font-weight: normal;
     overflow: hidden;
 }
 /* 偶数行 */
 af|column::banded-data-cell {
     background-color: #F7FAFF;
     height: 22px;
     font-size: 12px;
     font-weight: normal;
     overflow: hidden;
 }

 /* table focus时鼠标选中时样式 */
 af|table::data-row:selected:focused af|column::data-cell, af|table::data-row:selected:focused af|column::banded-data-cell {
     background-color: #C1D8FD;
 }
 /* table 鼠标选中时样式 */
 af|table::data-row:selected af|column::data-cell, af|table::data-row:selected af|column::banded-data-cell {
     background-color: #C1D8FD;
 }
 /* table 焦点离开时选中table的样式 */
 af|table::data-row:selected:inactive af|column::data-cell, af|table::data-row:selected:inactive af|column::banded-data-cell {
     background-color: #C1D8FD;
 }
 /* table 鼠标划过时样式 */
 af|table::data-row:highlighted af|column::data-cell, af|table::data-row:highlighted af|column::banded-data-cell {
     background-color: #E2EBFA;
 }

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标签，和前面步骤中的要一致)

 xml version="1.0" encoding="UTF-8"?>
 <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
   <skin-family>adfskinskin-family>
 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