Calendar

August 2009
S M T W T F S
« Jul   Sep »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Tag Cloud

Categories

Archives

Recent Posts

Recent Comments


« Have you seen the MAX 2009 Widget Yet? | Main | Woo Hoo, I made it into the MAX widget »

MultiRowTabs Flex Component Redux

By Rich Tretola | August 27, 2009
3,350 views

Based on a recent request for adding icons, I reworked the MultiRow Tab component that I first released in July of ‘06 (wow, I can’t believe it was that long ago). You can now also specify an icon and label placement. You can see that Tab 1 has an icon and Tab 2 also has an icon but the label is on the right in this case.

Anyway, here it is.

Example: (Right Click below to View/Download full source)

com.everythingFlex.components.MultiRowTabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
package com.everythingFlex.components {
    import flash.events.MouseEvent;
    import mx.containers.Canvas;
    import mx.controls.Alert;
    import mx.controls.Button;
    import mx.collections.ArrayCollection;
    import mx.containers.HBox;
    import mx.containers.ViewStack;
    import mx.skins.halo.TabSkin;
   
    public class MultiRowTabs extends Canvas {
       
        public var dp:ArrayCollection;
        public var myViewStack:ViewStack;
        public var tabsPerRow:Number = 4;
        public var rowHeight:Number = 22;
        public var tabRows:Array = new Array();
        private var buttonArray:ArrayCollection;
         
        public function MultiRowTabs() {
            super();
            this.percentWidth=100;
            this.setStyle("paddingTop", 0);
            this.setStyle("paddingBottom", 0);
            this.setStyle("paddingLeft", 0);
            this.setStyle("paddingRight", 0);
        }
       
        private function clickHandler(event:MouseEvent):void {
            var splitArray:Array = event.target.data.split("|");
            var myRowNumber:Number = Number(splitArray[0]);
            var myButtonIndex:Number = Number(splitArray[1]);
            myViewStack.selectedIndex = myButtonIndex;
           
            for (var i:Number = 0; i < buttonArray.length; i++) {
                buttonArray[i].selected = false;
            }
            event.target.selected = true;
            var currentY:Number = 0;
           
            for (var j:Number = 0; j < tabRows.length; j++) {
                if (myRowNumber != j) {
                    tabRows[j].y = currentY;
                    currentY = currentY + rowHeight;
                }
            }
            tabRows[myRowNumber].y = currentY;
        }
       
        public function initTabs():void {
            this.removeAllChildren();
            buttonArray = new ArrayCollection();
            var start:Number = 0;
            var end:Number = Math.min(tabsPerRow, this.dp.length);
            var currentY:Number = 0;
           
            for (var i:Number = 0; i < this.dp.length / tabsPerRow; i++) {
                tabRows[i] = new HBox();
                tabRows[i].percentWidth = 100;
                tabRows[i].setStyle("paddingTop", 0);
                tabRows[i].setStyle("paddingBottom", 0);
                tabRows[i].setStyle("horizontalGap", 0);
                tabRows[i].setStyle("verticalGap", 0);
                tabRows[i].y = currentY;
                currentY = currentY + rowHeight;
                this.addChild(tabRows[i]);
               
                for (var j:Number = start; j < end; j++) {
                    var button:Button = new Button();
                   
                    if (this.dp[j].icon != null)
                        button.setStyle("icon", this.dp[j].icon);
                   
                    if (this.dp[j].labelPlacement != null)
                        button.labelPlacement = this.dp[j].labelPlacement;
                    button.label = this.dp[j].label;
                    button.data = i + "|" + j;
                    button.setStyle("upSkin", TabSkin);
                    button.setStyle("downSkin", TabSkin);
                    button.setStyle("overSkin", TabSkin);
                    button.setStyle("selectedUpSkin", TabSkin);
                    button.setStyle("selectedOverSkin", TabSkin);
                    button.setStyle("selectedDownSkin", TabSkin);
                    button.setStyle("selectedDisabledSkin", TabSkin);
                    button.percentWidth = 100;
                    button.height = rowHeight;
                    button.addEventListener(MouseEvent.CLICK, clickHandler);
                    tabRows[i].addChild(button);
                    button.selected = false;
                   
                    if (j == 0)
                        button.selected = true;
                    buttonArray.addItem(button);
                }
                start = start + tabsPerRow;
                end = end + tabsPerRow;
               
                if (end > this.dp.length) {
                    end = this.dp.length;
                }
                var myRowNumber:Number = 0;
                var newCurrentY:Number = 0;
               
                for (var k:Number = 0; k < tabRows.length; k++) {
                    if (myRowNumber != k) {
                        tabRows[k].y = newCurrentY;
                        newCurrentY = newCurrentY + rowHeight;
                    }
                }
                tabRows[myRowNumber].y = newCurrentY;
            }
        }
    }
}

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<?xml version="1.0"?>
<mx:Application xmlns="*" creationComplete="doInit()"
                xmlns:mx="http://www.adobe.com/2006/mxml" width="450"
                height="350"
                xmlns:eFlexComponents="com.everythingFlex.components.*"
                viewSourceURL="srcview/index.html"
                backgroundGradientColors="[#8080ff, #400040]">

    <mx:Script>

        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var dp:ArrayCollection;
            [Embed('plugin.png')]
            private var pluginIcon:Class;
            [Embed('report.png')]
            private var reportIcon:Class;
           
            private function doInit():void {
                this.dp = new ArrayCollection();
                this.dp.addItem({ label: "Tab 1", icon: pluginIcon, labelPlacement: "left" });
                this.dp.addItem({ label: "Tab 2", icon: reportIcon, labelPlacement: "right" });
                this.dp.addItem({ label: "Tab 3" });
                this.dp.addItem({ label: "Tab 4" });
                this.dp.addItem({ label: "Tab 5" });
                this.dp.addItem({ label: "Tab 6" });
                this.dp.addItem({ label: "Tab 7" });
                this.dp.addItem({ label: "Tab 8" });
                this.dp.addItem({ label: "Tab 9" });
                this.dp.addItem({ label: "Tab 10" });
                this.dp.addItem({ label: "Tab 11" });
                this.initTabs();
            }
           
            private function initTabs():void {
                multi.initTabs();
            }
        ]]>
    </mx:Script>

    <mx:Panel width="400" height="300" title="eFlexComponents:MultiRowTabs">

        <eFlexComponents:MultiRowTabs id="multi" rowHeight="22"
                                       myViewStack="{mainView}" dp="{this.dp}"
                                       tabsPerRow="4" />

        <mx:ViewStack id="mainView" width="100%" height="100%" paddingTop="0"
                      paddingBottom="0">
            <mx:Canvas label="Canvas 1" width="100%" height="100%">
                <mx:Label text="Canvas 1" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 2" width="100%" height="100%">
                <mx:Label text="Canvas 2" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 3" width="100%" height="100%">
                <mx:Label text="Canvas 3" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 4" width="100%" height="100%">
                <mx:Label text="Canvas 4" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 5" width="100%" height="100%">
                <mx:Label text="Canvas 5" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 6" width="100%" height="100%">
                <mx:Label text="Canvas 6" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 7" width="100%" height="100%">
                <mx:Label text="Canvas 7" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 8" width="100%" height="100%">
                <mx:Label text="Canvas 8" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 9" width="100%" height="100%">
                <mx:Label text="Canvas 9" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 10" width="100%" height="100%">
                <mx:Label text="Canvas 10" />
            </mx:Canvas>
            <mx:Canvas label="Canvas 11" width="100%" height="100%">
                <mx:Label text="Canvas 11" />
            </mx:Canvas>
        </mx:ViewStack>
    </mx:Panel>
