ADF11g-024：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>adfskin</skin-family>
</trinidad-config>

运行结果

相关主题

/article/1570170.html

参考文献

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/