介绍
自从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://blog.csdn.net/ygj26/article/details/8299644