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>

運行結果

相關主題

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