ADF界面使用多皮肤
概述
本文主要描述了在新版本的JDeveloper（11.1.2.1）当中，ADF页面如何使用多皮肤。
内容主要包括：
1. 使用ADF Skin Editor开发多个皮肤
2. 开发选择皮肤组件
源码及文档下载：here
实现
1.创建应用ADF应用
2.创建皮肤
NewSkin1
NewSkin2
3.开发页面
创建页面
编辑页面以及选择皮肤处理逻辑
1: <?xml version='1.0' encoding='UTF-8'?>
2: <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
3: xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
4: <jsp:directive.page contentType="text/html;charset=UTF-8"/>
5: <f:view>
6: <af:document title="useSkin" id="d1">
7: <af:form id="f1">
8: <af:outputText value="How To Use Skin !!" id="ot1"/>
9: <af:toolbox id="t1">
10: <af:menuBar id="mb1">
11: <af:menu text="Change Skin" id="m1">
12: <af:commandMenuItem text="NewSkin1" id="cmi1" type="radio"
13: selected="#{sessionScope.skinFamily == 'NewSkin1'}"
14: actionListener="#{SkinBean.selectSkinMenuAction}"/>
15: <af:commandMenuItem text="NewSkin2" id="cmi2" type="radio"
16: selected="#{sessionScope.skinFamily == 'NewSkin2'}"
17: actionListener="#{SkinBean.selectSkinMenuAction}"/>
18: </af:menu>
19: </af:menuBar>
20: </af:toolbox>
21: </af:form>
22: </af:document>
23: </f:view>
24: </jsp:root>
backing bean
1: package com.dickluo.howto.useskin.view.backing;
2:
3: import java.io.IOException;
4:
5: import java.util.Map;
6:
7: import javax.faces.context.ExternalContext;
8: import javax.faces.context.FacesContext;
9: import javax.faces.event.ActionEvent;
10:
11: import oracle.adf.controller.ControllerContext;
12: import oracle.adf.share.ADFContext;
13: import oracle.adf.view.rich.component.rich.nav.RichCommandMenuItem;
14:
15: public class SkinBean {
16: /**
17: * 构造函数
18: * 初始化皮肤为fusion，即为ADF默认的皮肤
19: */
20: public SkinBean() {
21: ADFContext adfctx = ADFContext.getCurrent(); //获取当前adf context
22: Map sessionScope = adfctx.getSessionScope(); //获取 session scop
23: Object skinFamily = sessionScope.get("skinFamily");
24: if (skinFamily == null) {
25: sessionScope.put("skinFamily", "fusion"); //初始化skinFamily变量，即为SessionScop.skinFamily
26: }
27: }
28:
29: /**
30: * 选择皮肤菜单事件
31: * @param actionEvent
32: */
33: public void selectSkinMenuAction(ActionEvent actionEvent) {
34: RichCommandMenuItem menuItem = (RichCommandMenuItem)actionEvent.getComponent(); //获取菜单项
35: ADFContext adfctx = ADFContext.getCurrent();
36: Map sessionScope = adfctx.getSessionScope();
37: sessionScope.put("skinFamily", menuItem.getText());//将skinFamily设置为菜单项的文本
38: redirectToSelf();
39: }
40: /**
41: * 重定向到当前页面（刷新当前页面）
42: */
43: private void redirectToSelf() {
44: FacesContext fctx = FacesContext.getCurrentInstance();
45: ExternalContext ectx = fctx.getExternalContext();
46: String viewId = fctx.getViewRoot().getViewId();
47: ControllerContext controllerCtx = null;
48: controllerCtx = ControllerContext.getInstance();
49: String activityURL = controllerCtx.getGlobalViewActivityURL(viewId);
50: try {
51: ectx.redirect(activityURL);
52: fctx.responseComplete();
53: } catch (IOException e) {
54: //Can't redirect
55: e.printStackTrace();
56: fctx.renderResponse();
57: }
58: }
59: }
4.编辑皮肤
NewSkin1：
![clip_image002[4]](http://blog.retailsolution.cn/wp-content/uploads/2012/01/clip_image0024.jpg)
NewSkin2：
![clip_image002[6]](http://blog.retailsolution.cn/wp-content/uploads/2012/01/clip_image0026.jpg)
5.编辑trinidad-config.xml配置文件
1: <?xml version="1.0" encoding="GBK"?>
2: <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
3: <skin-family>#{sessionScope.skinFamily}</skin-family>
4: </trinidad-config>
6.显示效果
默认皮肤：
![clip_image002[8]](http://blog.retailsolution.cn/wp-content/uploads/2012/01/clip_image0028.jpg)
选择NewSin1：
![clip_image002[10]](http://blog.retailsolution.cn/wp-content/uploads/2012/01/clip_image00210.jpg)
选择NewSkin2：
![clip_image002[12]](http://blog.retailsolution.cn/wp-content/uploads/2012/01/clip_image00212.jpg)
关于作者:
| 昵称: 档案信息: 联系方式:你可以通过联系作者 点击查看发表过的所有文章... 本文永久链接： http://blog.retailsolution.cn/archives/3006 |
对本文的评价:
