Menu ▾ ▴

Styling Gumbo Components

SourceForge Editorial Staff

Styling Gumbo Components

Glossary

style - A property that can be set directly on a component tag or through CSS.

inheriting style - A style that can be "inherited" by child objects. In this example, the fontSize style is inherited by the child TextBox. 

<VGroup fontSize="24">
    <TextBox text="Hello, World!" />
</VGroup>

Summary and Background

Styling is used to easily change the appearance of Flex components.

For Gumbo/Spark, styling plays a smaller role than it did in Halo. Skinning in Halo was difficult and error-prone, which led to styling as a primary mechanism for visual customization. Halo skins supported a large number of styles that affected the color (including alpha), layout, and physical appearance (border thickness, corner radius, etc.) of the skins.

The main complaints about styling in Halo are:

  • Inconsistency: for example, some skins supported cornerRadius, but not others.
  • Complexity: fully styling a Halo application requires scouring the defaults.css file and looking for overrides to all of the default style values. Some styles, like the background color for Alerts, are commonly overlooked.
  • Incomplete: even though a large number of style properties available, there were still many aspects of the appearance that could not be controlled by styles. For example, the gradient fills only supporte two colors with fixed gradient ratios.

Styles in Spark skins address the first two complaints. The new skinning architecture and FXG address the third. The default styles for Spark skins are defined entirely on the global selector, making it simple to easily (and completely) change the look for an entire application. Every skin consistently uses the style values.

In Spark, styles are intended for simple "tweaks" to the look. If you want more control over the appearance of the component you will need to edit the components skin. Tools like Flash Catalyst and Flex Builder, combined with the new Gumbo/Spark architecture, make skinning much easier than it was in Halo.

Usage Scenarios

Kara is creating a new application in Flex 4, and would like to give the application an overall "dark" look. She is happy with the appearance of the Spark skins, but just wants them to look darker. With a couple simple style settings, Kara is able to get the look she wants.

Corey is writing a calculator application in Flex 4, and wants the memory function buttons to be a different color than the rest of the buttons. The memory function buttons are in an HGroup, so all he needs to do is set the chromeColor style on the HGroup and all of the buttons inside the group are colorized.

James has created an app for the environmental group he is involved with. The app looks great, but the default gray colors of the components look too business-like. He browses over to scalenine.com, finds a stylesheet that is a better fit for the app and applies it.

Detailed Description

The Spark skins support two main categories of styles: text and color. All style properties are inheriting styles, which means they can be set on any level in the application containment hierarchy.

The text-related styles are all described in the Gumbo Text Primitives spec.

The color styles are:

Name
Description

chromeColor
The main color of the component. The default skins are all based on various shades of gray. The chromeColor is applied as a color transformation (tinting), which preserves all of the visual fidelity of the default appearance. Items colorized by other color style values are not affected by chromeColor

color
The color of text. See the Gumbo Text Primitives spec for details.

contentBackgroundColor
The color of the content area of components that contain content.

symbolColor
The color of symbols or glyphs.

rollOverColor
The background color of items when the mouse is positioned over the item.

selectionColor
The background color of selected items or text.

focusColor
The color of the focus glow.

Image 1. Screenshot showing various style colors and where they are applied.

(note: the screenshot uses the old "contentColor" name. It should be "contentBackgroundColor")

Image 2 & 3. Examples with different colors

Colors used:

Style Name
Style Color Value

Application background
[[ bgcolor arg0='#333333' ]]#333333[[ /bgcolor ]]

chromeColor
[[ bgcolor arg0='#4C4C4C' ]]#4C4C4C[[ /bgcolor ]]

color (text)
[[ bgcolor arg0='#EEEEEE' ]]#EEEEEE[[ /bgcolor ]]

contentBackgroundColor
[[ bgcolor arg0='#555555' ]]#555555[[ /bgcolor ]]

symbolColor
[[ bgcolor arg0='#FFFFFF' ]]#FFFFFF[[ /bgcolor ]]

