In continuation with the tutorial (001 - 002 - 003 - 004 - 005 - 006)

4. Display List

The list display, once again translated the lyrics can be understood as list of presentation, was a major innovation in the flash / flex with the AS3, and that now many had trouble adjusting to many designers / developers accustomed to the previous version. In previous versions of AS, all the visual elements were processed and presented separately in the final swf which required a great knowledge of programmers and foremost much code to deal with this visual presentation of evidence and the methods to create, delete and add objects which resulted in a strict control of these objects and the garbage collector was unable to control.

The AS3 has brought a new way of dealing with these objects and their presentation, the display list. Logically this display list can be understood as a list of visual elements of swf which may include the most common objects such as buttons and movieclips, but also shapes, graphics, panels and many others that did not exist in previous versions or that could not be established " programmatically. "

In short, the display is virtually the list that contains and regulates the production of all our visual elements at the "creation" / presentation of. Swf final.

4.1. Understanding the display list.

To understand what we see, we have evidence and logic of what is spoken, and as I said above, the display is the list that manages all of our graphics. Swf, speaking in the case of flex, I try to do a Draft of what we do as a visual diagram of the display list. Suppose that we have to flex:

- Bottom of the application.

- 1 panel (Painel1)

- 1 titleWindow (Win1)

- 1 button (button1)

- 1 picture inside the panel 1 (Img1)

- 1 button in the panel 1 (Botao2)

- 1 ProgressBar within the titleWindow (ProgressBar)

The layout of the display list is as follows:

This is an example of a simple application, so the display list is organized with various objects, those listed as "display Object Container" are objects that support other objects within them as children ( "children's"), and listed as "object display" does not support "natively" children / "Childs" within himself. (there are some displayObject, as the case with the flex of ModuleLoader or swfLoader display Objects that are, but that support children within himself).

As you can see with this scheme, it can easily realize the benefits of displayList, which is the image we see some points:

- The stage is the main stage, we can understand how the Article containing all the others, and that is the Father ( "root / root")

- The main application, which contains the information panel 1, win 1, 1 button as its child'se taking the stage as his father (parent)

- In turn, the child's primary application of the (panel 1 and win1) also contain child's parent as taking the main Application.

- Finally there are the objects (botão2 and Img1) as Childs Panel 1 and the subject ProgressBar child as the subject Win1.

This may seem a little complicated, but can with a simple function we understand this hierarchy of objects:

Will then be presented in the panel of the objects and debug your Childs (if any).

In this light we have some new parameters:

. numChildren; shows the number of the child's subject.

. getChildAt (i) Find the name of the child in the proper position of displayList;

DisplayObjectContainer; Compares if the object is a displayContainer, where, list their children too, calling the function again.

4.2. Added an object to display List. addChild ();

In flex, while dragging them to me for a component within a panel or for our area (background / Application), in fact even seeing the code generated MXML, we do not see any reference to addChild, for the simple reason; The MXML is a language XML style that serves only to organize the code of a simple and logical way, but in reality this MXML is completely transformed into AS3 at the time of compilation of your project, and to take the sure know that there is nothing in that MXML we can not do in AS3, see the example:

In action script 3 in flex it would be something like:

If you notice them to me a few things we have to do, and the number of lines is almost the same. Look carefully on the properties and methods that outlined in the code, I think the only thing new is the property. Id that sets the id of the panel, and imports at the top, importing objects and ComboBox Panel so that they can be used. We can also see the methods addChild in action, adding in the first ComboBox (combo) as a child of the panel and then adding the panel to the main stage.

The addChild is a method available in many of the graphic elements on the flex, so this example can be applied to many objects that has the main objective add to display list or another element (display object container) of the display list.

Where to add to the display list, simply use:

where the object can be virtually any component / displayObject of flex / flash

And to add to another object already son / child of the display list:

where the displayObjectContainer is the subject to which the child will be added in the case above, we use the panel as a display object container, and the combo as Subject (Display Object).

We can also add a display object container (panel for example) to another display object container (TitleWindow):

They should take particular attention display this list because it is a fundamental part in the action script 3, which is poorly understood and can bring many "difficulties" especially in time to organize the items added to swf.

For now everything is any doubt say ... ..

In the next part of how we identify and remove Childs of the display list or other objects within the display list.

Hug.

http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt