[Trinidad] Learning Custom skinning ... combining skin + styleClass?

[Andrew Robinson <an...@gmail.com>]

I am trying to write my own skin for my application. In this
application, I may want to have tab panels that look different. I see
that for example, the following skin selector exists:

af|panelTabbed::tab-selected

How can I style the selected tab of the following:

<tr:panelTabbed styleClass="myTabs">

Is it something like:

af|panelTabbed::tab-selected .myTabs?

I'm just not sure how the skin selectors work with "normal" css
selectors that will get output to the client.

If there is a good skin reference out there, that would be helpful
too. I did find one on Oracle's site, but it didn't talk about
combining controls with specified style classes that I could tell.

Thanks,
Andrew

[Trinidad] tr:chooseColor part 2

["Kevin R. Gutch" <kg...@protechemail.com>]

Does anyone have any examples that show binding the chosen color value 
to another component?
I want to bind it to a inline css style value. Any help is greatly 
appreciated.

<tr:chooseColor id="cp2" onclick="" colorData="#{color.colorList}">
 </tr:chooseColor>

Re: [Trinidad] Learning Custom skinning ... combining skin + styleClass?

[Andrew Robinson <an...@gmail.com>]

Thank you,

That is working fine

Is there documentation somewhere of the skin properties for each component?

Also, is there any plans to support an icon property for
tr:showDetailItem, so a tab can have an icon instead or in addition to
text (I got it to work using CSS, but I think an attribute on the
component would be a lot more clean)?

On 8/15/07, Simon Lessard <si...@gmail.com> wrote:
> Hello Andrew,
>
> You almost got it right! The right combination would be
>
> .myTabs af|panelTabbed::tab-selected
>
> Since you set myTabs as the panel's class, the selected tab is a sub
> component of the panel therefore a descendant of .myTabs.
>
> You can combine skin selector with normal style class as much as you want.
> However there's one thing you have to keep in mind. Since skin selectors get
> converted to style classes, something like
>
> af|inputText.myStyleClass
>
> will be parsed to
>
> .af_inputText.myStyleClass
>
>
> That selector's syntax is CSS 2 valid, but CSS 2 is a very futurist standard
> for some (a single one) browser that is MSIE on which composite selectors
> aren't supported. So the above would not work well on MSIE.
>
>
> Regards,
>
> ~ Simon
>
>
> On 8/15/07, Andrew Robinson <an...@gmail.com> wrote:
> > I am trying to write my own skin for my application. In this
> > application, I may want to have tab panels that look different. I see
> > that for example, the following skin selector exists:
> >
> > af|panelTabbed::tab-selected
> >
> > How can I style the selected tab of the following:
> >
> > <tr:panelTabbed styleClass="myTabs">
> >
> > Is it something like:
> >
> > af|panelTabbed::tab-selected .myTabs?
> >
> > I'm just not sure how the skin selectors work with "normal" css
> > selectors that will get output to the client.
> >
> > If there is a good skin reference out there, that would be helpful
> > too. I did find one on Oracle's site, but it didn't talk about
> > combining controls with specified style classes that I could tell.
> >
> > Thanks,
> > Andrew
> >
>
>

Re: [Trinidad] Learning Custom skinning ... combining skin + styleClass?

[Simon Lessard <si...@gmail.com>]

Ah, great. I gotta update the JIRA issue back to IE 6 and older then.

