Customizing ADF Faces Look & Feel. Some questions & suggestions

Question

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

Answer 1

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
<!-- Change the accent color ramp to tan -->
<style name="DarkAccentBackground">
<!--<property name="background-color">#cccc99</property>-->
<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.