Tutorials, Videos

Flex 4 and custom layouts

17 Comments 16 May 2010

Flex 4 introduces a new component and skinning architecture named “Spark”. Thanks to Flash Catalyst, you can skin Flex 4 components in one minute and you’ll find a lot of examples over the web. Flex 4 also introduce the new Spark layout architecture. Today, Flex developers can extend the LayoutBase AS3 class, and define how the elements of a container should be placed on the stage.

Thanks to Spark, the layout logic is separate from the containers so that you can assign at run time a Spark layout to a container. Your code will be more modular and reusable. 2D and 3D transformations are supported.You can also expose public properties in your layout class to transform the arrangement of your elements on the fly (impacting the X,Y,Z coordinates, the rotation or the scale properties of the elements for instance).

By default, four Spark layouts are available:

  • BasicLayout, equivalent to the Flex 3 canvas container.
  • HorizontalLayout, equivalent to the Flex HBox container.
  • VerticalLayout replaces the Flex 3 VBox.
  • TileLayout is more like the Flex3 Tile, List or TileList containers.

If you wish to create your own layout, start by creating a new AS3 class. This class should extend the LayoutBase class, and you just have to override the updateDisplayList method. This is the minimal requirement to create a custom layout. Within this method, you can loop on the elements of the container to place them using 2D or 3D transformations. In this very simple example, I’m placing the elements following a sine curve:

import mx.core.ILayoutElement;
import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;
public class myVeryBasicLayout extends LayoutBase
public function myVeryBasicLayout(){
override public function updateDisplayList(w:Number, h:Number):void{
super.updateDisplayList(w, h);
var layoutElement:ILayoutElement;
var count:uint = target.numElements;
for (var i:int = 0; i < count; i++)
var layoutElement : ILayoutElement =
useVirtualLayout ? target.getVirtualElementAt( i ) :
target.getElementAt( i );
var _x : Number = 50 * i;
var _y : Number = 100 + -100 * Math.sin(i);
layoutElement.setLayoutBoundsPosition(  _x, _y );

Then in your main code, you can use your custom layout with a Spark container. To specify your container, use the new s:Layout tag.

<s:List id="myGroup" itemRenderer="myItemRenderer">

Here is a detailed article that describes what you can do with custom layouts: 

I also love the work of the talented "Xavi" and who developed advanced Flex 4 layouts such as this one: http://www.rialvalue.com/blog/2010/04/14/carroflow-another-3d-layout-for-flex4/

Recently, I had to opportunity to record a video that introduces this new architecture:

Post to Twitter

Your Comments

17 Comments so far

  1. Palleas says:

    That’s really, really nice and you make it sounds so simple :)

    Thanks !

  2. Joe Web says:

    Hi Michaël, I have recently watched your video at Adobe. That’s amazing. I’m wondering if you can post the code of the coverflow sample as well. Anyway, thx a lot!!

  3. Garral says:

    Bravo pour ce magnifique blog qui m’a déjà fait découvrir pas mal d’astuces pour encore mieux “coder des moutons” :)

    Great thanks !

  4. why says:

    i love your accent <3

  5. admin says:

    lol. Thank you. I don’t want to lose my French touch :)

  6. Salman Awan says:

    Hey, great tutorial, simple and to the point. a lot of pointers to play with, thanks.

  7. sukesh salian says:

    very nice… loved ur tutorial…. im a student…i have been assigned to do a college website for our college…any suggestions for a college website from your side???
    keep up the good work..
    All the best :)

  8. Manohar says:

    Hi I am really impressed of your suggestion on Mobile Development.

    How we can show Message Alerts in Flex Mobile Application.

  9. admin says:

    @Manohar You can use a Spark Pop Up Window. It’s a new component introduced in Flex 4.5. I don’t really remember its name but it has a modal mode. Maybe SkinnablePopup… something like this

  10. Vaibhav says:

    Hi i am really impressed with this custom effect But i have problem when i am changing the rotate left in Flex simulator layout for list component not changing to and taking rotation values etc from CoverflowLayout.as. Please help me for this.

  11. Vaibhav says:

    Hi, i am really impressed with this custom effect But i have problem when i am changing the rotate left in Flex simulator layout for list component not changing to vertical layout or initial layout and taking rotation values etc from CoverflowLayout Please help me for this.

  12. Mike says:

    Hi this is a great article.

    Can you share the mobile source code please?

    Thank you


  1. Tips for Flex mobile apps | RIAgora - December 16, 2010

    […] a big fan of Flex 4 custom layouts. You can check my article about custom layouts here: http://www.riagora.com/2010/05/flex-4-and-custom-layouts/ By default, the mobile List component will use the VerticalLayout class. Depending on what you […]

  2. Flex 4 Layout « ksk studio - February 25, 2011

    […] ▼Flex 4 and Custom Layouts – RIAgora.com フランスのAdobeエバンジェリスト、Michaël CHAIZEのブログです。ビデオチュートリアル付きで、カスタムレイアウトクラスの作成方法を紹介しています。 […]

  3. Tips for Flex mobile apps via RIAgora « Geek Devigner - March 31, 2011

    […] a big fan of Flex 4 custom layouts. You can read my article about custom layouts here:http://www.riagora.com/2010/05/flex-4-and-custom-layouts/By default, the mobile List component will use the VerticalLayout class. Depending on what you […]

  4. » ITGM 748 Unit 08 Weekly Research Journal Idea Space - August 22, 2011

    […] Custom layouts for Flex – this whole site is now bookmarked for its content […]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize


Follow us on Facebook

© 2018 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes