Skinning ADF Faces

Is there any documentation available on ADF Faces' skinning mechanism? I need to apply my own product branding. So far I haven't found anything but the briefest mention of this functionality.
Thanks,
L.

Hi,
go to
http://jroller.com/page/cschalk
and search the page for
"Example ADF Faces Skin Posted". This gives you an example of how skinning works with ADF Faces. It doesn't appear to be magic and should be clear from Chris's explanation.
Frank

Similar Messages

About skinning in ADF Faces EA19

I'm working with skinning adf faces technology and I'm trying to personalize .AFErrorIcon style with my own icon but it doesn't work. The image is not rendered. Can somebody help with this, please...
Thanks,
Victor

I am also trying to customize the skin for menu tab. However, it doesn't use the selectedIcons.
My JSP is :
<af:menuTabs var="item" value="#{Application.views}" >
<f:facet name="nodeStamp">
<af:commandMenuItem text="#{item.label}" action="#{item.select}" selected="#{item.selected}" />
</f:facet>
</af:menuTabs>
The demo uses goCommandItem and doesn't use facet "nodeStamp". I tried to change the property to selected ="true" and it still doesn't use the right icon. Could anyone let me know if it is a bug?

Problem with a example of "Developing and Using ADF Faces Skins"

Hi, I've tried the example "Developing and Using ADF Faces Skins", but when I run the sample.jspx page and choose the skin "MyCompany" in the select skin I obtain the next message:
java.lang.NullPointerException
at oracle.adfinternal.view.faces.ui.laf.simple.desktop.SideBarRenderer._getIconData(SideBarRenderer.java:393)
at oracle.adfinternal.view.faces.ui.laf.simple.desktop.SideBarRenderer.prerender(SideBarRenderer.java:83)
at oracle.adfinternal.view.faces.ui.BaseRenderer.render(BaseRenderer.java:79)
Could somebody help me?
Thanks a lot ;-)

Hi there,
I had the same issue last friday.
It's probably because you are using JDeveloper 10.1.3.2 instead of 10.1.3.0 or 10.1.3.1 for which the example is made.
I haven't been able to fix this yet, other then by commenting out the this part of the css.
Luc Bors
Message was edited by:
lucbors

ADF Faces 11g Skins

Hi!
How should we create ADF Faces 11g Skins ?
does the mentioning the skin family used in trinidad-config.xml file reflect for the ADF Rich Faces as well?
What about the new RC Components ;They do not have any similar components in Trinidad,I suppose.
so where can we get the complete information of all CSS Classes that are to be used with new ADF Rich Faces Componenents?
Can you point me to source where I can get the information about all CSS Classes for RC Components , and how to change Skins in 11g for RC Components and Trinidad Components , for I use a mixture of Both,some times.
Thanking you in advance,
Samba

Sassira,
Here is an article to get you started:
http://jdj.sys-con.com/read/273945.htm
This link oulines all of the skinning key:
http://www.oracle.com/technology/products/adf/adffaces/11/doc/skin-selectors.html
And here is a thread that outlines how to get started:
Could not get resource key af_componentX.XXX from skin
Hope that helps.
--RiC

Adf faces skin-family change for page or component

I know how to change this by editing adf-faces-config.xml tile. Is it possible to change the skin-family at a page level or for even for an individual component?

