How flex styles work

The stream playback header advances to the second stage, and the docframehandler function starts to execute.
First, we will execute many singleton. registerclass methods, and then execute the class with the [Mixin] meta tag
Public static function Init (FBS: iflexmodulefactory): The Void method flex compiler will generate many classes with [Mixin] meta tags during compilation. Most of the classes are related to styles, like the following program code "_ alertbuttonstylestyle", "_ scrollbarstyle ",
"_ Activetabstylestyle", "_ textareahscrollbarstylestyle ",
"_ Tooltipstyle", "_ advanceddatagridstylesstyle ",
"_ Combodropdownstyle", "_ combodropdownstyle ",
"_ Containerstyle", "_ textareavscrollbarstylestyle ",
"_ Linkbuttonstylestyle", "_ globalstyle", "_ windowstatusstyle ",
"_ Windowstylesstyle", "_ activebuttonstylestyle ",
"_ Errortipstyle", "_ richtexteditortextareastylestyle ",
"_ Cursormanagerstyle", "_ todaystylestyle", "_ datefieldpopupstyle ",
"_ Plainstyle", "_ maid", "_ applicationstyle ",
"_ HeaderDateTextStyle", "_ ButtonStyle", "_ VScrollBarStyle ",
"_ PopUpMenuStyle", "_ swatchPanelTextFieldStyle ",
"_ OpaquePanelStyle", "_ weekDayStyleStyle", "_ headerDragProxyStyleStyle" class. Their role is to register style information to StyleManager, in this way, when a component is generated, the component can obtain its own style information.

There is a framework. SWC file in the sdks/3.0.0/frameworks/libs directory under the flex builder installation directory. You can use WinRAR to open the file defaults.css. The ults.css file defines the default style of the Flex component. Each CSS selector corresponds to the class above. In practice, flexcompilers automatically generate the defaults.css file during compilation.
The following is the generated _ buttonstyle class: program code package
{

Import flash. display. Sprite;
Import MX. Core. iflexmodulefactory;
Import MX. Core. mx_internal;
Import MX. Styles. cssstyledeclaration;
Import MX. Styles. stylemanager;
Import MX. Skins. Halo. buttonskin;

[Excludeclass]

Public class _ buttonstyle
{

Public static function Init (FBS: iflexmodulefactory): void
{
VaR style: cssstyledeclaration = stylemanager. getstyledeclaration ("button ");

If (! Style)
{
Style = new cssstyledeclaration ();
Stylemanager. setstyledeclaration ("button", style, false );
}

If (style. defaultfactory = NULL)
{
Style. defaultfactory = function (): void
{
This. paddingTop = 2;
This. textAlign = "center ";
This. skin = mx. skins. halo. ButtonSkin;
This. paddingLeft = 10;
This. fontWeight = "bold ";
This. cornerRadius = 4;
This. paddingRight = 10;
This. verticalgap = 2;
This. horizontalgap = 2;
This. paddingbottom = 2;
};
}
}
}

} After reading the code, you will understand it. That is to say, after the init (FBS: iflexmodulefactory) methods of these classes are executed, we can use stylemanager. getstyledeclaration (selector: string): The cssstyledeclaration method obtains the style information defined in the defaluts.css file.

