You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Francisco Passos <fr...@gmail.com> on 2007/08/22 17:32:41 UTC

[Trinidad] Simple skinning question - inputText

Hello all!

I intend to know what I need to define in my skin to be able to do something
like this.

If I use:

<tr:inputText styleClass="inputStyle1" ....

I want my inputText label to be bold.

And if I use:

<tr:inputText styleClass="inputStyle2" ....

I want my inputText label to not be bold.


I know that I can use the css class af|inputText::label to define global
inputText behaviour.
But in this case, I want to define specific behaviour. I chose this example,
because it clearly illustrates my need to have more than one kind of
component style within the same skin.

Re: [Trinidad] Skinnning dev guide now available!

Posted by Andrew Robinson <an...@gmail.com>.
Thank you very much, appreciate it.

One note, I see that it says that changes should be picked up on the
fly, but I have seen that is not true with icons. I have to restart my
application to get changes to the icons picked up. Is this true, or is
there something I am missing?

-Andrew

On 8/22/07, Danny Robinson <da...@gmail.com> wrote:
> Looks great Jeanne, much needed.  Next step if for us to get the skin
> selectors reference page back up-to-date and linked into the docs.
>
>
> On 8/22/07, Matt Cooper <ma...@gmail.com> wrote:
> > Hi Jeanne,
> >
> > This looks great!
> >
> > Do you think we need to call out that -tr-inhibit will only perform
> server-side inhibiting; it will not inhibit styles that resolve in the
> browser bases on things like selector specificity.
> >
> > Thank you,
> > Matt
> >
> >
> >
> > On 8/22/07, Jeanne Waldman < jeanne.waldman@oracle.com> wrote:
> > > Hi there,
> > >
> > > I finally took some time to put together a skinning dev guide. This is
> > > the first draft. I'll give myself
> > > a break from looking at it and then proofread it, unless anyone else
> > > wants to. :) Feel free to give suggestions
> > > on new sections or sections that are confusing. You can create a JIRA
> > > issue if you want.
> > >
> > > The link is:
> > >
> http://myfaces.apache.org/trinidad/devguide/skinning.html
> > >
> > > I just noticed that I didn't link to it from the devguide's index page.
> > > I'll look into doing that right now.
> > >
> > > - Jeanne
> > >
> > >
> > >
> >
> >
>
>
>
> --
> Chordiant Software Inc.
> www.chordiant.com

Re: [Trinidad] Skinnning dev guide now available!

Posted by Danny Robinson <da...@gmail.com>.
Looks great Jeanne, much needed.  Next step if for us to get the skin
selectors reference page back up-to-date and linked into the docs.

On 8/22/07, Matt Cooper <ma...@gmail.com> wrote:
>
> Hi Jeanne,
>
> This looks great!
>
> Do you think we need to call out that *-tr-inhibit* will only perform
> server-side inhibiting; it will not inhibit styles that resolve in the
> browser bases on things like selector specificity.
>
> Thank you,
> Matt
>
> On 8/22/07, Jeanne Waldman <je...@oracle.com> wrote:
> >
> > Hi there,
> >
> > I finally took some time to put together a skinning dev guide. This is
> > the first draft. I'll give myself
> > a break from looking at it and then proofread it, unless anyone else
> > wants to. :) Feel free to give suggestions
> > on new sections or sections that are confusing. You can create a JIRA
> > issue if you want.
> >
> > The link is:
> > http://myfaces.apache.org/trinidad/devguide/skinning.html
> >
> > I just noticed that I didn't link to it from the devguide's index page.
> > I'll look into doing that right now.
> >
> > - Jeanne
> >
> >
> >
>


-- 
Chordiant Software Inc.
www.chordiant.com

Re: [Trinidad] Skinnning dev guide now available!

Posted by Matt Cooper <ma...@gmail.com>.
Hi Jeanne,

To folks that are not CSS and skinning experts, it is not always clear what
this means:

"[-tr-inhibit] is used to inhibit/reset css properties that you are
inheriting from a base skin"

I've seen someone use:

af|panelGroupLayout {
  font-size: 18pt;
}
af|commandButton {
  -tr-inhibit: font-size;
}

<tr:panelGroupLayout>
  <tr:commandButton text="Hello"/>
</tr:panelGroupLayout>

and expect the button's font size to be the browser default, thinking that
since it inherits the font-size from the panelGroupLayout, putting the
inhibit statement in the commandButton will take care of it.

Also it isn't clear what will happen if the skins look like this:

