Yesterday I noticed a cool question on Flexcoders asking about changing Button labels using CSS. The project consisted of an application that could be styled a number of different ways using different CSS files.
I suggest extending the Button and adding a label style property. Here’s what I came up with:
{
import mx.controls.Button;
//////////////////////////////////////
/ styles
//////////////////////////////////////
/**
* Sets the label text according to the CSS style.
*/
[Style(name=”labelText”, type=”String”)]
[Exclude(name=”label”, kind=”property”)]
public class StyleButton extends Button
{
public function StyleButton()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
setStyles();
}
override public function set label(value:String):void
{
throw new Error(“This label is set using the CSS property labelText”);
}
protected function setStyles():void
{
this.label = this.getStyle(“labelText”) as String;
}
}
}
Something still feels a little dirty about doing it this way. It’d be one thing if we were changing width, height or even possition of respurces with CSS but we’re actually changing text values and it doesn’t seem proper. I think it’s because CSS has alwasy been intended to describe the presentation, look and feel of a document where in this example we are actually changing document content.
I’ve used the ResourceManager for localization of international applications before and it seems like that would be an excellent resource to accomplish something similar.
Any other ideas?
DougHughes.net 
Comments on: "Bending the rules using CSS" (1)
This is an interesting idea. I think it depends on how you think about the label of a button. Is the label part of the content or part of the look and feel. “Feel” is the important word here. Imagine having two themes…one very professional and business like while the other theme is very casual. The “feel” of the theme really ties into the labels. For example the business theme may have a button labeled “Let’s Get Started” while the casual theme may be better served with a label like “Let’s Rock and Roll!”. Being able to control that from the CSS file would be pretty cool.
LikeLike