rollOverColor
[[ bgcolor arg0='#666666' ]]#666666[[ /bgcolor ]]

selectionColor
[[ bgcolor arg0='#999999' ]]#999999[[ /bgcolor ]]

focusColor
[[ bgcolor arg0='#EEEEEE' ]]#EEEEEE[[ /bgcolor ]]

Colors used:

Style Name
Style Color Value

Application background
[[ bgcolor arg0='#CCCC99' ]]#CCCC99[[ /bgcolor ]]

chromeColor
[[ bgcolor arg0='#999966' ]]#999966[[ /bgcolor ]]

color (text)
[[ bgcolor arg0='#333300' ]]#333300[[ /bgcolor ]]

contentBackgroundColor
[[ bgcolor arg0='#FFFFCC' ]]#FFFFCC[[ /bgcolor ]]

symbolColor
[[ bgcolor arg0='#663300' ]]#663300[[ /bgcolor ]]

rollOverColor
[[ bgcolor arg0='#FFEE88' ]]#FFEE88[[ /bgcolor ]]

selectionColor
[[ bgcolor arg0='#FFCC66' ]]#FFCC66[[ /bgcolor ]]

focusColor
[[ bgcolor arg0='#CC9900' ]]#CC9900[[ /bgcolor ]]

Styles can be used in conjunction with the CSS Advanced Selectors feature to provide high levels of control over styling specific elements. For example, if you want all scrollbars inside a List to be darker colored, you could do this inside a Style block:

s|List s|ScrollBar {
    chrome-color: #444444;
}

You can also use the new pseudo-selectors for state-specific styling. For example, if you want the color for the text in a selected item renderer to be different, you can do this:

s|ItemRenderer:selected {
    color: #330000;
}

What about all the other Halo styles?

Halo components supported a large number of styles that are no longer supported in Gumbo components. In Halo, skinning was done as a last resort. In Gumbo, skinning is a primary workflow. Halo relied on styles as a crutch to handle items that really belong in the skin.

Here are some examples of styles that are being retired.

Examples include labelPlacement, headerHeight, verticalGap, etc. These styles are now properties in the skin and/or layout.

State driven styles

Examples include disabledColor, backgroundDisabledColor, textRollOverColor, etc. These styles are replaced with stateful styles/attributes in the skin or CSS pseudo selectors.

Examples include fillColors, highlightAlphas, cornerRadius, etc. These styles are replaced with FXG markup in the skins.

API Description

Style metadata added to SkinnableComponent and GroupBase. See the Gumbo Text Primitives spec for information about the text style properties.

/**

 * The main color for components. This style is used to create a color transformation 
 * (tint) for the overall color of the skin. Items colorized by other color style
 * values are not affected by chromeColor.
 *
 * @default #CCCCCC
 */
<a href="Style%28name%3D%26quot%3BchromeColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%29">Style(name="chromeColor", type="uint", format="Color", inherit="yes")</a>

/**

 * The color for symbols and glyphs. 
 *
 * @default #000000
 */
<a href="Style%28name%3D%26quot%3BsymbolColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%29">Style(name="symbolColor", type="uint", format="Color", inherit="yes")</a>

/**

 * The color for the content area of components and items. 
 *
 * @default #FFFFFF
 */
<a href="Style%28name%3D%26quot%3BcontentBackgroundColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%29">Style(name="contentBackgroundColor", type="uint", format="Color", inherit="yes")</a>

/**

 * The color for content area of items when the mouse is over the item. 
 *
 * @default #CEDBEF
 */
<a href="Style%28name%3D%26quot%3BrollOverColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%29">Style(name="rollOverColor", type="uint", format="Color", inherit="yes")</a>

/**

 * The color for the content area of selected items, and the selection 
 * highlight for selected text. 
 *
 * @default #A8C6EE
 */
