We had a customer that wanted to put background images on our buttons.
He couldn't do this with our buttons unless they had a container
(I haven't tested this in ages, but I remember that he was right), so what
he did was wrap our command button in a afh:cellFormat and put a styleClass on
both.
The problem was that he couldn't style buttons that were rendered as a part
of another component, so some of his buttons had a gradient background and some didn't.
I recommend that we wrap our <button> html tag with
a <div> or something so that the skinner can put background images on the
buttons.
The following is how he skinned the commandButton:
.ButtonCell
{
margin: 0px; padding: 0px;
border-top: 1px solid #afc6d7; border-left: 1px solid #afc6d7;
border-bottom: 1px solid #666666; border-right: 1px solid #666666;
background-repeat: repeat-x; background-position: bottom left;
background-color: #ffffff;
text-align: center;
vertical-align: middle;
background-image:url(/content/static/icons/buttonbg.gif)
}
.ButtonStyle
{
margin: 0px; padding: 2px 4px 2px 4px;
border: 0px;
background-color: transparent;
font: 12px Tahoma, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
cursor:pointer;
}
<afh:cellFormat styleClass="ButtonCell">
<af:commandButton text="#{webStrings.OK}"
action="#{actions.createFolder}"
styleClass="ButtonStyle"/>
</afh:cellFormat>
Adam Winer wrote:
Oh, that...
That opens up a new topic: what the heck should we do about
Trinidad button skinning?
As a little background: ADF Faces had a large image-generation
subsystem code-named "Tecate" that took text, metadata, and
other images, and composited them into single images. This
let us have fancy-looking buttons containing, for example,
translatable text. Instead of trying to get thousands of button
images translated (which would have been a nightmare), developers
just got text translated as normal and Tecate did the heavy lifting
at runtime.
It was used for more than buttons - tabs and "global buttons" (now
hint="buttons" on navigationPane) also went through this system.
At a certain point, we decided this was just a bad idea, and that a
better approach was a straightforward HTML and CSS skinning
approach. So, most of the code moved away from Tecate.
As of Trinidad, though, buttons were still left on it. And, as a result,
we have the large org.apache.myfaces.trinidadinternal.image package -
and all of the code in there - just for one simple feature.
I'd really like to come up with a simpler button skinning strategy,
and kill the "image" package altogether. The simplest possible
strategy is just HTML along the lines of:
<button class="af_commandButton>...</button>
-- Adam
On 8/17/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
Unless those exist and are not documented it would not work because the
button image is composed of 8 part, one background and one text all
merged
together in a single image. So using CSS :hover and :active on the 9
selectors would not work. Furthermore if I remember well :hover and
:active works only for links under IE.
Maybe those are managed by the skin already but I never figured it out
though. Jeanne, can you confirm please?
¬Simon
"Adam Winer" <[EMAIL PROTECTED]>
2006-08-16 16:47
Please respond to adffaces-dev
To: adffaces-dev@incubator.apache.org
cc:
Subject: Re: [Proposal] Skin hooks for mouseOver and
onPress
Isn't this just :hover and :active?
-- Adam
On 8/16/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> Hello all,
>
> I just had a flashback from my ADF Faces project. In that project we
> wanted to use a different image on mouse over event. In the end we had
to
> use commandLink with an image and some JavaScript events instead.
So my
> suggestion about button would be to add skin state hooks for mouseOver
and
> mouseDown occuring on buttons to improve their L&F and thus user
> experience.
>
> ¬Simon
>
