Page History

...

You may be able to create layouts which can be cross-compiled from ActionScript to JavaScript, but you may get better performance if you write native JavaScript layouts.

Composition

Layouts work within Containers. A Container with the container classes (Group, View, Container, DataContainer, List, and the chart classes).  A container has an area called the "contentView" where the items go that are being laid out. The contentView is different depending on the platform (HTML, Flash) and type of container. For Group, the contentView is always itself while for Container, the contentView is specific to the platform. On the HTML platform, the contentView is almost always the same as the component since DIV can do much of the work. On the Flash platform, the contentView managed by a Viewport which is responsible for the size and position of the contentView. If a Container is being scrolled, a ScrollableViewport is used instead of the plain Viewport; in the browser/HTML, scrolling is done by the DIV simply by adding "overflow:auto" to its style sheet.

Sizing

As mentioned above, Containers containers may be sized explicitly or by their content. This can happen in either or both dimensions (for example, a Container container that specifies a width and not a height). When a Container container is being sized by its content, the layout is used to determine the Containercontainer's size by calculating a bounding box that surrounds the children once the layout has been run. 

Some layouts need to know the amount of space they have to work with. The contentView can provide that through its width and height properties. When a Container container is being sized by its content, the layout may not get valid width and/or height values from the contentView. In this case, the layout must assume the Container container is infinitely wide or tall or the layout can make some assumptions and impose its own constraints.

Layouts such as VerticalLayout and HorizontalLayout do not depend on the Container container having a size. These layouts simply follow an algorithm and position the children which makes them ideal candidates for Containers containers whose size must be determined by the content.

...

It is the responsibility of the layout to handle offsets introduced by padding and margin styles. Again, the JavaScript layout should probably default to letting HTML handle thisOn the HTML platform, the DIV (along with CSS) handles padding, margins, and borders. The SWF implementation of a layout has to account for these things and handle them appropriately.

If you look at the ActionScript version of VerticalLayout, you'll see how padding and margin values are obtained from the components and used to calculate the placement of the items in the layout. Your layout may need to do the same thing if it is to respect padding and margin when your application is run from Flash.

Custom Container Views

Using a Container container as a base for a new component is often a good idea if you want to take advantage of layouts. In FlexJS, the majority of the work of a component is handled by its view bead. For Containers, this is the ContainerView bead (for Group it is the GroupView bead. When creating components based on Container, you will most likely need to extend ContainerView. 

Use PanelView as a guide to building your own custom ContainerView.

If your component contains other elements which are not be affected by the layout, you may need to override some methods to adjust the placement of the contentView to allow room for your additional pieces. In FlexJS, these additional pieces are referred to as "chrome" and must implement the IChrome interface which merely declares them to be a chrome element. When chrome elements are added to a Container, they become children of the Container itself and not the content view.

These are the general steps for extending ContainerView and overriding some functions.

1. Create your custom view by extending org.apache.flex.html.beads.ContainerView.
2. Override the strand setter function if you need to keep a reference to the strand.
3. Override getChromeMetrics to return a org.apache.flex.geom.Rectangle that accounts for the additional chrome pieces you are adding.
4. Override layoutViewAfterContainerLayout to size and position your chrome pieces and then call the super function.

Custom Content

). Unless your component will need special handling for scrolling, it is recommended you extend Group and GroupView for your view bead. Use a layout to arrange the sub-elements of your component. If you need to, write a custom layout to handle special cases such as elements that should not be included in the layout ("chrome" elements).

Your custom view bead may also need to override some protected functions which are called during the layout process:

• beforeLayout() is called just prior to the layout running. You can use this function to eliminate elements from the layout process by setting their visible property to false (you can reset them later). 
• afterLayout() is called after the layout has run and sized and positioned the elements. Make sure you call super.afterLayout() so the container can be sized by its content if it does not have a fixed size. This is especially important if you are extending ContainerView as this is where the scrolling viewport is set on the SWF platform

Custom Content

On the Flash platform, the The Container class uses a simple component, ContainerContentArea, for the contentView, to hold the elements to be displayed and arranged by the layout. The FlexJS framework automatically adds any elements specified in MXML to the contentView. If your component needs to generate, or programmatically fill, the content of a container, you may want to consider creating a custom contentView.

...