As promised, here are some best practices about ADF.
The first topic I will cover is the ADF Faces skin feature.
- when you use a single column (:) in a selector, you refer to the CSS element ex.: afmenubar:header
- when you use a double column (::) in a selector, you refer to a part of the ADF Faces component ex.: afmenubar::header
- if you mix multiple selectors, you can refer to a contained JSF component ex.: if you use the following selectors : afpanelHeader afinputText::content you refer to the content attribute of the inputText JSF component contained in a panelHeader JSF component
- the "ora" selectors are private and not documented but can be modified (and must be modified in some cases)
- every ADF Faces applications will inherit of the Simple.xss and the Base.xss skins even if you create your own skin (these skins are defined in the adf-faces-impl.jar file);
- the "-icon" attribute in a selector must refer to an image
- the "-icon-style" attribute refer to a style on an icon (not the image itself)
- by using the "alias" selector, you can create inheritance between styles in the skin
- the "ora-rule-ref" selector means "refers to"
- be careful, not all selectors are described in the Oracle skin documentation located here(http://www.oracle.com/technology/products/jdev/htdocs/)
- if you use the "url" selector, it is recommended to begin the url using the "/" to avoid some problems with relative paths except for background images
- never insert a dot (.) before a selector like you often do in CSS (this will give unpredicted results)
- never insert a dot (.) in the "styleclass" attribute value (does not work well)
- if you want to debug a skin, we recommand you to use the FireBug plug-in of Firefox to help you diagnose what is not working (this is a very great tool by the way)
- when you test a modification done in a skin using Firefox, first locate the URL that points to the skin (the CSS file), refresh it in another pane then reload the web page on the first pane / if you use Interet Explorer, you will need to clear the cache then reload the web page on any changes in the skin
- in Oracle JDeveloper 10.1.3+, use CTRL+SPACE to get the list of available selectors /attributes in the skin editor
- when you create a new JSF component, we recommand you to inherit of an existing JSF component (if possible) to inherit of its skin selectors (this is much easier and will lower the amount of Java code required by the new component)
Note that the skin feature has been enhanced in Apache Trinidad (http://incubator.apache.org/adffaces/) and in ADF Rich Client that is the next version of ADF Faces.
Enjoy !
Wednesday, March 14, 2007
Subscribe to:
Post Comments (Atom)
Posts
5 commentaires:
With regard to "it is recommended to begin the url using the "/" to avoid some problems with relative paths except for background images".
I'm having lots of issues with trying to get background images to work in a skin.
Using firebug it seems that the background image is trying to be referenced from a totally different area to all the other images on the page.
Is there some standard way to reference a background image in the skin?
This problem has been fixed in Apache Trinidad (ADF Faces donation to the OpenSource community - http://myfaces.apache.org/).
For ADF Faces, it depends which selector you use; if its an icon selector than begin the URL with "/" and it should work otherwise, if its the background-image selector, you must use a relative URL to the generated CSS style sheet in order to make it work.
Maybe you can try "/contextPath/" instead of "/" but I have not tried it by myself.
Unfortunately creating a skin for ADF is incredibly difficult. And what's more the Oracle skin itself looks awful. Your guide looks good by the practice shows that creating a skin is an achievement and that is exactly why there are no ADF skins around that you could use. The few available look very amateur and unprofessional. Oracle did great on architecture but failed to deliver a good looking framework.
You are right but the good news is that the skin feature has been greatly improved in the 11g release. You can see it by yourself downloading the JDeveloper 11g Technical Preview 3 that is currently available on OTN. The new skin is easier to use (not that perfect yet but much better).
Regarding debugging CSS changes, following your instructions (which seem correct) to clear cache give me intermittent success. For example, I'll change a text color for a tab
af|menuTabs::enabled a {color:#000000;}
and the green color from the simple skin continues to render. Then, I'll make a change to a different selector and the initial may finally render - but it may not...I'm not seeing any consistency. What gives? Shouldn't my custom skin override the default skins? Am I missing some type of inheritance?
Post a Comment