True, tables would work fine to emulate image generation, and it would be
costless. It might be our best choice. However, they still have a drawback
over <input> since input using a background-image automatically render a
pressed button image for mousepress events. We could do the same with
tables and a bit of JavaScript though.
¬Simon
Jeanne Waldman <[EMAIL PROTECTED]>
2006-08-18 10:25
Please respond to adffaces-dev
To: [email protected]
cc:
Subject: Re: Button skinning (was Re: [Proposal] Skin hooks
for mouseOver and onPress)
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: [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
>>>>
>>>>
>>>>
>>>
>>>
>>>
>
>
>
>
>
