flex spaghetti

Just another WordPress.com weblog

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: