flex spaghetti

Just another WordPress.com weblog

Archive for the ‘Group’ Category

TileLayout Example

Posted by rvollmar on November 17, 2009

Here’s a quick example of using a TileLayout for a List and positioning elements within it:

<?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" 
  xmlns:mx="library://ns.adobe.com/flex/halo">
  <s:VGroup>
    
    <s:HGroup>
      <s:Button label="horizontalAlign left" click="TileLayout(list1.layout).horizontalAlign = 'left'" />
      <s:Button label="horizontalAlign center" click="TileLayout(list1.layout).horizontalAlign = 'center'" />
      <s:Button label="horizontalAlign right" click="TileLayout(list1.layout).horizontalAlign = 'right'" />
    </s:HGroup>  
    <s:HGroup>
      <s:Button label="verticalAlign top" click="TileLayout(list1.layout).verticalAlign = 'top'" />
      <s:Button label="verticalAlign middle" click="TileLayout(list1.layout).verticalAlign = 'middle'" />
      <s:Button label="verticalAlign bottom" click="TileLayout(list1.layout).verticalAlign = 'bottom'" />
    </s:HGroup>    
    <s:List id="list1"  >
      <s:itemRenderer>
        <fx:Component>
          <s:ItemRenderer width="10" height="10">
            <s:Rect width="100%" height="100%" >
              <s:stroke>
                <mx:SolidColorStroke weight="1" color="{data.color}"/>
              </s:stroke>
            </s:Rect>
          </s:ItemRenderer>
        </fx:Component>
      </s:itemRenderer>
      <s:layout>
        <s:TileLayout horizontalAlign="center" 
                verticalAlign="middle"
                columnWidth="40" rowHeight="40" />
      </s:layout>
      <s:dataProvider>
        <mx:ArrayCollection>
          <fx:Object color="0xff0000" />
          <fx:Object color="0x00ff00" />
          <fx:Object color="0x0000ff" />
          <fx:Object color="0xffff00" />
        </mx:ArrayCollection>
      </s:dataProvider>
  </s:List> 
  </s:VGroup>
</s:Application>

Advertisements

Posted in Group, Layout, List | Leave a Comment »

Setting the layout property in Flex 4

Posted by rvollmar on June 13, 2009

In Flex 3, the layout property could be set to strings such as “absolute”, “horizontal”, and “vertical”. In Flex 4, the layouts are classes such as BasicLayout, HorizontalLayout, VerticalLayout, and TileLayout. If you try to set the layout property in a class’ MXML tag, you will get the compiler error “values of type spark.layouts.supportClasses.LayoutBase cannot be represented in text.” Here are some options:

1. To set the layout for the Application in MXML:

<s:Application ...>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
...

2. To set the layout for a Group:

<s:Group>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
...

3. That seemed verbose, so there’s a shortcut to set the layout for a Group; you can use VGroup and HGroup:

<s:VGroup>
...

Enjoy,
– Rob

Posted in Application, Group, Layout | Leave a Comment »