Well, right now they can't get gradients AND rounded borders. I seem to
remember there is no way currently, although it probably could be added,
to put gradient backgrounds on our generated images.
If they have to give us button-bits anyway, could we use html tables or
something to piece them together so they could get rounded corners and
gradient backgrounds?
- Jeanne
[EMAIL PROTECTED] wrote:
Note to self: Test with latest build before saying anything...
Tabs no longer use image package. However, while thinking about it last
night, I'm not sure that desuporting generated image buttons is a so nice
idea. I would rather like to see a new component like
tr:composedImageButton or something like that working exactly like the
current tr:commandButton and remove image generation from
tr:commandButton. This way users would have all possibilities: create
buttons with gradients and create buttons with round borders.
¬ Simon
I just tested those style classes, they're prety nice.However, I think
the results are better with simply the following
.ButtonCellIE
{
margin: 0px;
padding: 0px;
background-image: url(background.jpg);
}
.ButtonStyleIE
{
background-color: transparent;
}
.ButtonCellFirefox
{
margin: 0px;
padding: 0px;
}
.ButtonStyleFirefox
{
background-image: url(background.jpg);
}
It seems that Firefox supports button background-images natively, it
works even without the cell and the result is better oveall. Sadly div
does not work well.
This solution also has its drawback since you cannot use round borders.
For buttons it might not be a huge issue, but navigationPane might hurt,
especially for tabs. So until we can provide users with an equal
flexibility system >> for tabs I will be
-1 on removing image package
+1 on removing button dependancy toward image package.
¬ Simon
Jeanne Waldman <[EMAIL PROTECTED]>
2006-08-17 12:55
Please respond to adffaces-dev
To: adffaces-dev@incubator.apache.org
cc:
Subject: Re: Button skinning (was Re: [Proposal] Skin hooks
for mouseOver and onPress)
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
