Oracle ADF Faces RC has the following skins which could jump-start implementation of skinning into your application:
- fusion
- rainforest
- sporty
- princess
- blafplus-rich
- blafplus-medium
- fusion projector
- simple
Before you start the steps below, be sure that you have an extracted copy of the latest adffacesdemo. You can download the same here.
The time starts now...
To apply skinning into your app, do the following:- Copy the skins folder of adffacesdemo.
- Copy the trinidad-skins.xml of the adffacesdemo
- Add additional "skinFamily" string attribute into your existing session scope managed bean that holds user session information.
- Add a skin menu into your menu bar.
Copy the skins folder of adffacesdemo
Copy the skins folder of adffacesdemo located in .../adffacesdemo/public_html and paste it into the public_html directory of your application.Copy the trinidad-skins.xml of the adffacesdemo
Copy the trinidad-skins.xml of the adffacesdemo located in .../adffacesdemo/public_html/WEB_INF folder and paste the same on the same directory in your applicationAdd additional "skinFamily" string attribute into your existing session scope managed bean
You can add the "skinFamily" string attribute into an existing session scope manage bean that holds user session information. If nothing is applicable, you can create something like the following class and declare it as a session scope managed bean in adfc-config.xmlpackage soadev.view.managed;
import java.io.IOException;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import oracle.adf.view.rich.component.rich.nav.RichCommandMenuItem;
public class UserSession {
private String skinFamily;
public void setSkinFamily(String skinFamily) {
this.skinFamily = skinFamily;
reloadThePage();
}
public String getSkinFamily() {
if (skinFamily == null) {
skinFamily = "fusion";
}
return skinFamily;
}
public void skinMenuAction(ActionEvent event) {
RichCommandMenuItem menuItem = (RichCommandMenuItem)event.getComponent();
setSkinFamily(menuItem.getText());
reloadThePage();
}
//taken from adffacesdemo
public static void reloadThePage() {
FacesContext fContext = FacesContext.getCurrentInstance();
String viewId = fContext.getViewRoot().getViewId();
String actionUrl =
fContext.getApplication().getViewHandler().getActionURL(fContext,
viewId);
try {
ExternalContext eContext = fContext.getExternalContext();
String resourceUrl =
actionUrl; //eContext.encodeResourceURL(actionUrl);
// Use the action URL directly since the encoding a resource URL will NPE in isEmailablePage()
eContext.redirect(resourceUrl);
} catch (IOException ioe) {
System.err.println("Problem trying to reload the page:");
ioe.printStackTrace();
}
}
}
Add a skin menu into your menu bar
Add a skin menu into your existing menu bar plus menuCommandItems for the skins to be supported. Below is a sample menuBar with a skin menu: <af:menuBar id="menuBar" styleClass="AFHideSidePadding">
<af:menu text="Skin" id="ptm1">
<af:commandMenuItem text="blafplus-rich" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='blafplus-rich'}"
id="ptcmi1"/>
<af:commandMenuItem text="blafplus-medium" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='blafplus-medium'}"
id="ptcmi2"/>
<af:commandMenuItem text="fusion" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='fusion'}"
id="ptcmi31"/>
<af:commandMenuItem text="fusion-projector" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='fusion-projector'}"
id="ptcmi31_1"/>
<af:commandMenuItem text="simple" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='simple'}"
id="ptcmi4"/>
<af:commandMenuItem text="rainforest" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='rainforest'}"
id="ptcmi6"/>
<af:commandMenuItem text="sporty" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='sporty'}"
id="ptcmi7"/>
<af:commandMenuItem text="princess" type="radio"
actionListener="#{userSession.skinMenuAction}"
selected="#{userSession.skinFamily=='princess'}"
id="ptcmi8"/>
</af:menu>
</af:menuBar>
Your done? Congratulations! :D
How did I apply it to the accompanying app (UIShellSherman_V02)?
- I created a global_links.jspx with the following code:
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:trh="http://myfaces.apache.org/trinidad/html"> <jsp:directive.page contentType="text/html;charset=UTF-8"/> <af:panelGroupLayout id="pgl1"> <af:menuBar id="menuBar" styleClass="AFHideSidePadding"> <af:menu text="Skin" id="ptm1"> <af:commandMenuItem text="blafplus-rich" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='blafplus-rich'}" id="ptcmi1"/> <af:commandMenuItem text="blafplus-medium" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='blafplus-medium'}" id="ptcmi2"/> <af:commandMenuItem text="fusion" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='fusion'}" id="ptcmi31"/> <af:commandMenuItem text="fusion-projector" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='fusion-projector'}" id="ptcmi31_1"/> <af:commandMenuItem text="simple" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='simple'}" id="ptcmi4"/> <af:commandMenuItem text="rainforest" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='rainforest'}" id="ptcmi6"/> <af:commandMenuItem text="sporty" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='sporty'}" id="ptcmi7"/> <af:commandMenuItem text="princess" type="radio" actionListener="#{userSession.skinMenuAction}" selected="#{userSession.skinFamily=='princess'}" id="ptcmi8"/> </af:menu> </af:menuBar> </af:panelGroupLayout> </jsp:root>
- I added a <jsp:include> tag to the globalLinks facet of the pages that implement the ADF UI Shell template.
Below is a code snippet:
<f:facet name="globalLinks"> <f:subview id="sv1"> <jsp:include page="/global_links.jspx" flush="true"/> </f:subview> </f:facet>
Conclusion
In this post we learn the following "how tos":- How to easily apply skinning into an existing ADF Faces RC application.
- How to reload a page programmatically.
- How to use <jsp:include> tag in ADF pages.
