CSS has been implemented in Flex, but it has some major shortcomings. One of the main ones is that it does not allow a single component to use multiple styles. Another is that a CSS style cannot inherit (or cascade…imagine that!) from another style. I wrote some code that might help fix that a bit.
The stylesheet to be referenced for this post:
.boldFont {
fontWeight: bold;
}
.underlineFont {
textDecoration: underline;
}
.blueFont {
color: #0000ff;
}
.superSize {
fontSize: 20;
}
.superBold {
inherits:"boldFont superSize";
}
</mx:Style>
Note that the style “superBold” is meaningless in the context of Flex. The classes included in this post interpret the “inherits” field.
The normal way:
Note the label may only take on one style at a time.
I’ve included two ways this can be circumvented. The difference being the syntax.
The results in context will look something like this.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
<mx:Style>
.boldFont {
fontWeight: bold;
}
.underlineFont {
textDecoration: underline;
}
.blueFont {
color: #0000ff;
}
.superSize {
fontSize: 20;
}
.superBold {
inherits:"boldFont superSize";
}
</mx:Style>
<mx:HBox verticalAlign="middle">
<mx:Label text="styleName = blueFont"/>
<mx:Label text="hello :(" styleName="blueFont"/>
</mx:HBox>
<mx:HBox verticalAlign="middle">
<mx:Label text="styleName = superBold underlineFont blueFont"/>
<mx:Label text="hello!" styleName="{bss('superBold underlineFont blueFont')}"/>
</mx:HBox>
<mx:HBox verticalAlign="middle">
<mx:Label text="styleName = superBold"/>
<mx:Label text="hello again!" styleName="{SBSS.styles.superBold}"/>
</mx:HBox>
</mx:Application>
which produces this swf.
Note “View Source” from the context menu of that swf will point you to the wrong place. Apparently it’s a Flex bug that they don’t plan to fix.
You can view source here or download the example project here.
Tags: css, hack, inheritance
