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 <[EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>> 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>
