Can I use stylesheets to create multiple button styles?

Question

I am trying to create a custom look-and-feel within UIX to get it as close as possible to
our existing application's look-and-feel.
As part of this, I customized the UIX button by overriding the following named style:
ButtonServerText
and also by providing my own icons for:
buttonStart
buttonEnd
buttonTopBackground
buttonBottomBackground
The good news is that I was able to get the button component to look exactly like our existing
application buttons.
The bad news is that we have different types of buttons in our application
for different purposes. (i.e. the image used for the button can be completely different based on the context e.g.
yellow button for important actions and light-blue buttons for secondary actions)
It seems like there is no way in which I can use this stylesheet mechanism to create different types of buttons
and use them within my application. (sometimes different types of buttons can appear on the same page)
Please let me know if there is a way.
This is in fact a general question regarding overriding a stylesheet for customizing look-and-feel.
Lets say I customize the "contentContainer" component using the stylesheet. This change would then be global.
But I do want to have different types of contentContainers in the application. I would be forced to create my own custom
UIX elements similar to contentContainer and write my own renderers.
(I know contentContainer does have the light, medium and dark styles. I used this just as an example.)
Please let me know what my options are.
Thanks,
Jayesh Kapoor

Answer 1

Hi Jayesh -
The good news is that I was able to get the button
component to look exactly like our existing
application buttons.Cool - I'm glad to hear you were able to get this working!
The bad news is that we have different types of
buttons in our applicationRight. This is a fundamental limitation of our look and feel customization functionality - we only support global customizations, not instance-specific customizations. I agree that there are many cases where instance-level customization would be useful, but this just instance supported yet.
The only solution that I can think of for your button dilemma would be to use static images. It's pretty easy to wire up an image to behave like a button - just embed the image in a link and use <fireAction> as the link's primaryClientAction.
Obviously, the downside of this approach is that you need to create the button images manually - which also isn't ideal if you are planning to translate your applications. One possible solution here might be to use UIX to pre-generate your button images. The idea would be to create custom LAFs for each style of button, then create a UIX page for each button style, including <button> instances for each translated value. Then, you could configure UIX to run in the desired look and feel, hit the corresponding page, and UIX will generate the required buttons into your image cache. Again, not ideal, but this might be easier than creating the buttons by hand.
This is in fact a general question regarding
overriding a stylesheet for customizing
look-and-feel.
Lets say I customize the "contentContainer" component
using the stylesheet. This change would then be
global.
But I do want to have different types of
contentContainers in the application. I would be
forced to create my own custom
UIX elements similar to contentContainer and write my
own renderers.Right - this is a generic problem. But for some components, like content containers, an easier solution might be to leverage UIX's templating mechanism. Remember, you can embed arbitrary HTML contents in a UIX page/template by setting the namespace to "http://www.w3.org/TR/REC-html40". You can then reference these templates from your other UIX contents as if they were in fact UIX components. I'd recommend that you explore UIX's template support to see if this will meet your needs.
Andy