This chapter is from the book
This chapter is from the book
This chapter is from the book
Style Precedence
Depending on where and how they are defined, some styles may override others. Leveraging this gives you a lot of control over how styles are applied in your application, while still allowing you to make broad-stroke changes at a high level.
Redefining a selector does not completely replace the selector, but rather appends additional properties and overrides any existing ones. This means you can simply override the properties you wish, and keep everything else as it's been defined previously. For example, you like the way the Halo buttons look, but you want to shrink the corner radius to 0 pixels. All you have to do is create a Button type selector and set the cornerRadius property to 0 (see Listing 4-10). All instances of Button maintain the properties defined in the default style sheet, but will not have rounded corners (see Figure 4-3).
Listing 4-10. Overriding the cornerRadius value for all Button components
<mx:Style>
Button
{
cornerRadius: 0px;
}
</mx:Style>
<mx:Button label="Button 1"/>
<mx:Button label="Button 2"/>
)
Figure 4-3 Halo buttons without rounded corners
Likewise, assigning a class selector to a component for which a type selector is also defined results in a combination of the style properties being applied. Listing 4-11 extends the previous example by creating a type selector and applying it to the second button. Both buttons still have square corners, but the second one also has a red label as specified by the type selector (see Figure 4-4).
Listing 4-11. Overriding the cornerRadius value for all Button components and applying a class selector to a specific button
<mx:Style>
Button
{
cornerRadius: 0px;
}
.redText
{
color: #FF0000;
}
</mx:Style>
<mx:Button label="Button 1"/>
<mx:Button label="Button 2" styleName="redText"/>
)
Figure 4-4 Halo buttons without rounded corners. Button 2 has a red label.
Generally speaking, styles applied inline override styles defined locally, which override styles defined in external style sheets. Moreover, inline styles override class selectors, which override type selectors, which override the global selector. Whew. Let's consider some examples.
Let's say you've defined that all buttons in your application should have a dark gray label by specifying the color style property in an external style sheet named myStyles.css (see Listing 4-12). However, in a particular view, like a high-contrast heads-up display panel (HUDPanel.mxml), you want all the buttons to have white labels. One way to accomplish this is to redefine the color property for all buttons in an <mx:Style> block in the MXML file that defines the panel (see Listing 4-13).
Listing 4-12. Button label color specified in an external style sheet
/* myStyles.css */
Button
{
color: #333333 /* dark gray */
}
Listing 4-13. Overriding the Button type selector within a specific view
<!-- HUDPanel.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="">
<mx:Style>
Button
{
color: #FFFFFF; /* white */
}
</mx:Style>
</mx:Panel>
You could also approach the challenge described previously by creatively using the different types of selectors. A Button type selector could still define the dark grey label, but you could create a class selector called hudButton (see Listing 4-14) and apply that to each button within the heads-up display panel (see Listing 4-15).
Listing 4-14. Defining a type selector and a class selector
/* myStyles.css */
Button
{
color: #333333 /* dark gray */
}
.hudButton
{
color: #FFFFFF /* white */
}
Listing 4-15. Overriding the Button label color by applying the class selector
<!-- HUDPanel.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Button styleName="hudButton" label="click me" />
</mx:Panel>
Yet another way to approach this challenge is to utilize inheritance. Remember that the color style property propagates from a parent container to the children within. So, perhaps the easiest way to solve this problem is to set the color property for the entire HUDPanel container with a type selector and let the buttons inherit the value (see Listing 4-16). Keep in mind that this will change the color property of all eligible children components such as Labels and ComboBoxes, but this is probably desirable.
Listing 4-16. Specifying the color for all components in the HUDPanel container with a type selector
/* myStyles.css */
Button
{
color: #333333 /* dark grey */
}
HUDPanel
{
color: #FFFFFF /* white */
}
Listing 4-17. Combining styles using comma delimitation
.downloadButton, .saveButton
{
fillColors: #FFFFFF, #CCCCCC;
borderColor: #666666;
cornerRadius: 8;
color: #222222;
}
.downloadButton
{
icon: Embed(source="downloadIcon.png");
}
.saveButton
{
icon: Embed(source="saveIcon.png");
}