skinability

[tkmyers]

How do you reference the skin properties in xhtml files? I would have thought a "skin" would be implemented using css conventions / definitions and the like.

If I want my design to be skinable, what practices should I follow?

Can I use #{EL} in styleSheet rules? I presume I can use them in a style inline, but is that the best way?

[ishabalov]

You can refer to skin parameters simply like

#{skin.<>}

like for example #{skin.headerBackgroundColor} anywhere when EL is allowed.

If you want to put it into css, you need to us "inline" style definitions in (for example) .xhtml file.

In general approach that I used is to separate "static" style definition (and put it into .css) from "dynamic" styles (and put it into template include). You can refer to richfaces-demo implementation in svn/richfaces-samples/richfaces-demo folder. There is template/include/dynamic-css.xhtml file there. Currently it used for image handling, but any style definitions can be specified that way.


To make your design skinnable you need to use skin parameters in your styles. You need to understand what style corresponds to what parameter and use them accordingly.

[ishabalov]

And I presume you read basics from here

http://blog.exadel.com/?p=25

[tkmyers]

"ishabalov" wrote:
And I presume you read basics from here

http://blog.exadel.com/?p=25

I just found that today. Very good info. Clears up all the questions I have right now about skinning / css.

Thanx so much for your input people!

[tkmyers]

Actually, upon closer reading I have a question.

I understand the design approach you explained, and if I had to change the characteristics for a "panel" component I'd be all set. But what if I need to change various characteristics for some other component?

It would be great if the level of documentation you provided for "panel" were available for all components. For example I see that a "br" tag is rendered for a radio button group, but I want the group and subsequent text rendered on one line.

Is documentation available to accomplish what I want to do? I hate to put a ton of styleClass attributes in the xhtml and their corresponding css entries. Its just not the right way to do things.

[tkmyers]

BTW, I tried to register on your blog site so I could post a reply. I think I managed to get registered but when I click on the link to add a comment I'm taken to my user profile page. However from there I can't proceed to add a comment. Updating profile just returns back to profile page.

[ishabalov]

There is big difference between skin and renderer. Skin allow you to "decorate" existing markup, but you cannot change the markup itself. In your case with "br" tag you will need special renderer to remove it from radio button group.

In our case you may use rich-* classes in css to update look for all components. Plus someone mention the idea to add "prefixes" to stile classes. I'm still thinking about it.

Yes, we are constantly working on documentation.

I will verify our blog system why it breaks on registration.

[ishabalov]

And btw you can create your own skin and use it. Just copy some of existing skins into new file, name it "my.skin.properties" and refer to it in web.xml like context param named "org.ajax4jsf.SKIN" and value "my".

That way you can make most of the changes and just do fine grained tuning in some special places.

[tkmyers]

I copied the properties file from one of the richfaces skins and started with that as a basis for my own custom skin.

Regarding the radio button problem, upon further investigation I see the issue wasn't a "br" tag at all, though it behaves like a br is present.

I'm not sure why this occurs, or how to resolve it yet, but I believe it is possible to fix it with css alone.

The problem is that the radio button group is rendered as a table, and for some unknown reason anything following that table always appears on a separate line, as though there were a br tag in the markup (but there isn't).

I placed a clear:none in the css for table but that didn't resolve it.

Do let us know when updated documentaion becomes available so we can take advantage of all those wonderful css hooks you built in!

[ilya_shaikovsky]

At first - in our documentation we provide the set of the peredefined styleClasses for all the components we provide in the skinability subsections for every component.

For your second question - we do not provide our renderers for standard components and do not change the way it renders by default. So you need to explore the documentation for this components in the common JSF docs.