Introduction to Layouts

What is Spark

Flex 4 brought around a lot of changes, one of the most prominent was the introduction of the Spark components and the Spark architecture. The Spark components are built on top of the Halo components (mx.core.UIComponent) from Flex 3, so share many characteristics such as being controlled by the LayoutManager and sharing the same lifecycle.

Obviously there have also been a number of changes too, these were mainly brought about by the introduction of Flash Catalyst, aimed at improving the workflow between developers and designers. This is achieved by the separation of a component’s visual elements from it’s logic, allowing a designer to work on one part and the developer the other, with minimal integration or coupling. This is known as the Spark architecture summarised in this diagram.

Spark

The main new features in Spark are the following:

  • Effects – New animation engine in-light of Flash Player 10
  • Layout – Our main focus
  • FXG and MXML Graphics – XML based graphics influenced by SVG

What is a Spark Layout

In Flex 3 and the Halo component set, the layout of a component’s children was coupled with and a responsibility of the component it’s self. With the Spark architecture this is separated from the container, so that when the LayoutManager calls the measure() or updateDisplayList() methods they are delegated to the layout instance.

In simpler terms this means a component or skin aren’t responsible for how it’s children are positioned or laid out. Instead this is done by another class, who is just concerned with just the layout. This has lead to the following changes:

Assignable layouts

As the layout is delegated to another class, it can be changed very easily and even at runtime. This means that you can have one List and update the layout between say vertical and tiled. Pre Spark you would have had to have a List and a TileList swapped out in states. This means we now have a lot less code and less memory usage.

Easy to create custom layouts

With all the code for layout separate from the container it is very easy to create your own custom layouts. You can easily create a layout based the LayoutBase class and ILayoutElement interface without necessarily needing to know what container is going to use it.

2D and 3D support and post-layout transforms

The ILayoutElement interface makes it easy to add 2D and 3D transforms to layout elements. It is also possible to manage the depth of items, rather than the depth being managed by the order they appear in the MXML, this is often essential for 3D layouts. These can also be post-layout transforms, meaning that you can transform an element without affecting the layout. For example if you wanted an element to move around to attract the users attention, you could do so without all the other elements in the layout moving too.

Easy Scrolling

Scrolling and scrollbars have also been decoupled in Spark and are now contained in the Scroller class. This means you don’t need to worry about clipping and scrolling in your layout (unless you want to). The scroller will manage what parts of your layout are clipped and provide horizontal and vertical scrollbars as needed. This is calculated depending on the height and width you assign your layout in it’s measure() method.

Using Layouts

Layouts in Spark are used by groups, or classes that extend the GroupBase class. The layout is assigned to the group and is then used for layout when the measure() and updateDisplayList() methods are called by the layout manager. Layouts are also used by containers, which are essentially components that contain a group as their main child, such as a Panel, SkinnableContainer or Window etc. When skinning a container you will notice a required part called  contentGroup . This contentGroup needs to be a group, and is where the layout assigned to the component is used. It is also where any child elements are added.

This diagram shows how a layout is related to a container. It’s essentially a property of a container, which by default is a BasicLayout. The BasicLayout is the same as an AbsoluteLayout in the Halo component set.

My Diagram 9.png

If you want a different layout to the default BasicLayout you will need to assign it to the container. There are a few ways to assign a layout in Flex 4:

In actionScript you can assign a layout like so:

var myGroup:Group = new Group();
myGroup.layout = new VerticalLayout();

In MXML there are a few more ways. Firstly you can add the layout as a child of the Group node:


<s:Group>
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	<!-- Vertical layout -->
</s:Group>

You can also assign a layout using the layout property of the group node, this makes data binding easy:

	<s:Group layout="{new VerticalLayout()}">
		<!-- Vertical layout -->
	</s:Group>

In order to save you even more time, you can also use some connivence tags for groups with a Horizontal and Vertical layout:

<s:VGroup>
<!-- Vertical layout -->
</s:VGroup>
 
<s:HGroup>
<!-- Horizontal layout -->
</s:HGroup>

Demo

Here is a simple demo showing some images inside a group. The group’s layout can be dynamically changed by clicking on the buttons at the top. The group is also in a scroller and I have shown the various different ways you can set the layout in MXML, right click and view source to see for yourself.

You can download the example code here.

Further Reading

There are lots of useful resources on the web with great info on Spark and Layouts. In part 2 we will look at creating a basic custom layout.

Differences between Flex 3 and 4

A brief overview of the Spark architecture and component set

Introduction to skinning in Flex 4

Spark Layouts with Flex 4

Scrolling and Viewports in Flex 4

When to use what container

Flex containers, tips and references

Flex layouts

Part two

In part two we look into creating a simple layout. Read part two here.

This entry was posted on Monday, November 15th, 2010 at 1:37 pm and is filed under ActionScript, AIR, Development, Flex. You can leave a comment and follow any responses to this entry through the RSS 2.0 feed.

2 Comments Leave a comment

  1. [...] This is part two of a look into custom layouts in Flex 4. Be sure to read part 1 first. [...]

  2. [...] is part three of a look into custom layouts in Flex 4. Be sure to read part 1 and part 2 [...]

Leave a Reply