Shulou(Shulou.com)06/02 Report--

This article mainly shows you "why to rewrite Flex components", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "Why to rewrite Flex components" this article.

Override Flex components

1. Why rewrite Flex components

1. When the existing Flex components of Flex cannot meet the business needs, or when you need to change its visual appearance and other features, inherit and expand directly. For example, a custom control that inherits long text from a BUTTONFlex component but does not automatically wrap.

2. In order to modularize the design or further reuse, Flex components need to be combined. For example, a composite control that includes TEXTAREA,BUTTON.

Second, rewriting Flex components requires three roles that are always considerate of others.

1. What are the requirements as a user of rewriting Flex components. For example, which attributes need to be exposed in MXML tags and AS code and the handling logic corresponding to defaults, events, and events.

2. To rewrite Flex components, you generally need to use the original Flex components of Flex. You should understand the design rules from the point of view of the original developers.

3. As the designer of rewriting Flex components, we should try our best to achieve the design principles of reusability, low coupling and easy expansion when meeting the requirements, so that the new Flex components are as easy to use as the original Flex Flex components.

Third, rewrite the adoption rules of AS mode and MXML mode of Flex components

1. Both MXML files and AS files will be compiled into AS classes, but the compilation speed of MXML is a little slower.

2. If both MXML and AS can complete a simple Flex component, MXML is easier to create and control the layout

3. When overriding some methods of Flex components, you can only use AS.

4. You can only use AS to create a subclass that directly inherits UIComponent.

5. Create non-visual Flex components such as Formatter, validator, Effect... You can only use AS

6. When you want to add logging function to the Flex component, you can only use AS.

IV. General steps of rewriting Flex components in AS mode

1. If necessary, create all tag-based-based skins (skins) for Flex components

2. Create an ActionScript class file

1) extend from a base class, such as UIComponent or other Flex component classes

2) specify the attributes that the user can set through the MXML tag

3) embed (Embed) all pictures and skin files, and the file size is as small as possible

4) implement a constructor that can set default values for properties and styles, or initialize data structures, such as arrays

5) determine whether to override the following five methods as needed:

(a) the UIComponent.createChildren () method, which creates a child Flex component of the Flex component

(B) the UIComponent.commitProperties () method, which commits all property changes to the Flex component, and sets the property values that the measure () method might use. In most cases, this method is used for properties that affect how Flex components are displayed on the screen

(C) the UIComponent.measure () method, which sets the default size of the Flex component (measuredWidth, measuredHeight) and the default minimum size (measuredMinWidth, measuredMinHeight)

(d) the UIComponent.layoutChrome () method, which defines the border area of the container, determines the location of the border area, and determines the additional elements to display in the border area. For example, the Panel container uses the layoutChrome () method to define the title area of the panel container, which is used to contain title text and close buttons.

Typically, the RectangularBorder class is used to define the border of the container area, rather than using image resources to surround the Flex component. For example, create a RectangularBorder object, then in the overloaded createChildren () method, add it to the Flex component as a content child control, and then use the updateDisplayList () method to determine its location.

The main reason to separate the container content area from the container border area is to deal with Container.autoLayout

Property is set to false. When the autoLayout (automatic layout) property uses the default value of true, the container and child controls are measured and laid out whenever the size and location of the container child controls change. When it is false, measurement and layout are performed only when child controls are added or removed from the container. Separate processing causes Flex to perform layoutChrome () in both cases, so that the container can still update its border area even if the autoLayout property is false.

(e) the UIComponent.updateDisplayList () method determines the on-screen size (size) and position (position) of the child Flex components of the Flex component according to the previously set properties and styles, and draws all the skins (skins) and graphical elements used by the Flex component. The parent container of the Flex component is responsible for determining the size of the Flex component itself (size).

To determine the size of a Flex component in the updateDisplayList () method, use the setActualSize () method when the child Flex component is UICOMPONENT, instead of UICOMPONENT, use the properties width and height related to the size of the Flex component. To determine the location of the Flex component, use the move () method when the child Flex component is UICOMPONENT, instead of UICOMPONENT, use the x and y properties. One difference is that the move () method not only changes the location of the Flex component, but also distributes a move event immediately after the method is called, and setting the x and y properties also changes the location of the Flex component, but the move event is not distributed until the next screen update event.

Flex components support many types of visual elements, such as skins, styles, and borders. In the updateDisplayList () method, you can add these visual elements and exercise some control over them. Because UICOMPONENT inherits from SPRITE, you can use the Flash painting APIs in the Graphics object to draw graphics, such as the Graphics class to draw border horizontal lines and other graphic elements:

Graphics.lineStyle (1pr 0x000000jr 1.0); graphics.drawRect (0pr 0rec unscaledWidthreunscaledHeight)

The updateDisplayList () method looks like this:

ProtectedfunctionupdateDisplayList (unscaledWidth:Number,unscaledHeight:Number): void () {}

In the Flex component coordinate system in pixels, unscaledWidth and unscaledHeight are the size of the Flex component determined by the parent container, regardless of the scaleX,scaleY of the Flex component. Scaling occurs in FlashPlayer or AIR, and occurs after the execution of updateDisplayList (). For example, if the unscaledHeight property of a Flex component is 100 and its scaleY property is 2.0, the height of its appearance in FlashPlayer or AIR is 200 pixels.

It is important to note that it is not necessary to overload all five methods when defining a new Flex component, just what is necessary to implement the functionality of the Flex component. For example, implement a custom Button control that uses a new mechanism to define the default size (size). In this case, you only need to overload the measure () method. Or, you want to implement a new subclass of the VBox container. The new subclass uses all the existing sizing logic of the VBox class, but changes the layout logic of the VBox class to lay out the child controls in the container from the bottom to the top, rather than the top-down layout. In this case, you only need to overload the updateDisplayList () method.

(6) add properties (properties), method (methods), style (styles), event (events) and metadata

3. Deploy Flex components in the form of ActionScript files or SWC files

The above is all the content of the article "Why rewrite Flex components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.