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:
package
{
import mx.core.ILayoutElement;
import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;
public class myVeryBasicLayout extends LayoutBase
{
public function myVeryBasicLayout(){
super(); }
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"> <s:layout> <local:myVeryBasicLayout/> </s:layout> </s:List> Here is a detailed article that describes what you can do with custom layouts:
http://www.adobe.com/devnet/flex/articles/spark_layouts.html. 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:
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.
Andrew Trice
Christophe Coenraets
Greg Wilson
Holly Schinsky
Piotr Walczyszyn
Raymond Camden
That’s really, really nice and you make it sounds so simple
Thanks !
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!!
Thanks a lot. You can check this Flex 4 cover flow: http://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/
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 !
i love your accent <3
lol. Thank you. I don’t want to lose my French touch
Hey, great tutorial, simple and to the point. a lot of pointers to play with, thanks.
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
Hi I am really impressed of your suggestion on Mobile Development.
How we can show Message Alerts in Flex Mobile Application.
@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
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.
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.
Hi this is a great article.
Can you share the mobile source code please?
Thank you