Home > flex, ria, tips & tricks > Playing with Custom Layout in Flex 4

Playing with Custom Layout in Flex 4

May 29th, 2009

gumboListAs Flex 4 SDK is almost in it’s Beta state I took a look at his features and what impressed me the most was how the presentation is decoupled from the behavior. I remember a presentation around Max 2007 when Ely Greenfield, the principal scientist for Flex SDK, showed a sneak peek on how this will make a lot of skinning things a lot simpler. For example, it’s simple to make a list look … let’s say to make it look like the Fan effect that Mac users love so much :)

I found this quite easy to implement using Flex 4. Because the list can be skinned in MXML it’s so easy to program the skin and stay in MXML for the most part. The only thing that I actually needed to program was how the elements are laid out.

The basic List skin looks like this:

<s:states>
    <s:State name="normal"/>
    <s:State name="hover"/>
    <s:State name="disabled"/>
</s:states>

<fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
<s:DataGroup itemRenderer="components.RepeatedItem1"
        clipAndEnableScrolling="true"  id="dataGroup"
        rollOver="currentState='hover'">
    <s:layout>
        <components:LargeCircleLayout id="myLayout" radius="1400"
            stepAngle="0" stepAngle.hover="3.5"/>
    </s:layout>
</s:DataGroup> 

Notice that it’s nothing but a DataGroup that has a layout. I’ve also added the Hover state to be able to open the list when you hover over it.

To add the nice effect it’s just a matter of animating one layout property:

<s:transitions>
    <s:Transition autoReverse="true">
        <s:Animate target="{myLayout}" duration="200">
            <s:SimpleMotionPath property="stepAngle"/>
        </s:Animate>
    </s:Transition>
</s:transitions>

You can take a look at the source code here and watch the list here.

Categories: flex, ria, tips & tricks Tags:
  1. June 1st, 2009 at 14:18 | #1

    Nice example. Really shows the power of the new layout concepts in Gumbo.
    One thing how would you extend the code so that the selected item is always on top? Haven`t really found a solution yet :-(

  2. LyonsChen
    June 2nd, 2009 at 03:35 | #2

    Awsome!Thanks for sharing this!

  3. Chuckytuh
    June 13th, 2009 at 12:31 | #3

    @Benz

    Benz :
    Nice example. Really shows the power of the new layout concepts in Gumbo.
    One thing how would you extend the code so that the selected item is always on top? Haven`t really found a solution yet

    Well, as far as i know thats the z-order, i’ve read somewhere about a zordering class but dont remember where!However if you see the screencast about creating a carousel with flash cs4, in http://www.gotoandlearn.com, from Lee Brimelow he talks about that class!:) Hope that helps!

  4. June 22nd, 2009 at 16:12 | #4

    @Chuckytuh
    The problem is not the how but more the where. Would you do it in your layout class? Because normally your layout class does not know about selections or in the renderer? Maybe I`m missing something…
    Thanks
    Benz

  5. July 6th, 2009 at 23:48 | #5

    i’ve read somewhere about a zordering class , you are very great.

  6. November 25th, 2009 at 10:39 | #6

    Thanks for the source code, it helps a lot, really nice.

  7. Guy Ross
    February 10th, 2010 at 23:35 | #7

    @Benz
    “how would you extend the code so that the selected item is always on top?”

    the depth property controls which items within the same container show foremost.
    item at higher depth levels are rendered on top of items at lower depth levels.
    items at the same depth level render in order of their addition.

    you can set the selected item’s depth to 1 by adding this to the custom itemRenderer’s definition:

  8. March 31st, 2010 at 19:17 | #8

    You can see a way to use the depth in here (near the end of the updateDisplayList override):
    http://www.gui-xian.com/blog/?p=4

    cheers

  9. November 9th, 2010 at 19:33 | #9

    Thanks for this example. I’m diving into Spark this week- mainly skinning and this was a helpful read.

Comments are closed.