[svn] 4806: Fixes for Advanced CSS applying to inner components.

Question

Revision: 4806
Author: [email protected]
Date: 2009-02-02 21:01:18 -0800 (Mon, 02 Feb 2009)
Log Message:
Fixes for Advanced CSS applying to inner components. The changes involved three areas:
1. mx.styles.StyleProxy needed updating to support IAdvancedStyleClient
2. mx.styles.StyleProtoChain required refactoring so that advanced selector matching functionality could be shared outside of this class (see next). The main change is in StyleProtoChain.addProperties() which is recursively called to handle the case when styleName is set to another IStyleClient (instead of a String). The change concerns the order of building the proto chain for this special case. Before advanced CSS, it seems we recursively did the following in the addProperties() subroutine:
- Find type selectors, add to proto chain
- Examine styleName:
- if a CSSStyleDeclaration, add it to the proto chain next
- if a IStyleClient, recurse again by calling addProperties to this IStyleClient
- if a String, apply class selectors to proto chain
- Finally, add inline style declarations to proto chain
Advanced CSS might involve other universal selectors that aren't necessarily class selectors (such as id selectors), or we could have type selectors that are more specific that class selectors. So the new logic for Advanced CSS is:
- Examine styleName:
- if a CSSStyleDeclaration, add it to the list of selectors
- Get all matching selectors, sort by specificity, and add to the proto chain.
- Then, if styleName was an IStyleClient, recurse again by calling addProperties to this IStyleClient
- Finally, add inline styleDeclarations to proto chain
A styleName pointing to an IStyleClient means that it has a very high specificity and will override any other selector. The only thing that continues to always win are inline style declarations which are added last to the proto chain.
3. mx.core.UIComponent.initThemeColor() needed updating to support advanced CSS selectors. This required the use of a new utility method in StyleProtoChain to find matching selectors.
QA: Yes, please watch styles test results closely. Take a look at descendant/id/class selectors on more advanced components like DataGrid.
Doc: No
Checkintests: Pass
Reviewer: Glenn
Bugs:
SDK-17358 - [Advanced CSS] When using an id selector without a Type selector, styles are not passed onto sub components (e.g. the drop down of a ComboBox)
Ticket Links:
http://bugs.adobe.com/jira/browse/SDK-17358
Modified Paths:
flex/sdk/trunk/frameworks/projects/framework/src/mx/core/UIComponent.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/StyleProtoChain.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/StyleProxy.as

Answer 1

Hi,
you define a CSS class in the document, e.g.
<style type="text/css">
.myClass{color:red;}
<style>
The myClass names now is what you add to the class property
Frank