On 8/16/07, Jeanne Waldman <je...@oracle.com> wrote:
>
>  FYI: Composite selectors are supported on IE7.
>
> - Jeanne
>
> Simon Lessard wrote:
>
> Hello Andrew,
>
> You almost got it right! The right combination would be
>
> .myTabs af|panelTabbed::tab-selected
>
> Since you set myTabs as the panel's class, the selected tab is a sub
> component of the panel therefore a descendant of .myTabs.
>
> You can combine skin selector with normal style class as much as you want.
> However there's one thing you have to keep in mind. Since skin selectors get
> converted to style classes, something like
>
> af|inputText.myStyleClass
>
> will be parsed to
>
> .af_inputText.myStyleClass
>
>
> That selector's syntax is CSS 2 valid, but CSS 2 is a very futurist
> standard for some (a single one) browser that is MSIE on which composite
> selectors aren't supported. So the above would not work well on MSIE.
>
>
> Regards,
>
> ~ Simon
>
> On 8/15/07, Andrew Robinson <an...@gmail.com> wrote:
> >
> > I am trying to write my own skin for my application. In this
> > application, I may want to have tab panels that look different. I see
> > that for example, the following skin selector exists:
> >
> > af|panelTabbed::tab-selected
> >
> > How can I style the selected tab of the following:
> >
> > <tr:panelTabbed styleClass="myTabs">
> >
> > Is it something like:
> >
> > af|panelTabbed::tab-selected .myTabs?
> >
> > I'm just not sure how the skin selectors work with "normal" css
> > selectors that will get output to the client.
> >
> > If there is a good skin reference out there, that would be helpful
> > too. I did find one on Oracle's site, but it didn't talk about
> > combining controls with specified style classes that I could tell.
> >
> > Thanks,
> > Andrew
> >
>
>

Re: [Trinidad] Learning Custom skinning ... combining skin + styleClass?

[Simon Lessard <si...@gmail.com>]

Hello Andrew,

You almost got it right! The right combination would be

.myTabs af|panelTabbed::tab-selected

Since you set myTabs as the panel's class, the selected tab is a sub
component of the panel therefore a descendant of .myTabs.

You can combine skin selector with normal style class as much as you want.
However there's one thing you have to keep in mind. Since skin selectors get
converted to style classes, something like

af|inputText.myStyleClass

will be parsed to

.af_inputText.myStyleClass


That selector's syntax is CSS 2 valid, but CSS 2 is a very futurist standard
for some (a single one) browser that is MSIE on which composite selectors
aren't supported. So the above would not work well on MSIE.


Regards,

~ Simon

On 8/15/07, Andrew Robinson <an...@gmail.com> wrote:
>
> I am trying to write my own skin for my application. In this
> application, I may want to have tab panels that look different. I see
> that for example, the following skin selector exists:
>
> af|panelTabbed::tab-selected
>
> How can I style the selected tab of the following:
>
> <tr:panelTabbed styleClass="myTabs">
>
> Is it something like:
>
> af|panelTabbed::tab-selected .myTabs?
>
> I'm just not sure how the skin selectors work with "normal" css
> selectors that will get output to the client.
>
> If there is a good skin reference out there, that would be helpful
> too. I did find one on Oracle's site, but it didn't talk about
> combining controls with specified style classes that I could tell.
>
> Thanks,
> Andrew
>

Re: [Trinidad] Learning Custom skinning ... combining skin + styleClass?

[Matt Cooper <ma...@gmail.com>]

Hi Andrew,

Since styleClass applies to the root element of a component, your
definitions could be something like this:

.CustomStyleClass.af|myComponent {
  /* styles for the root element */
}

.CustomStyleClass.af|myComponent af|myComponent::sub-element {
  /* styles for the sub element */
}

This way your definitions will not apply to that component unless it has
styleClass="CustomStyleClass" assigned.

There is one danger here though... if <af:myComponent> contains another
<af:myComponent> somewhere in its child subtree, those children may end up
inheriting your custom styles too.

Regards,
Matt

On 8/15/07, Andrew Robinson <an...@gmail.com> wrote:
>
> I am trying to write my own skin for my application. In this
> application, I may want to have tab panels that look different. I see
> that for example, the following skin selector exists:
>
> af|panelTabbed::tab-selected
>
> How can I style the selected tab of the following:
>
> <tr:panelTabbed styleClass="myTabs">
>
> Is it something like:
>
> af|panelTabbed::tab-selected .myTabs?
>
> I'm just not sure how the skin selectors work with "normal" css
> selectors that will get output to the client.
>
> If there is a good skin reference out there, that would be helpful
> too. I did find one on Oracle's site, but it didn't talk about
> combining controls with specified style classes that I could tell.
>
> Thanks,
> Andrew
>