You can change the skin at the page level by setting the value of the skin-family property to an expression language:
<adf-faces-config xmlns="http://xmlns.oracle.com/adf/view/faces/config">
<skin-family>#{skinFamily.skinSelection}</skin-family>
</adf-faces-config>
Where skinFamily is a managed bean and skinSelecion can be implemented as follows:
public String getSkinSelection()
FacesContext context = FacesContext.getCurrentInstance();
UIViewRoot viewRoot = context.getViewRoot();
String viewId = viewRoot.getViewId();
System.out.println(viewId);
if ( viewId.startsWith("/blaf/") ) {
skinSelection = "oracle";
else if ( viewId.startsWith("/minimal/") ) {
skinSelection = "minimal";
else if ( viewId.startsWith("/vantive/") ) {
skinSelection = "vantive";
return skinSelection;
If you want to have two components, let's say, two tables, at the same page but with a different style you can accomplish that by using the inline-style tag.
[]'s

How to apply New ADF Faces Skin into JHeadStart Application

Hi
I have downloaded the new skins such as srdemo,mycompany..
I have only changed skinfamily value in adf-faces-config file but when i generate application with JAG the new skin does not apply it.
Can anybody help me what's the problem?
thanks

This should work fine. Did you accidently re-enable JHeadstart on your project? This wil overwrite adf-faces-config.xml again, so double check your skin family is specified correctly.
Steven Davelaar,
JHeadstart Team.

ADF Faces Skins Not Working

I can't seem to get my ADF faces skins to register at all. I have a css file, an adf-faces-skins.xml file, and a <skin-family> element in my adf-faces-config.xml file, but to no avail.
One possible hint--I think I might not be getting access to the appropriate XML namespace in my adf-faces-skins.xml file. I can't, for example, get code insight to work there ("No insight available"). I'm using
<skins xmlns="http://xmlns.oracle.com/adfview/faces/skin">
which looks like it's right out of the help. Am I missing a library of some sort?
Thanks much,
Avrom

Yes, I have, and I don't see anything I've done substantially differently from there--with the exception of adding a new version of Faces to my project. I assume I don't have to do that if I'm using 10.1.3 Production (the HowTo says it's a "more recent" version of Faces, but it was written against EA 1).

Using ADF Faces Skins

I'm looking for a reference on deploying Skins with ADF Faces. The published howto on OTN is'nt very helpful because the sample code link is broken (See my previous post). The JDeveloper help files are somewhat helpful but I'm looking for a working example. I'm following the technique as implemented in SRDEMO but I must be missing something as my style sheet changes are not showing up.
It would be nice if someone from Oracle could look into fixing the link to the sample code for:
http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/index.html
I think if I had a working example that allows skins to change at runtime I would be able to figure out what I'm missing. I have been trying access the link for a couple days now and no one has reponded to any of my requests.

The link to http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/adffaces-skin.war
seems to work for me.
In any case to change the skin you are using you change the adf-faces-config.xml file.
To get it to change at runtime - just put a reference to a value in a backing bean instead of the fixed "oracle" and then change the value in the bean at runtime.

Problem in Developing and Using ADF Faces Skins sample

sample.jspx dose not have “Select Skin” box as the document shown.
I am trying the sample project downloaded from sample WAR file - adffaces_skin.war in article “Developing and Using ADF Faces Skins”.
In paragraph “Changing the Color Schema of a Skin”
sample.jspx has a “Select Skin” box to allow user to select “Simple” or “MyCompany”. (in JSP Visual Editor)
However, it does not show on the project built from downloaded from sample WAR file (adffaces_skin.war).

After reading the whole document, I realize it is my mistake.
The box will be created after all user skins setting.
The sample works.
Only thing need to remind is for later version Jdeveloper, Application Worksapce in only for early version Jdeveloper. All the version after 10g 1.3 EA1, Only have Application.

Externalize the Skin from ADF Faces project

I have a requirement, where we don't want to bundle Skin(CSS, adf-faces-skins.xml, adf-faces-config.xml files) with the web project. Which would help us to add new skin or change the existing skins.
I see the CSS file name is different when it renders in the final HTML page. If my file name is 'sni.css' and it is kept in folder 'Web Content/css' but in the output html('/adf/styles/cache/sni-desktop-10_1_3_3_0-en-ie-6-windows-s.css'). How does the name changes here?
We do this in our old framework by putting CSS files in Web Server. Can we do similiar thing in ADF Faces to externalize the styles? Overriding Faces Listeners or by any other way?
Similiarly want to externalize images, adf-faces-skins.xml and adf-faces-config.xml also.
Thanks

Hi,
We created a external skin project. WebSkin.war. In this project we put every thing (images, ccs, etc).
In the others Web projects, into our jsp files we added this line on the header.
<link rel="stylesheet" type="text/css" media="screen" href="/WebSkin/common/skins/<%=styleBean.getStyleName()%>/screen.css" />
And (of course) getStyleName give us the current Skin Name (blue, purple, etc)
But (nothing is perfect).. we are using JBOSS as application server, we didn't test that solution on other platform.
I hope is not to late ...
Regards.
Message was edited by:
ppasquel

Need file adf-faces-skins-doc.xml

Hi
I have down loaded the latest ADF release. I want to customize the ADF skins, I am not able to find file adf-faces-skins-doc.xml in skins folder which explains the Style sheet attributes of the ADF component.
Can any one please send me this file or tell me the location on internet where I can find it.
Thanks

Hi!
Download the sample application. The file you're searching for should be inside the warfile.
http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/adffaces-skin.war
Claus

ER: ADF Faces Skins: "Unknown pseudo class:alias"

Hi,
I'm trying to create an ADF Faces Skin, by overriding aliases in my own CSS file.
The code editor, however, is hilighting the word "alias" every time I use it (as in ".AFDarkBackground:alias") in red, and the error "Unknown pseudo class:alias" appears both on a popup and in the Structure Pane under "CSS Errors." Is Can I ignore this, or am I doing something wrong? Do I need to import some base CSS that defines the pseudo class? The sample from the HowTo doesn't seem to, but then it shows up with the same CSS Errors.
Best,
Avrom
Message was edited by:
[email protected]
Changed topic title to reflect request for enhancement farther down.

Thanks!
I think I'll edit the title of this to contain ER: ... it would be very nice if it were possible to turn off this bit of validation. I can imagine varying degrees of "smartness" for such a feature--from a manual "accept simple desktop pseudoclasses" option to automatically checking to see if the CSS is listed in an adf-faces-skins.xml file or is imported by any CSS files that are.

What are provided skin with ADF faces and where i can find more ?

Hi
thank you for reading my post
where i can find more skins for ADF faces ?
I know
Oracle , srdemo
is there any other skins available ?
Thanks

Find your serial number quickly
if it's a win ps cs6 and it's installed, you can use belarc advisor to recover the sn, Belarc Advisor - Free Personal PC Audit, for software, hardware and security configuration information on your computer.…

Customizing ADF Faces Look & Feel. Some questions & suggestions

Hi everybody,
We are developing an application with ADF Faces using JHeadStart. For the moment, I am studying the way we must modify the JHS templates to adapt each element to our needs.
As it's told in the JHeadStart Developer's Guide, there are two ways to customize Look & Feel:
1) Modifying the templates
2) ADF Skinning
I'm using both methods, but I feel that thay are not good enough to adapt the L&F to our customer requirements.
My main problem now is in the ADF Table customization. I want to use ADF Table because it offers us a lot of features that are not in the jsf table (the selection column, the table overflow...), and is very usefull combined with the generated JHS code. But at the same time, it doesn't offer a lot of functionality in the look & feel customization. Using JSF Table, I can set the CSS style for headers, rows, columns, the table, I can set the border, cellspacing and cellpadding. But I cannot do
any of these thing (or at least, I don't see how) with the ADF Table.
Our customer (a government) have a strict definition of the look & feel of his web applications. They want we use their CSS styles definition file, so they can modify at once the Look & Feel of all their applications. Modifying the L&F through skinning generate other styles, not use the style classes in our CSS (o so I think).
So, the questions:
1) There is any way to set the suitable styles for the ADF Table components (headers, rows)?
1bis) Why, If I have defined a new skin, with only just a few selectors, some styles from oracle are applied? Maybe because the render kit in the 'adf-skins.xml' is "oracle.adf.desktop"? If it is true, how can I make that they are not used, I must implement a render kit or can I use another existent?
2) Can I decide how looks the select column (for example a button instead of a radio button)? Can I decide where does it goes (right or left)?
3) There is any way to hidden the text Show/Hide of the showDetail in the table (the tableOverflow), as I can change the icons through skinning? If it is not possible, How can I overwrite the text. I need it in Catalan, but it is shown in English for this locale. Where is the message bundle I should overwrite?
4) There is any way to force a tree to start fully expanded?
5) There is anywhere documentation about the javascript functions used in ADF and their meaning? I think for example in the previous question. If I knew which javascript function I should call for expand the tree and its parameters, I could put the call in the onload event of the body.
6) I use a selectInputDate. I have skinned the launch-icon, and I would like to do a similar thing in the chooseDate that is opened in a new window. But It seems not to be affected for my skinning directives (if I put a chooseDate in the same page, its L&F follow the skinning rules I've defined). I don't know if this dialog is an ADF feature or a JHS generated feature.
7) There is any way to keep unmodified the id I've choosed for a component? (I mean, an inputText with id="hello" in a form with id="form" will have in the HTML an id = "form:hello", but I would like it to be simply 'hello')
8) How can I control the position and the size of a dialog (the chooseDate dialog or a dialog I've created)? In the cases I've been testing, it seems the dialog is forced to resize depending on the content. I would like to know if I can establish a fixed size.
9) There is any way to open a non-modal dialog? (which I could keep open at the same time that another instance of the same dialog)
For the moment, I think I have no more question. But give me time.... :-D
The suggestion I've to do is basically more flexible components for a better customization (for example, the styles settings I've talked about previously). ADF components are nice and powerful, but I think they should generate pages that follow the tendencies in the web development: tableless pages (I cannot understand the utility of the objectSpacer existing the margins), use of CSS for layout...
Any answer, comment or suggestion will be welcome.
Carles.
Message was edited by:
cbios

