Form style layout - without s:Form

Question

I want a layout similar to the example image, but I don't want to use Spark Form. What's the best way to achieve this?

• Each label is aligned right
• Each item is aligned left
• Label and item are centered horizontally.
• Item can be any item, not just text.

I don't want to use FormLayout because of difficulty styling the labels without creating a new skin for Form. Besides, it's not actually for a form anyway.

Answer 1

If your only concern regarding form layout is skinning the form, note that you can achieve your desired result purely with style properties:

Example form specifying fx:Style:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|FormItem s|Label#labelDisplay {
            textAlign: right;
            fontSize: 24px;
        }
        s|Label {
            fontSize: 24px;
        }
    </fx:Style>

    <s:Form>
        <s:layout>
            <s:FormLayout gap="-12" />
        </s:layout>

        <s:FormItem label="Label">
            <s:Label text="Item 1" />
        </s:FormItem>

        <s:FormItem label="Another Label">
            <s:Label text="Item 2" />
        </s:FormItem>

        <s:FormItem label="Even Longer Label">
            <s:Label text="Another Item" />
        </s:FormItem>
    </s:Form>

</s:Application>

Answer 2

You can easily achieve this layout by using a VBox component:

<mx:VBox>
    <mx:Canvas>
        <mx:Label text="Label:Item 1"/>
    </mx:Canvas>    
    <mx:Canvas>
        <mx:Label text="Label:Item 2"/>
    </mx:Canvas>           
</mx:VBox>

A link to the API reference: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/VBox.html