myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Cristi Toth" <cristi.t...@gmail.com>
Subject Re: Skin Additions for Custom Components
Date Mon, 10 Mar 2008 20:28:30 GMT
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> 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

Mime
View raw message