You are viewing a plain text version of this content. The canonical link for it is here.
Posted to adffaces-dev@incubator.apache.org by Si...@DMR.CA on 2006/08/17 19:22:59 UTC
XSS format question
Hello all,
I'm working on ADFFACES-49 and while playing with base-desktop.xss I saw
there's two type of styles, those named and those with a selector. I
assume those named are equivalent to CSS aliases? Also, is it possible to
include a style that is not named? More specifically, I would like to have
something like this for required labels:
<style selector="af|inputColor::required::label">
<includeStyle selector="af|inputColor::label"/>
<includeStyle name="AFRequiredLabel"/>
</style>
Is that correct?
¬ Simon
Jeanne Waldman <je...@oracle.com>
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, Simon_Lessard@dmr.ca <Si...@dmr.ca> 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" <aw...@gmail.com>
>> 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, Simon_Lessard@dmr.ca <Si...@dmr.ca> 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
>> >
>>
>>
>>
>
Re: XSS format question
Posted by Jeanne Waldman <je...@oracle.com>.
I'd have to try it to refresh my memory, but I think that should work.
Does it? :)
The named styles are equivalent to css aliases. They are never written
out to the generated css file.
- Jeanne
Simon_Lessard@DMR.CA wrote:
>Hello all,
>
>I'm working on ADFFACES-49 and while playing with base-desktop.xss I saw
>there's two type of styles, those named and those with a selector. I
>assume those named are equivalent to CSS aliases? Also, is it possible to
>include a style that is not named? More specifically, I would like to have
>something like this for required labels:
>
> <style selector="af|inputColor::required::label">
> <includeStyle selector="af|inputColor::label"/>
> <includeStyle name="AFRequiredLabel"/>
> </style>
>
>Is that correct?
>
>¬ Simon
>
>
>
>
>Jeanne Waldman <je...@oracle.com>
>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, Simon_Lessard@dmr.ca <Si...@dmr.ca> 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" <aw...@gmail.com>
>>>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, Simon_Lessard@dmr.ca <Si...@dmr.ca> 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
>>>>
>>>>
>>>>
>>>
>>>
>>>
>
>
>
>
>