THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
The class inheritance diagram (Figure 1) shows how the classes are related. In the FlexJS fashion, there are corresponding view beads. The view beads take are managing the actual on-screen aspects of the component.
...
Layout beads monitor the container for changes: additions, deletions, and changes to the size of the children. It is incumbent on each layout to respond to these event events in whatever way is appropriate.
Layout beads are used with every container class. This means you can make a horizontal list or vertical list or lay out the contents of a list in rows and columns. You do not need to change the list or the data at all.
Figure 1: FlexJS Container Classes
Life Cycle
When a component/strand is added to the display list, the following sequence of events happen. Keep in mind that children of the container will also go through this same process.
- After attaching the component’s core (platform-specific) element to the display list, the FlexJS framework calls the component’s addedToParent() function.
- The addedToParent() function looks at the list of <js:beads>, if any, and added adds them to its bead strand. This act trigger’s each bead’s strand setter function.
- Once all of the <js:beads> have been added, addedToParent() looks to see if a model bead is now on the strand. If it is not, the CSS style for the component is found and if a model bead class is specified, an instance of the model is created and added to the strand.
- The same is done for the view and controller beads.
- Finally, addedToParent() dispatches a “beadsAdded” event.
When “beadsAdded” has been sent, any listener can be assured that all of the <js:beads> have been added as well as the standard beads (model, view, controller) if the component has specified them.
Doing the bead sequence in this order allows beads to be placed in <js:beads> that will override the standard beads. For example, if you specify a different model bead, when addedToParent() gets to the step where it would add the default model bead from CSS, it will see that a model is already present and skip adding the default model bead.
The container classes, View, Group, and Container, override addedToParent() and do a few more steps:
- After calling super.addedToParent() - which will dispatch “beadsAdded” - the container components prepare for the addition of MXML children that may be specified inline.
- This causes those children to be added to the display list (the sequence above is then repeated for each of those children). When all of the MXML children have been added , a “childrenAdded” event is dispatched.
- Finally, “initComplete” is dispatched.
...
The nesting of these parts was actually created to accommodate the Flash Player and used as a way to mimic the abilities of the browser and HTML DOM: scrolling and clipping. The current version of FlexJS does away with the nesting structure for the HTML platform and uses it with more care on the Flash platform.
...
At this time only container beads (and a few others) dispatch “initComplete”. It is recommended that if your custom component overrides addedToParent() and added more beads or does something that will affect how other beads behave, addedToParent() should dispatch a final event, such as “initComplete”.
...
The component’s view bead also plays a role in the layout process. Generally, the view bead implements ILayoutHost since it knows which of the visual children of a component is the content area. As part of the ILayoutHost protocol, view beads are required to implement a beforeLayout() function and an afterLayout() function. These functions are called by the layout bead to give the view bead an opportunity to prepare for layout and to deal with the result of the layout.
...
Container classes in FlexJS attempt to give preference to the HTML platform and defer to that as much as possible by generating as simple a DOM structure as can be done to build possible that represents the application.
Some classes, such as Container, are present mainly for the benefit of the Flash platform. You can easily add styles to a DIV (generated by the Group class) that will make it scroll, but if your application runs on all platforms, then you need to use Container in order to have scrolling on the Flash platform as well.
The layout beads provide the structure to the component by arranging and sizing its children. FlexJS lets to swap layout beads to change the look and feel of a component without having to change any other aspect of the component’s function.