You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Samba <sa...@gmail.com> on 2008/03/10 13:35:46 UTC
Skin Additions for Custom Components
hi!
I'm trying to modify one of the trinidad Components to add a few missing
features.
I read that we can use the trinidad's Skinning capabilities to make custom
components based on trinidad also skinnable for the custom skin
selectors....
For doing this where should I define my skin selectors? for now I'm
directly using the CSS class name in the renderer class.
I tried defining the skin css classes in a custom skin which I treat as a
default skin for the component and it is working fine...
But I'm not able to extend the default skin for my component and provide a
different look...
The following is the trinidad-skin.xml
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>
sample.desktop
</id>
<family>
sample
</family>
<extends>
minimal.desktop
</extends>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
css/defaultSkin.css
</style-sheet-name>
</skin>
<skin-addition>
<skin-id>sample.desktop</skin-id>
</skin-addition>
<skin>
<id>
sample.custom
</id>
<family>
sampledemo
</family>
<extends>
sample.desktop
</extends>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
css/differentSkin.css
</style-sheet-name>
</skin>
</skins>
and trinidad-config.xml
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<debug-output>true</debug-output>
<!-- Uncomment to switch back to ALERT style client-side validation,
or set to DISABLED to disable it altogether
<client-validation>ALERT</client-validation>
-->
<accessibility-mode>false</accessibility-mode>
<!-- you can use EL to get the skin. This allows the skin to change
between
requests. -->
<skin-family>sampledemo</skin-family>
<!--
<output-mode>portlet</output-mode>
-->
<!-- Uncomment any of these to enable them -->
<!-- accessibility-mode>inaccessible</accessibility-mode -->
<client-validation-disabled>false</client-validation-disabled>
</trinidad-config>
Regards...
Samba.
Re: Skin Additions for Custom Components
Posted by Cristi Toth <cr...@gmail.com>.
Hi Jeanne,
You're definitely right! I wasn't too attentive.
I just thought in one project's scope.
But if one wants to ship a custom component in a jar, for use in multiple
projects,
then indeed skin-additions are needed.
In the case of only one project where you have custom skins (usually
extending existing ones)
it's enough to just use the skin-selectors in the custom skins and it will
work.
Regards,
--
Cristi Toth
-------------
Codebeat
www.codebeat.ro
On Fri, Mar 14, 2008 at 4:30 PM, Jeanne Waldman <je...@oracle.com>
wrote:
> Hi Cristi,
> I don't understand how if you wrote a custom component you wouldn't need
> a skin addition.
> Skin additions are a way for you to push your skinning into an existing
> skin.
>
> Let's say there is the 'simple' skin and a 'suede' skin and they are
> defined
> with skinning for the existing Trinidad components. Now you create a new
> component.
> You want to 'push' your 'simple' skin implementation and 'suede' skin
> implementation
> into these skins, so a user can use the Trinidad components + your
> component
> in simple or suede skin.
>
> When developing a custom component, you jar up that component and the
> skin information
> (META-INF/trinidad-skins.xml and your skin info)
> In trinidad-skins.xml, you'd add
> <skin-addition>
> <skin-id>simple.desktop</skin-id>
> <style-sheet-name>yourCustomComponentsSimpleDesktop.css</
> </skin-addition>
> <skin-addition>
> <skin-id>suede.desktop</skin-id>
> <style-sheet-name>yourCustomComponentsSuedDesktop.css</
> </skin-addition>
>
> Cristi Toth wrote, On 3/10/2008 1:28 PM PT:
> > Hi Samba,
> >
> > Forget the skin-additions, you don't need them.
> > The key of what you want to do relies in the renderer code
> > and in the way you define and use the skinning selectors.
> >
> > 1. Define your custom skinning selectors to be similar to the trinidad
> > ones:
> >
> > private static final String CUSTOM_SKIN_SELECTOR =
> > "af|component::custom-style-class";
> >
> > 2.In every renderer method you'll have the RenderingContext as a
> > parameter.
> > It provides a couple of methods for skinning purposes.
> > - rc.getStyleClass(skinSelector)
> > - rc.getIcon(skinselector)
> > - rc.getTranslatedString(textBundleKey)
> > - rc.getSkin().getProperty(skinProperty)
> >
> > The most commonly used are the first 2
> >
> > For using a skin-selector as a CSS style class you have to do this:
> > String styleClass = rc.getStyleClass(CUSTOM_SKIN_SELECTOR);
> > renderStyleClass(context, rc, styleClass);
> >
> >
> > In the base classes of any renderer you'll find this helper methods to
> > render the style attributes:
> > renderStyleClass(FacesContext context, RenderingContext rc, String
> > styleClass);
> > renderStyleClasses(FacesContext context, RenderingContext rc, String[]
> > styleClasses);
> > renderStyleAttributes(FacesContext context, RenderingContext rc,
> > FacesBean bean, String defaultStyleClass);
> >
> > For using a skinning selector for rendering an icon:
> > Icon icon = rc.getIcon(CUSTOM_ICON_SKIN_SELECTOR);
> > String iconURI = icon.getImageURI(context, rc).toString();
> > and use the uri as you want or use OutputUtils.renderIcon(...) methods
> >
> > You can take the TreeRenderer or maybe other simpler renderers as an
> > example.
> >
> > 3. After you customized the renderer you wanted (make sure it's
> > specified in faces-config.xml)
> > the use the skinning selectors you defined in your usual skin file.
> > (no skin-additions needed)
> >
> > hope this helps
> >
> > Cheers,
> >
> > On Mon, Mar 10, 2008 at 1:35 PM, Samba <saasira@gmail.com
> > <ma...@gmail.com>> wrote:
> >
> >
> > hi!
> > I'm trying to modify one of the trinidad Components to add a few
> > missing features.
> > I read that we can use the trinidad's Skinning capabilities to
> > make custom components based on trinidad also skinnable for the
> > custom skin selectors....
> >
> > For doing this where should I define my skin selectors? for now
> > I'm directly using the CSS class name in the renderer class.
> >
> > I tried defining the skin css classes in a custom skin which I
> > treat as a default skin for the component and it is working fine...
> > But I'm not able to extend the default skin for my component and
> > provide a different look...
> >
> > The following is the trinidad-skin.xml
> >
> >
> > <skins xmlns="http://myfaces.apache.org/trinidad/skin">
> >
> >
> > <skin>
> > <id>
> > sample.desktop
> > </id>
> > <family>
> > sample
> > </family>
> >
> > <extends>
> > minimal.desktop
> > </extends>
> >
> > <render-kit-id>
> > org.apache.myfaces.trinidad.desktop
> > </render-kit-id>
> > <style-sheet-name>
> > css/defaultSkin.css
> > </style-sheet-name>
> >
> > </skin>
> >
> > <skin-addition>
> > <skin-id>sample.desktop</skin-id>
> > </skin-addition>
> >
> >
> > <skin>
> > <id>
> > sample.custom
> > </id>
> > <family>
> > sampledemo
> > </family>
> >
> > <extends>
> > sample.desktop
> > </extends>
> >
> > <render-kit-id>
> > org.apache.myfaces.trinidad.desktop
> > </render-kit-id>
> > <style-sheet-name>
> > css/differentSkin.css
> > </style-sheet-name>
> >
> >
> > </skin>
> >
> > </skins>
> >
> >
> >
> > and trinidad-config.xml
> >
> > <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
> > <debug-output>true</debug-output>
> > <!-- Uncomment to switch back to ALERT style client-side
> validation,
> > or set to DISABLED to disable it altogether
> > <client-validation>ALERT</client-validation>
> > -->
> > <accessibility-mode>false</accessibility-mode>
> > <!-- you can use EL to get the skin. This allows the skin to
> > change between
> > requests. -->
> > <skin-family>sampledemo</skin-family>
> > <!--
> > <output-mode>portlet</output-mode>
> > -->
> > <!-- Uncomment any of these to enable them -->
> > <!-- accessibility-mode>inaccessible</accessibility-mode -->
> > <client-validation-disabled>false</client-validation-disabled>
> > </trinidad-config>
> >
> >
> >
> >
> >
> > Regards...
> > Samba.
> >
> >
> >
> >
> > --
> > Cristi Toth
> >
> > -------------
> > Codebeat
> > www.codebeat.ro <http://www.codebeat.ro>
>
Re: Skin Additions for Custom Components
Posted by Jeanne Waldman <je...@oracle.com>.
Hi Cristi,
I don't understand how if you wrote a custom component you wouldn't need
a skin addition.
Skin additions are a way for you to push your skinning into an existing
skin.
Let's say there is the 'simple' skin and a 'suede' skin and they are defined
with skinning for the existing Trinidad components. Now you create a new
component.
You want to 'push' your 'simple' skin implementation and 'suede' skin
implementation
into these skins, so a user can use the Trinidad components + your component
in simple or suede skin.
When developing a custom component, you jar up that component and the
skin information
(META-INF/trinidad-skins.xml and your skin info)
In trinidad-skins.xml, you'd add
<skin-addition>
<skin-id>simple.desktop</skin-id>
<style-sheet-name>yourCustomComponentsSimpleDesktop.css</
</skin-addition>
<skin-addition>
<skin-id>suede.desktop</skin-id>
<style-sheet-name>yourCustomComponentsSuedDesktop.css</
</skin-addition>
Cristi Toth wrote, On 3/10/2008 1:28 PM PT:
> Hi Samba,
>
> Forget the skin-additions, you don't need them.
> The key of what you want to do relies in the renderer code
> and in the way you define and use the skinning selectors.
>
> 1. Define your custom skinning selectors to be similar to the trinidad
> ones:
>
> private static final String CUSTOM_SKIN_SELECTOR =
> "af|component::custom-style-class";
>
> 2.In every renderer method you'll have the RenderingContext as a
> parameter.
> It provides a couple of methods for skinning purposes.
> - rc.getStyleClass(skinSelector)
> - rc.getIcon(skinselector)
> - rc.getTranslatedString(textBundleKey)
> - rc.getSkin().getProperty(skinProperty)
>
> The most commonly used are the first 2
>
> For using a skin-selector as a CSS style class you have to do this:
> String styleClass = rc.getStyleClass(CUSTOM_SKIN_SELECTOR);
> renderStyleClass(context, rc, styleClass);
>
>
> In the base classes of any renderer you'll find this helper methods to
> render the style attributes:
> renderStyleClass(FacesContext context, RenderingContext rc, String
> styleClass);
> renderStyleClasses(FacesContext context, RenderingContext rc, String[]
> styleClasses);
> renderStyleAttributes(FacesContext context, RenderingContext rc,
> FacesBean bean, String defaultStyleClass);
>
> For using a skinning selector for rendering an icon:
> Icon icon = rc.getIcon(CUSTOM_ICON_SKIN_SELECTOR);
> String iconURI = icon.getImageURI(context, rc).toString();
> and use the uri as you want or use OutputUtils.renderIcon(...) methods
>
> You can take the TreeRenderer or maybe other simpler renderers as an
> example.
>
> 3. After you customized the renderer you wanted (make sure it's
> specified in faces-config.xml)
> the use the skinning selectors you defined in your usual skin file.
> (no skin-additions needed)
>
> hope this helps
>
> Cheers,
>
> On Mon, Mar 10, 2008 at 1:35 PM, Samba <saasira@gmail.com
> <ma...@gmail.com>> wrote:
>
>
> hi!
> I'm trying to modify one of the trinidad Components to add a few
> missing features.
> I read that we can use the trinidad's Skinning capabilities to
> make custom components based on trinidad also skinnable for the
> custom skin selectors....
>
> For doing this where should I define my skin selectors? for now
> I'm directly using the CSS class name in the renderer class.
>
> I tried defining the skin css classes in a custom skin which I
> treat as a default skin for the component and it is working fine...
> But I'm not able to extend the default skin for my component and
> provide a different look...
>
> The following is the trinidad-skin.xml
>
>
> <skins xmlns="http://myfaces.apache.org/trinidad/skin">
>
>
> <skin>
> <id>
> sample.desktop
> </id>
> <family>
> sample
> </family>
>
> <extends>
> minimal.desktop
> </extends>
>
> <render-kit-id>
> org.apache.myfaces.trinidad.desktop
> </render-kit-id>
> <style-sheet-name>
> css/defaultSkin.css
> </style-sheet-name>
>
> </skin>
>
> <skin-addition>
> <skin-id>sample.desktop</skin-id>
> </skin-addition>
>
>
> <skin>
> <id>
> sample.custom
> </id>
> <family>
> sampledemo
> </family>
>
> <extends>
> sample.desktop
> </extends>
>
> <render-kit-id>
> org.apache.myfaces.trinidad.desktop
> </render-kit-id>
> <style-sheet-name>
> css/differentSkin.css
> </style-sheet-name>
>
>
> </skin>
>
> </skins>
>
>
>
> and trinidad-config.xml
>
> <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
> <debug-output>true</debug-output>
> <!-- Uncomment to switch back to ALERT style client-side validation,
> or set to DISABLED to disable it altogether
> <client-validation>ALERT</client-validation>
> -->
> <accessibility-mode>false</accessibility-mode>
> <!-- you can use EL to get the skin. This allows the skin to
> change between
> requests. -->
> <skin-family>sampledemo</skin-family>
> <!--
> <output-mode>portlet</output-mode>
> -->
> <!-- Uncomment any of these to enable them -->
> <!-- accessibility-mode>inaccessible</accessibility-mode -->
> <client-validation-disabled>false</client-validation-disabled>
> </trinidad-config>
>
>
>
>
>
> Regards...
> Samba.
>
>
>
>
> --
> Cristi Toth
>
> -------------
> Codebeat
> www.codebeat.ro <http://www.codebeat.ro>
Re: Skin Additions for Custom Components
Posted by Samba <sa...@gmail.com>.
Thanks Very much Christi .
It's very clear and exaustive; and I'm confident it will work for me.
Thanks a lot.
Samba
Re: Skin Additions for Custom Components
Posted by Cristi Toth <cr...@gmail.com>.
Hi Samba,
Forget the skin-additions, you don't need them.
The key of what you want to do relies in the renderer code
and in the way you define and use the skinning selectors.
1. Define your custom skinning selectors to be similar to the trinidad ones:
private static final String CUSTOM_SKIN_SELECTOR =
"af|component::custom-style-class";
2.In every renderer method you'll have the RenderingContext as a parameter.
It provides a couple of methods for skinning purposes.
- rc.getStyleClass(skinSelector)
- rc.getIcon(skinselector)
- rc.getTranslatedString(textBundleKey)
- rc.getSkin().getProperty(skinProperty)
The most commonly used are the first 2
For using a skin-selector as a CSS style class you have to do this:
String styleClass = rc.getStyleClass(CUSTOM_SKIN_SELECTOR);
renderStyleClass(context, rc, styleClass);
In the base classes of any renderer you'll find this helper methods to
render the style attributes:
renderStyleClass(FacesContext context, RenderingContext rc, String
styleClass);
renderStyleClasses(FacesContext context, RenderingContext rc, String[]
styleClasses);
renderStyleAttributes(FacesContext context, RenderingContext rc, FacesBean
bean, String defaultStyleClass);
For using a skinning selector for rendering an icon:
Icon icon = rc.getIcon(CUSTOM_ICON_SKIN_SELECTOR);
String iconURI = icon.getImageURI(context, rc).toString();
and use the uri as you want or use OutputUtils.renderIcon(...) methods
You can take the TreeRenderer or maybe other simpler renderers as an
example.
3. After you customized the renderer you wanted (make sure it's specified in
faces-config.xml)
the use the skinning selectors you defined in your usual skin file. (no
skin-additions needed)
hope this helps
Cheers,
On Mon, Mar 10, 2008 at 1:35 PM, Samba <sa...@gmail.com> wrote:
>
> hi!
> I'm trying to modify one of the trinidad Components to add a few missing
> features.
> I read that we can use the trinidad's Skinning capabilities to make custom
> components based on trinidad also skinnable for the custom skin
> selectors....
>
> For doing this where should I define my skin selectors? for now I'm
> directly using the CSS class name in the renderer class.
>
> I tried defining the skin css classes in a custom skin which I treat as a
> default skin for the component and it is working fine...
> But I'm not able to extend the default skin for my component and provide a
> different look...
>
> The following is the trinidad-skin.xml
>
>
> <skins xmlns="http://myfaces.apache.org/trinidad/skin">
>
>
> <skin>
> <id>
> sample.desktop
> </id>
> <family>
> sample
> </family>
>
> <extends>
> minimal.desktop
> </extends>
>
> <render-kit-id>
> org.apache.myfaces.trinidad.desktop
> </render-kit-id>
> <style-sheet-name>
> css/defaultSkin.css
> </style-sheet-name>
>
> </skin>
>
> <skin-addition>
> <skin-id>sample.desktop</skin-id>
> </skin-addition>
>
>
> <skin>
> <id>
> sample.custom
> </id>
> <family>
> sampledemo
> </family>
>
> <extends>
> sample.desktop
> </extends>
>
> <render-kit-id>
> org.apache.myfaces.trinidad.desktop
> </render-kit-id>
> <style-sheet-name>
> css/differentSkin.css
> </style-sheet-name>
>
>
> </skin>
>
> </skins>
>
>
>
> and trinidad-config.xml
>
> <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
> <debug-output>true</debug-output>
> <!-- Uncomment to switch back to ALERT style client-side validation,
> or set to DISABLED to disable it altogether
> <client-validation>ALERT</client-validation>
> -->
> <accessibility-mode>false</accessibility-mode>
> <!-- you can use EL to get the skin. This allows the skin to change
> between
> requests. -->
> <skin-family>sampledemo</skin-family>
> <!--
> <output-mode>portlet</output-mode>
> -->
> <!-- Uncomment any of these to enable them -->
> <!-- accessibility-mode>inaccessible</accessibility-mode -->
> <client-validation-disabled>false</client-validation-disabled>
> </trinidad-config>
>
>
>
>
>
> Regards...
> Samba.
>
--
Cristi Toth
-------------
Codebeat
www.codebeat.ro