Search

 

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

Tags

360Flex actionscript adobe adobe air air air 2 aironandroid android apple as3 blackberry books conference contest cookbook F3 v. F4 FileReference flash flash builder flash catalyst Flash Player flashplayer flashplayer10 flash player 10.1 Flex flex3 flex4 Flex 4.5 flexbuilder fotobooth google gumbo ios ipad iphone java load() max max 2009 merapi microsoft mobile pixel bender playbook save()

Archives


« | Main | »

F3 v. F4 Tile v TileGroup

By Rich Tretola | February 9, 2010
9,430 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.

Email

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