<a href="Style%28name%3D%26quot%3BselectionColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%29">Style(name="selectionColor", type="uint", format="Color", inherit="yes")</a>

/**

 * The color for the focus glow. 
 *
 * @default #70B2EE
 */
<a href="Style%28name%3D%26quot%3BfocusColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%29">Style(name="focusColor", type="uint", format="Color", inherit="yes")</a>

/**

 * The color for symbols and glyphs. When defined, the contentBackgroundColor style
 * is ignored for items, and the alternating colors are used instead.
 *
 * This style contains an array of two or more colors.
 *
 * @default undefined
 */
<a href="Style%28name%3D%26quot%3BalternatingItemColors%26quot%3B%2C%20type%3D%26quot%3BArray%26quot%3B%2C%20arrayType%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%29">Style(name="alternatingItemColors", type="Array", arrayType="uint", format="Color", inherit="yes")</a>

Color properties added to ItemRenderer. 

{
    /**

     *  The color of the content area for the item. If the
     *  alternatingItemColors style is set, this will return
     *  the appropriate color for the item's index. If the
     *  alternatingItemColors style is not set, this returns
     *  the value of the contentBackgroundColor style.
     *
     *  @default 0xFFFFFF
     */
    <a href="Bindable">Bindable</a>
    public function get contentBackgroundColor():uint;
    public function set contentBackgroundColor(value:uint):void;

    /**

     *  The color of the content area for the item when the 
     *  mouse is positioned over the item. This gets and 
     *  sets the rollOverColor style for the item.
     *
     *  @default 0xCEDBEF
     */
    <a href="Bindable">Bindable</a>
    public function get rollOverColor():uint;
    public function set rollOverColor(value:uint):void;


    /**

     *  The color of the content area for the item when the 
     *  mouse is positioned over the item. This gets and 
     *  sets the rollOverColor style for the item.
     *
     *  @default 0xA8C6EE
     */
    <a href="Bindable">Bindable</a>
    public function get selectionColor():uint;
    public function set selectionColor(value:uint):void;
}

B Features

Additional Implementation Details

A SparkSkin base class is used to handle the styling functionality for our Spark skins. For performance and size considerations, the Spark skins do not use databinding to implement styles. Color styles (except chromeColor, which is handled differently) are applied by declaring which elements of the skin should be colored. The chromeColor style is handled by creating a ColorTransform object and assigning it directly to the skin.

Prototype Work

All of the styles described in this spec have been prototyped.

Compiler Work

None

Web Tier Compiler Impact

None

Flex Feature Dependencies

None

Backwards Compatibility

Syntax changes

None

Behavior

The Spark skins for Halo components will support a smaller set of styles than the Halo skins.

Warnings/Deprecation

None

Accessibility

None

Performance

Several steps have been taking to minimize the size and speed impact of styles:

  • Data binding is not used for the majority of style properties. The individual elements that need to be styled are declared by each skin and the SparkSkin base class has code that explicitly walks the declarations and applies the color values.
  • The declared elements are done as memory-friendly as possible, using const static properties for all Array storage.
  • The chromeColor style is not applied if the default value is used. This saves at least one ColorTransform object per skin in the default case.

Globalization

None. This spec only deals with basic appearance. Mirroring (or other direction related properties that are locale-dependent) is handled in a separate spec.

Localization

Compiler Features

None

Framework Features

None

Issues and Recommendations

  • Should the SparkSkin class be documented and supported?

Documentation

The migration guide needs to have a section about styles, and how many of the Halo styles are now properties on skins. A table with Halo style values and their replacement skin property would be helpful.

We should figure out if we want to document the mechanisms used in the SparkSkin class as "best practice" for creating styleable skins.

QA

Testing recommendations:

  • Performance testing to make sure styles are not introducing too much overhead for both memory and speed.
  • All styles should be tested globally and locally to make sure there are no hard-coded style values in any of the Spark skins.
MongoDB Logo MongoDB