WikiPage Styling Gumbo Components modified by SourceForge Editorial Staff

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

--- v1
+++ v2
@@ -1,11 +1,10 @@
 
-
-
+
 
   
 
 
-
+
 
 
 
@@ -397,13 +396,13 @@
 ----  
 
 
-
+
 
   
 [[ include ref='flexsdk_rightnav' ]]  
 
 
-
+

WikiPage Styling Gumbo Components modified by SourceForge Editorial Staff

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

# 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. ## 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](http://opensource.adobe.com/wiki/display/flexsdk/Gumbo%2BText%2BPrimitives%23GumboTextPrimitives-DetailedDescription) 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](http://opensource.adobe.com/wiki/display/flexsdk/Gumbo%2BText%2BPrimitives%23GumboTextPrimitives-DetailedDescription) 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") ![](ColorCallouts.gif) #### Image 2 & 3. Examples with different colors ![](DarkColors.gif) **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 ]] ---- ![](JungleColors.gif) **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](CSS%20Advanced%20Selectors) 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. #### Layout related styles 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. #### Drawing related styles 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](http://opensource.adobe.com/wiki/display/flexsdk/Gumbo%2BText%2BPrimitives%23GumboTextPrimitives-DetailedDescription) 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 */ Style(name="chromeColor", type="uint", format="Color", inherit="yes") /** * The color for symbols and glyphs. * * @default #000000 */ Style(name="symbolColor", type="uint", format="Color", inherit="yes") /** * The color for the content area of components and items. * * @default #FFFFFF */ Style(name="contentBackgroundColor", type="uint", format="Color", inherit="yes") /** * The color for content area of items when the mouse is over the item. * * @default #CEDBEF */ Style(name="rollOverColor", type="uint", format="Color", inherit="yes") /** * The color for the content area of selected items, and the selection * highlight for selected text. * * @default #A8C6EE */ Style(name="selectionColor", type="uint", format="Color", inherit="yes") /** * The color for the focus glow. * * @default #70B2EE */ Style(name="focusColor", type="uint", format="Color", inherit="yes") /** * 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 */ Style(name="alternatingItemColors", type="Array", arrayType="uint", format="Color", inherit="yes") 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 */ Bindable 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 */ Bindable 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 */ Bindable 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. ----

[[ include ref='flexsdk_rightnav' ]]

Recent changes to Styling Gumbo Components

WikiPage Styling Gumbo Components modified by SourceForge Editorial Staff

WikiPage Styling Gumbo Components modified by SourceForge Editorial Staff