/* definitions in the base skin */
af|commandButton.foo {
  font-size: 18pt;
}
.bar af|commandButton {
  font-size: 24pt;
}

/* definition in the extended skin */
af|commandButton {
  -tr-inhibit: font-size;
}

I think the docs explain the differences between "padding" and
"padding-right" clearly but perhaps the inheriting aspect of what gets
inhibited could be clearer.

I was thinking that the docs should say something along the lines of this:
"The inhibitions are server-side only, any styles that get applied based on
cascading rules in the browser will not be inhibited."
However, if examples are easier to understand (as seen above), then let's
put them in.

Thanks,
Matt

On 8/22/07, Jeanne Waldman <je...@oracle.com> wrote:
>
>  Hi Matt,
> Can you elaborate so I'm sure what you are saying?
> Thanks,
> Jeanne
>
> Matt Cooper wrote:
>
> Hi Jeanne,
>
> This looks great!
>
> Do you think we need to call out that *-tr-inhibit* will only perform
> server-side inhibiting; it will not inhibit styles that resolve in the
> browser bases on things like selector specificity.
>
> Thank you,
> Matt
>
> On 8/22/07, Jeanne Waldman <je...@oracle.com> wrote:
> >
> > Hi there,
> >
> > I finally took some time to put together a skinning dev guide. This is
> > the first draft. I'll give myself
> > a break from looking at it and then proofread it, unless anyone else
> > wants to. :) Feel free to give suggestions
> > on new sections or sections that are confusing. You can create a JIRA
> > issue if you want.
> >
> > The link is:
> > http://myfaces.apache.org/trinidad/devguide/skinning.html
> >
> > I just noticed that I didn't link to it from the devguide's index page.
> > I'll look into doing that right now.
> >
> > - Jeanne
> >
> >
> >
>

Re: [Trinidad] Skinnning dev guide now available!

Posted by Matt Cooper <ma...@gmail.com>.
Hi Jeanne,

This looks great!

Do you think we need to call out that *-tr-inhibit* will only perform
server-side inhibiting; it will not inhibit styles that resolve in the
browser bases on things like selector specificity.

Thank you,
Matt

On 8/22/07, Jeanne Waldman <je...@oracle.com> wrote:
>
> Hi there,
>
> I finally took some time to put together a skinning dev guide. This is
> the first draft. I'll give myself
> a break from looking at it and then proofread it, unless anyone else
> wants to. :) Feel free to give suggestions
> on new sections or sections that are confusing. You can create a JIRA
> issue if you want.
>
> The link is:
> http://myfaces.apache.org/trinidad/devguide/skinning.html
>
> I just noticed that I didn't link to it from the devguide's index page.
> I'll look into doing that right now.
>
> - Jeanne
>
>
>

[Trinidad] Skinnning dev guide now available!

Posted by Jeanne Waldman <je...@oracle.com>.
Hi there,

I finally took some time to put together a skinning dev guide. This is 
the first draft. I'll give myself
a break from looking at it and then proofread it, unless anyone else 
wants to. :) Feel free to give suggestions
on new sections or sections that are confusing. You can create a JIRA 
issue if you want.

The link is:
http://myfaces.apache.org/trinidad/devguide/skinning.html

I just noticed that I didn't link to it from the devguide's index page. 
I'll look into doing that right now.

- Jeanne



Re: [Trinidad] Simple skinning question - inputText

Posted by Matt Cooper <ma...@gmail.com>.
I haven't tested this but I believe this should be valid:

<tr:inputText styleClass="inputStyle1" label="I a bold label" value="test"/>
<tr:inputText styleClass="inputStyle2" label="I a non-bold label"
value="test"/>

af|inputText.inputStyle1 af|inputText::label {
  font-weight: bold;
}

As long as the styleClass gets applied to the root DOM element of the
inputText, that root DOM element also has "af|inputText" as its default
style class, then this should work.  If that isn't the case then we can
investigate alternatives.

Thanks,
Matt

On 8/22/07, Francisco Passos <fr...@gmail.com> wrote:
>
> Hello all!
>
> I intend to know what I need to define in my skin to be able to do
> something like this.
>
> If I use:
>
> <tr:inputText styleClass="inputStyle1" ....
>
> I want my inputText label to be bold.
>
> And if I use:
>
> <tr:inputText styleClass="inputStyle2" ....
>
> I want my inputText label to not be bold.
>
>
> I know that I can use the css class af|inputText::label to define global
> inputText behaviour.
> But in this case, I want to define specific behaviour. I chose this
> example, because it clearly illustrates my need to have more than one kind
> of component style within the same skin.
>