Note that if you add other topics during compilation, the style of the topic will overwrite the style in the defaluts.css file.
Assume that the program code button is defined in your topic.
{
Cornerradius: 8;
} In Your _ buttonstyle class, this. cornerradius = 8; instead of this. cornerradius = 4;
Of course, the new CSS selector you added to the topic will also generate the corresponding class during compilation. For example, you add program code. flashshe to the topic.
{
Color: # ff0000;
} The compiler will generate a program code during compilation.Package <br/> {</p> <p> import flash. display. sprite; <br/> import mx. core. IFlexModuleFactory; <br/> import mx. core. mx_internal; <br/> import mx. styles. CSSStyleDeclaration; <br/> import mx. styles. styleManager; </p> <p> [ExcludeClass] </p> <p> public class _ FlashsheStyle <br/>{</p> <p> public static function init (fbs: IFlexModuleFactory): void <br/>{< br/> var style: CSSStyleDeclaration = StyleManager. getStyleDeclar Ation (". flashshe"); </p> <p> if (! Style) <br/>{< br/> style = new CSSStyleDeclaration (); <br/> StyleManager. setStyleDeclaration (". flashshe ", style, false); <br/>}</p> <p> if (style. defaultFactory = null) <br/>{< br/> style. defaultFactory = function (): void <br/>{< br/> this. color = 0xff0000; <br/>}; <br/>}</p> <p >}< br/>Class. In the execution of main. mxml (assume that the main file of our flex project is main. mxml) Class constructor will call stylemanager. mx_internal: initprotochainroots (); method, stylemanager after execution. the stylesroot attribute points to an object. With this objectobject, we can refer to the style information defined by the global CSS selector in the defaults.css file. If your global CSS selector defines color: # 0b333c, then stylemanager. the value of stylesroot [color] Is 0x0b333c. (Note that these are the internal methods of the Flex framework, so you should not try to access them. In most cases, the compiler reports an error if you access them. Even if you can access them, do not do it)

When we call addchild (child) in flex, it contains the following steps: program code addingchild (child );
$ Addchildat (child, index );
Childadded (child); Let's see the next mxml file: program code <? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml"
Layout = "absolute" xmlns: NS1 = "*">

<Mx: style source = "one.css"/>
<Mx: style>
. Mybtn
{
Color: #00ff00;
Fontsize: 14;
}
</MX: style>
<! -- The mybutton component inherits from the button -->
<NS1: mybutton id = "testbtn" x = "27" Y = "200" color = "# 0000ff" stylename = "mybtn"/>

</MX: Application> program code/* one.css */

Button
{
Color: # ff0000;
}

Mybutton
{
Fontweight: 16;
} The process of generating a mybutton is as follows:
First, call addingchild (testbtn). In this method
1. Get a copy of the style defined in the global CSS selector (via stylemanager. stylesroot );
2. Search for the button CSS selector and add the style to the global copy. The style with the same name will be overwritten;
3. Search for the mybutton CSS selector and add the style to the global copy. The style with the same name will be overwritten;
After finding the type selector, start searching for the class selector.
4. search for the. mybtn CSS selector and add the style to the global copy. The style with the same name will be overwritten;
After finding the class selector, start searching for inline Style
4. Add the color = "# 0000ff" style to the global copy, and overwrite the style with the same name;

Finally, the style information is stored in the inheritingStyles and nonInheritingStyles attributes of UIComponent. In this way, call UIComponent. getStyle (styleProp: String): * to get the correct style value.

In this way, the Flex framework obtains the style information of the component during the component creation process, which facilitates the creation of the component in createChildren (), commitProperties (), layoutChrome (), measure (), updateDisplayList () method. Do not use the UIComponent. getStyle (styleProp: String): * method in the component constructor, because null is returned when you call the getStyle method. Style information is used to render components, so it is not necessary to use it in constructors.

When a component needs to reset its own style (for example, the setStyle () method is called or the styleName attribute is set), the component's styleChanged (styleProp: String) method is called, then, in the styleChanged (styleProp: String) method body, the style of the component is processed according to the value of the parameter styleProp. When will the component's styleChanged (styleProp: String) method be triggered? The following is an introduction:

1. setStyle () method
When we call the setStyle () method, we first call the styleChanged (styleProp) of the component and then determine whether the changed style can inherit the style. If yes, then, the styleChanged (styleProp) method of all descendants of the component is called. For example, the program code <mx: Canvas id = "myCanvas">
<Mx: Vbox id = "box" x = "0" y = "10" width = "200">
<Mx: Label id = "text1" text = "@ Resource (key = 'name', bundle = 'test')" color = "# ff0000"/>
<Mx: Label id = "text2" text = "@ Resource (key = 'age', bundle = 'test')" styleName = "ageLabel"/>
<Mx: Label id = "text3" text = "@ Resource (Key = 'sex', bundle = 'test')"/>
<Mx: Label id = "text4" text = "{ResourceManager. getstring ('test', 'sex')}"/>
</MX: vbox>
<Mx: button id = "mybtn" x = "27" Y = "100" label = "change" Click = "changehandler (event)"/>
</MX: canvas> when mycanvas. setstyle ("color", 0xff0000) is called, the style cache of this component is reset first ),
In this way, the value 0xff0000 can be obtained when mycanvas. getstyle ("color") is called. Then call mycanvas. stylechanged ("color"); because
Color is an inherited style, so it will call box. stylechanged ("color"), text1.stylechanged ("color"), text2.stylechanged ("color"), text3.stylechanged ("color"), text4.stylechanged ("color"), mybtn. stylechanged ("color ");
When we call mycanvas. when setstyle ("backgroundcolor", 0xff0000) is used, mycanvas is called first. stylechanged ("backgroundcolor") Because backgroundcolor is not an inherited style, the stylechanged (styleprop) method of mycanvas is not called.

2. When addchild (chlid)
When addchild (chlid) is used, the style cache for this component and its descendants is reset, and then chlid is called. stylechanged (null) and chlid descendant's stylechanged (null) method.

3. Set stylename
When we set the stylename attribute for a component (for example, the Instance name is child), we first reset the style cache for the component and its descendant, and then call chlid. stylechanged ("stylename") and chlid descendant's stylechanged ("stylename") method.

4. Load the style form at runtime
We usually use stylemanager to load style forms during runtime. loadstyledeclarations (URL: String, update: Boolean = true, trustcontent: Boolean = false, applicationdomain: applicationdomain = NULL, securitydomain: securitydomain = NULL) method. When the parameter update is set to true, the style is updated immediately after the style form is loaded. The principle is: after the style form is loaded, all components in the program will reset the style cache of the component and call the stylechanged (null) method of the component.

When we create an ActionScript custom component that supports custom styles, we must have one

Program code override public function styleChanged (styleProp: String): void
{
// Method body
} Method. Why? If this method is not used, how can you detect changes to your style?
Through my analysis above, I believe that you will be able to design a component that is well adapted to the Flex framework and supports custom styles. For more information about "Custom Components support Custom styles", refer to the "ActionScript Custom Components/Custom Style Properties" section in the Flex help document.

The following is the definition of the styleChanged (styleProp: String): void method in the UIComponent component. It has nothing to do with this article, but it is easy for me to check and put it here. Program code/** <Br/> * detects changes to style properties. when any style property is set, <br/> * flex callthe <code> stylechanged () </code> method, <br/> * passing to it the name of the style being set. <br/> * <p> This is an advanced method that you might override <br/> * when creating a subclass of uicomponent. when you create a custom component, <br/> * You can override the <code> stylechanged () </ Code> method <br/> * to check the style name passed to it, and handle the change accordingly. <br/> * This lets you override the default behavior of an existing style, <br/> * or add your own custom style properties. </P> <br/> * <p> If you handle the style property, your override of <br/> * The <code> stylechanged () </code> method shocould call the <br/> * <code> invalidatedisplaylist () </code> m Ethod to cause flex to execute <br/> * the component's <code> updatedisplaylist () </code> method at the next screen update. </P> <br/> * @ Param styleprop The Name Of The style property, or null if all styles for this <br/> * component have changed. <br/> */<br/> Public Function stylechanged (styleprop: string): void <br/>{< br/> // If font changed, then invalidateproperties so <br/> // we can Re-create the text field in commitproperties <br/> If (this is ifontcontextcomponent & hasfontcontextchanged () <br/> invalidateproperties (); </P> <p> // check to see if this is one of the style properties <br/> // that is known to affect layout. </P> <p> If (! Styleprop | <br/> styleprop = "stylename" | <br/> stylemanager. issizeinvalidatingstyle (styleprop) <br/>{< br/> // This style property change may affect the layout of this <br/> // object. signal the layoutmanager to re-measure the object. <br/> invalidatesize (); <br/>}</P> <p> If (! Styleprop | <br/> styleprop = "stylename" | <br/> styleprop = "themecolor") <br/> {<br/> initthemecolor (); <br/>}</P> <p> invalidatedisplaylist (); </P> <p> If (parent is iinvalidating) <br/>{< br/> If (stylemanager. isparentsizeinvalidatingstyle (styleprop) <br/> iinvalidating (parent ). invalidatesize (); </P> <p> If (stylemanager. isparentdisplaylistinvalidatingstyle (styleprop) <br/> iinvalidating (parent ). invalidatedisplaylist (); <br/>}< br/>