Styling Component Parts

Problem Description

How do you style skin parts independently from styling the overall component? For example, making the Panel title "bold" while the rest of the text in the Panel is "normal".

See these bugs for more background:
https://bugs.adobe.com/jira/browse/SDK-19726
https://bugs.adobe.com/jira/browse/SDK-19447

Decision

pending…

Decision Criteria

• Toolability
• Performance
• Usability
• Implementation concerns

Proposed Solution(s):

1. Hard-coded into skin definitions

This is the current approach used by the Gumbo components. The majority of styles are defined once, on the global selector. If a skin part requires a different style, it is hard-coded into the skin.

Example:

global {
    font-weight: normal;   /* global font weight */
}

FxPanelSkin.mxml
<Skin>
    ...
    <!-- Panel title is bold. -->
    <TextBox id="titleField" fontWeight="bold" />
    ....
</Skin>

Pros:

• Simple and lightweight

Cons:

• Requires re-skinning to change the style

2. Use Advanced CSS

Use the new advanced CSS features added to Flex 4 for specifying styles. For example, the Panel titleField is made bold with the following selector:

Example:

Panel #titleField {
    font-weight: bold;
}

Pros:

• Uses a new feature of Flex 4
• Allows changing of styles without reskinning

Cons:

• Possible name collisions with child elements. For example, any child with the id "titleField" at any depth below the panel will be bold. The chance of collision could be limited with clever naming, but these names are also the names of the skin parts.
• Could be confusing when re-skinning. If you create a new panel skin and want non-bold text in the header, you need to either add a CSS selector, or force the text to be non-bold. An issue here is Catalyst does not have any way to explicitly un-bold text that is implicitly bolded.
• Performance considerations of using advanced CSS.

3. Expose selectors for skin parts

This is the solution used for most Halo components.

Example:

FxPanel {
    titleFieldStyleName: panelTitleField;
}

.titleFieldStyleName {
    font-weight: bold;
}

Pros:

• Consistency with Halo (is that a Pro?)
• Allows changing of styles without reskinning.

Cons:

• Complicates component APIs by adding a bunch of style name selectors.
• Clunky hack now that we have advanced CSS.

4. Create new types for specific skin parts

This is the solution used by some Halo components like FormItem/FormItemLabel.

Example:

PanelTitleTextBox {
    font-weight: bold;
}

Pros:

• Allows changing of styles without reskinning.

Cons:

• Class bloat
• Excessive solution to a simple problem.

Recommended Solution:

Solution #1, for the following reasons:

1. This is the solution that works best for Catalyst
2. Simple, straightforward, and no side effects

A 3rd party developer could easily create a theme that uses advanced CSS (ie proposal #2), if desired.