As a component platform Reflex is built on a foundation of core libraries and utilities. Because of the unique culture of the project most of these solutions are independently useful to the Flash developer. Its layout engine is one of Reflex’s profitable solutions and can structure the visual flow of any member of ActionScript’s display list.
The following demo illustrates one of the default layout algorithms in Reflex, named Dock (notice the minimal use of containers used to achieve the structure). Click and drag to resize:
Layout Laid Out
Maybe one of the first things you noticed while playing with the demo is that container’s just can’t get smaller than their children. This and other more subtle behaviors make up the physics of layout, the rules that Reflex embodies and simplifies in just 3 core classes:
ILayoutAlgorithm and the
Layout object wraps any DisplayObject in Flash and provides most of the properties for a given layout system, such as minimum and maximum widths and heights. The demo above is made up of Flash-designed MovieClips and Sprites, no special base container class, creating
Block layout’s that point to each.
Layout and is the default layout system for components, providing various width/height features, margins, padding and other common properties for dividing the screen into rectangular sections. Other
ILayout implementations may be created to easily support different layout systems, such as 3D.
One of the most important members of any
Layout object is the algorithm. With each layout system comes a variety of supporting layout algorithms, defining the rules by which a specific container lays out its children. Through the
Block-based layout system, the example above takes advantage of the specific algorithm
Dock. This algorithm aligns children of a container to the LEFT, TOP, RIGHT, BOTTOM or FILL based on their dock and tile properties and allows a mixed layout within a single container. Other algorithms position and size children DisplayObject’s uniformly, such as in a stack or a row.
Normally laying out a screen can be complicated because children affect the size of their container and containers determine the position and size their children. The driving force in Reflex’s layout engine is, by itself, a stand alone utility ideal for managing the “layout cycle”.
RenderEvent isn’t very complicated but it simplifies the layout process and greatly increases performance. This is made possible in 3 ways:
- delaying layout computation to just before each screen redraw consolidates all of the property changes that affect both children and container
- dividing layout into two phases, where the measure phase allows a container to calculate its minimum (and maximum) size based on its contents, and the layout phase runs the algorithm that finally place those contents
- allowing each phase to run in order from the lowest to the highest depth in the display list ancestry (in the case of measure) or from the highest to the lowest depth (in the case of layout). For example, Flash’s stage and root would measure last, and layout first, then the children of root will layout, then their first-level children and so on. The reason for this feature is a little more involved but it makes a huge difference in performance
Fortunately it’s very easy to customize display list layout by creating new layout algorithms. There are only two methods required, the measure() and the layout() methods, and these are automatically invoked precisely when they need to be. Robert Taylor got involved in the code and within an afternoon had built several of his own layout algorithms, complete with custom behaviors and tweening. Reflex as a platform offers a variety of components and solutions, but if layout is where your interests lie you can contribute without using or understanding anything else in the framework. Perhaps the best part is, because it works with any kind of DisplayObject, Reflex’s layout engine can be used in Flex, Flash or most any other ActionScript 3 environment. It’s universal!