chapter 13 Introducing Containers

【container】
Adobe?Flex?provides a wide variety of containers,ranging from simple boxes through panels and forms, to elements such as accordions or tabbed navigators that provide built-in navigation among child containers.

At the root of a Flex application is a single container, called the Application container

Flex defines layout rules to simplify the design and implementation of rich Internet applications, while also providing enough flexibility to let you create a diverse set of applications.

【container layout rule】
Containers have predefined navigation and layout rules, so you do not have to spend time defining these

Different containers support different layout rules:
1） All containers, except the 'Canvas' container, support 'automatic' layout.
2） The Canvas container, and optionally the Application and Panel containers, use absolute layout....Alternatively, you can use constraint-based layout to anchor the sides, baseline, or center of the children relative to the parent

【About layout containers and navigator containers】
Flex defines two types of containers:
Layout containers： Control the sizing and positioning of the child controls and child containers defined within them。
Navigator containers： Control user movement, or navigation, among multiple child containers。

【Using containers】
padding：top，left，right，bottom
gap：horizontal，vertical

Navigator container：Tab ，Accordion

【Flex container】
Navigator：Accodion，Tab，ViewStack
Layout：ApplicationControlbar,Box(H,V)，Canvas，ControlBar,DividedBox(H,V),
        Form,Grid,Panel,Tile,TitleWindow

【class hierarchy for containers】
Sprite<--UICompent<---Container<--all Containers

<mx:Panel layout="vertical/horizontal"/> 可以设置layout属性

【Using container events】
overview:
childAdd,childRemove ,childIndexChange,scroll,error,add,remove,
applicationComplete:Dispatched after the application has been initialized, processed by the LayoutManager,
                    and attached to the display list. This is the last event dispatched during an application’s startup sequence. It is later than the application’sc creationComplete event.
preinitialize:Dispatched when the component has been attached to its parent container, but before the component has been initialized, or any of its children have been created
initialize:Dispatched when a component has finished its construction and its initialization properties have been set. At this point, all of the component’s immediate children            have been created (they have at least dispatched their preinitialize event), but they have not been laid out. Exactly when initialize events are dispatched depends            on the container’s creation policy
createComplete:Dispatched when the component, and all of its child components, and all of their children, and so on have been created, laid out, and are visible

【About the creation policy】
ContainerCreationPolicy.AUTO:means that the container creates its direct children immediately, but waits to create the descendants
                        of each child until the child needs to be displayed.As a result, only the initially required child or children of a container get processed past the preinitialization stage
ContainerCreationPolicy.ALL:requires all of a container’s children to be fully created and initialized before the container is initialized

【About the initialize and creationComplete events 】P441

【Disabling containers】
property enabled=false,Flex dims the color of the container and of all of its children, and blocks user input to the container and to all of its children

Panel layout container P521
ControlBar layout container P490

【Defining a default button】
You use the defaultButton property of a container to define a default Button control within a container. Pressing
the Enter key while focus is on any control activates the Button control as if it was explicitly selected.

【Using scroll bars】 P445-448 尚未阅读

【Using Flex coordinates 使用flex的坐标 】  P448-453 尚未阅读
flex support three coordinate systems for different purpose:
global:relative to the upper-left corner of the Stage in Adobe Flash Player
local:relative to the upper-left corner of the component
content :relative to the upper-left corner of the component’s content
更详细的说明请参考P449

【Creating and managing component instances at run time】
你可能只会用MXML去做应用程序与用户的接口部分，然后用AS在程序运行时控制事务。你还可以用AS在运行时创建组件对象。

运行时访问组件的几个重要方法和属性：
You can access and modify a container’s child components at run time by using the addChild(), addChildAt(),getChildren(), getChildAt(), getChildByName(), removeAllChildren(), removeChild(), and removeChildAt()

To get the number of direct child components in a container, get the value of the container’s 'numChildren' property

The 'numChildren' property and 'getChildAt()' method let you count and access only child components

The container’s 'rawChildren' property lets you access all children of a container, including the component “content children” and the skin and style “display children.”

【Creating and removing components at run time】

addChild(child:DisplayObject):DisplayObject 注意：虽然参数明确指定child的DisplayObject，但child必须同时实现IUIComponent接口
removeChild(child:DisplayObject)

Example: Creating and removing children of an Accordion container P458

【Controlling child order】
addChildAt()
setChildIndex()