WikiPage Styling Component Parts modified by SourceForge Editorial Staff

SourceForge Editorial Staff — Fri, 07 Dec 2012 18:12:01 -0000

--- v1
+++ v2
@@ -1,12 +1,11 @@
 
-
-
+
 
 
 
 
 
-
+
 
 
 
@@ -136,7 +135,7 @@
 
 A 3rd party developer could easily create a theme that uses advanced CSS (ie proposal #2), if desired.
 
-[[ include ref='site:open_commentlogin' ]]
+
 
 
 
@@ -144,7 +143,7 @@
 
 
 
-[[ include ref='flexsdk:flexsdk_rightnav' ]]
+[[ include ref='flexsdk_rightnav' ]]

WikiPage Styling Component Parts modified by SourceForge Editorial Staff

SourceForge Editorial Staff — Thu, 15 Mar 2012 18:12:59 -0000

# 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 ... .... 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. [[ include ref='site:open_commentlogin' ]]

[[ include ref='flexsdk:flexsdk_rightnav' ]]

Recent changes to Styling Component Parts

WikiPage Styling Component Parts modified by SourceForge Editorial Staff

WikiPage Styling Component Parts modified by SourceForge Editorial Staff