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: [email protected]
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: [email protected]
>> 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
>> >
>>
>>
>>
>
