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

Editor to share with you how to use AS to rewrite Flex components, I hope you will learn something after reading this article, let's discuss it together!

General steps for 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 why ◆ separates 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.

The ◆ Flex component supports 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

After reading this article, I believe you have a certain understanding of "how to rewrite Flex components using AS". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.