</mx:Application>

Topics: Flex | 7 Comments »

7 Responses to “MultiRowTabs Flex Component Redux”

  1. MultiRowTabs | EverythingFlex: Flex & AIR Says:
    August 27th, 2009 at 12:26 pm

    [...] MultiRowTabs Flex Component Redux [...]

  2. Jeffry Houser Says:
    August 27th, 2009 at 2:50 pm

    Wow, I had no idea one of these existed.

    This was our plan for the first Flextras component; but we eventually abandoned it because we thought the ‘paradigm’ was confusing to users. I did demo it at one of our Flextras Friday Lunch Podcast episodes, though:

    http://www.flextras.com/blog/index.cfm/2009/5/28/Flextras-Friday-Lunch–Episode-7–03202009

    Reply to this comment

    Rich Tretola Reply:
    August 27th, 2009 at 3:47 pm

    I wrote the original in ‘06 for an internal project here, which was the original post I referenced. It has been in production ever since.

    Reply to this comment

  3. andy.edmonds.be › links for 2009-08-29 Says:
    August 29th, 2009 at 8:35 pm

    [...] MultiRowTabs Flex Component Redux | EverythingFlex: Flex & AIR (tags: flex component tab) This was written by andy. Posted on Sunday, August 30, 2009, at 1:34 am. Filed under Delicious. Bookmark the permalink. Follow comments here with the RSS feed. Post a comment or leave a trackback. [...]

  4. Kavya Says:
    September 17th, 2009 at 1:23 am

    thanks Its really nice

    Reply to this comment

  5. porno izle Says:
    December 5th, 2009 at 6:34 am

    thanks for all admin
    with everything beautiful

    Reply to this comment

  6. Wade Says:
    March 25th, 2010 at 7:48 pm

    I cannot thank Mr. Tretola enough for putting this component out there!

    With a little extension and customization, this MultiRowTabs was just what I needed for a little project of mine.

    For anyone that would like to see proof that this does work, take a peek at http://vve.cobaltduck.info

    Wade

    Reply to this comment

Comments