+1 for not adding a new component. I'm still -1 on using
generated images... that code is naaaasty, and supporting
anything like hover/active is even more hacking on that layer.
CSS 3 will have support for rounded borders in a bunch of
cool ways... but we'll all be old men and women before
that support is available in all common browsers.
-- Adam
On 8/18/06, Danny Robinson <[EMAIL PROTECTED]> wrote:
I'd vote for keeping all button functionality within tr:commandButton. We
would like our customers to be able to reskin our applications as they
choose (with/without images etc.) and introducing different components for
this functionality means we've had to make this decision at design time.
Danny
On 8/18/06, [EMAIL PROTECTED] <[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
> >> >
> >>
> >>
> >>
> >
>
>
>
>
--
Chordiant Software Inc.
www.chordiant.com