I have been able to make the UIX 2.2 and ADF Faces LAF look near identical by updating the oracle-desktop.xss file within UIX 2.2 as follows

<style name="DarkAccentBackground">

<property name="background-color">#d2d8b0</property>
</style>
There are still some differences:
1) A black line appears on the ADF Faces on the 'menu1' facet selected tab below the text. DON'T KNOW HOW TO REMOVE THIS FROM ADF Faces or add it to UIX 2.2!!!
2) In UIX 2.2 a bulleted list uses the HTML <li> tag. In ADF Faces it doesn't use the HTML <li> tag rather it constructs the bulleted list using lower level HTML tags with the 'bullet' becoming an image, in my browser this means the disc is smaller in Faces. The motivation for this change I think is explained via this post. Since I have no control over how this specific HTML tag is rendered it forces me to replace the /adf/images/bltdscn.gif file in adf-faces-impl.jar with a larger disc!
http://www.thescripts.com/forum/thread96839.html
May update this again if there are other things I notice.

ADF Faces IF statement available within the page?

I am making a page using ADF Faces.
I want to create an IF statement in a page that will display some markup on one condition and on another display some other markup.
For example, I am using an iterator to build a table. I would like to have the background color of the row alternate based on the iterator count % 2 ( also how can I get the count of the iterator).
Also, I would want to make the text color highlight based on some condition such as is foo==bar make the text red etc.
Anyone know how to do this simple simple task in ADF Faces?
**Note the if from JSF core is not available in Jdeveloper for whatever reason. Any help would be appreciated.
Also, I don't want to just set some property of some element based on a condition with EL.
Lets say there is a whole section of the page that I only want to show is a condition is true. Is this impossible in ADF Faces? Is there something fundamental I am missing about this framework?
Edited by: user2809800 on Dec 6, 2010 12:49 PM

For conditional rendering of group of fragments, you can use switcher component.
See the sample for switcher here: http://jdevadf.oracle.com/adf-richclient-demo/faces/components/switcher.jspx
Code:
<af:switcher id="s1" defaultFacet="#{<CONDITION> == 'true' ? 'two' : 'three'}">
<f:facet name="two">
<af:outputText id="ot2" value="Two"/>
</f:facet>
<f:facet name="three">
<af:outputText id="ot3" value="Three"/>
</f:facet>
</af:switcher>
For changing the text color based on the condition, you could use the EL expression in InlineStyle (it is a simple case) Otherwise, you can use skinning to change the same.
Sample:
<af:outputText id="ot4" value="#{bindings.FirstName.inputValue}"
inlineStyle="#{bindings.FirstName.inputValue == 'Steven' ? 'color:red' : null}"/>
Thanks,
Navaneeth

Skinning ADF Faces

Similar Messages

Maybe you are looking for