Search

 

February 2010
S M T W T F S
« Jan   Mar »
 123456
78910111213
14151617181920
21222324252627
28  

Tags

Archives


« | Main | »

F3 v. F4 Tile v TileGroup

By Rich Tretola | February 9, 2010
15,240 views

Here are two applications that perform the same task. They layout 9 custom button components in a grid. One is Flex 3 and the other is Flex 4.

Main Application (Flex 3):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"  
                xmlns:local="*">
   
    <mx:Tile horizontalCenter="0"
             verticalCenter="0" width="400">
        <local:TileButton label="1"/>
        <local:TileButton label="2"/>
        <local:TileButton label="3"/>
        <local:TileButton label="4"/>
        <local:TileButton label="5"/>
        <local:TileButton label="6"/>
        <local:TileButton label="7"/>
        <local:TileButton label="8"/>
        <local:TileButton label="9"/>
    </mx:Tile>
</mx:Application>

TileButton Component:

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
           click="Alert.show(event.currentTarget.label)"
           width="100">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>
   
</mx:Button>

Here is the result:

Screen shot 2010-02-09 at 11.19.05 AM

Main Application (Flex 4):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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/mx"
               xmlns:local="*">

    <s:TileGroup horizontalCenter="0"
        verticalCenter="0" width="400">
            <local:TileButton label="1"/>
            <local:TileButton label="2"/>
            <local:TileButton label="3"/>
            <local:TileButton label="4"/>
            <local:TileButton label="5"/>
            <local:TileButton label="6"/>
            <local:TileButton label="7"/>
            <local:TileButton label="8"/>
            <local:TileButton label="9"/>
    </s:TileGroup>
</s:Application>

TileButton Component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          click="Alert.show(event.currentTarget.label)"
          width="100">
   
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </fx:Script>
   
</s:Button>

Here is the result:

Screen shot 2010-02-09 at 11.19.28 AM

As you can see, this one is a pretty similar comparison of the Flex 3 v. Flex 4 ways to do Tile layouts.

Topics: Uncategorized | 2 Comments »

2 Responses to “F3 v. F4 Tile v TileGroup”

  1. mbt Says:
    March 20th, 2010 at 9:55 pm

    aaaaaaa

    Reply to this comment

  2. Have you updated any Flex 2/3 applications to Flex 4+? | EverythingFlex: Flex & AIR Says:
    December 15th, 2010 at 11:07 am

    [...] v. F4: Using ViewStack, TabNavigator and Accordion F3 v. F4 Tile v TileGroup F3 v. F4: Repeater v DataGroup F3 v. F4: Boxes v [...]

Comments