Search

 

July 2006
S M T W T F S
« Jun   Aug »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Tags

Archives


« | Main | »

MultiRowTabs

By Rich Tretola | July 21, 2006
9,545 views

After strugling with an attempt to make a multirow tab navigator similar to what Darron (http://www.ifbin.com/news/2005/11/flex-15-multiline-tabnavigator-by.html) had accomplished with Flex 1.5, I was forced to take another approach since Flex 2 does not allow a TabNavigator to be in an unselected state. The new one uses multiple rows of simple buttons that have been skinned like Tabs and reposotions the rows when a selection is made of an upper row. The components must attach itself to a viewStack and also accepts arguments of tabsPerRow, rowheight, and dp. Full source code is included. Please leave comments, if you make any changes to the source code.

Right Click on application to view & download Source Code.

Run This Code

This component has been updated, please see http://blog.everythingflex.com/2009/08/27/multirowtabs-flex-component-redux/

Topics: Components, Flex 2, Tutorials | 15 Comments »

15 Responses to “MultiRowTabs”

  1. Louie Penaflor Says:
    September 7th, 2007 at 3:44 pm

    Hey Rich,
    I just posted about a component that I created awhile back that used the source from your component. Thanks for the great example.

    http://www.restlessthinker.com/blog/?p=48

    Reply to this comment

  2. Erik Says:
    July 29th, 2008 at 6:37 am

    I’m having a hard time styling this using style sheets. Is there anyway of making the buttons border less at the bottom and the background white when presed? It’s so simple with the built in tabs.

    Reply to this comment

  3. everythingflex Says:
    July 29th, 2008 at 2:50 pm

    Hi Eric,

    I don’t see a border on the bottom of the selected tab when I run the sample?

    Reply to this comment

  4. Andrew Horvath Says:
    August 6th, 2008 at 8:23 am

    Hey Rich,
    I found your solution after some desperate hours of googling “multi line tabbar”, “multi line tabs”, etc…
    I am not sure, if this is any help for you or someone else, but I found necessery to change the code in initTabs() a little. You wrote:
    var end:Number = tabsPerRow;
    However when you have less elements than tabsPerRow, this results in a runtime error. So I used this instead:
    var end:Number = Math.min(tabsPerRow,this.dp.length);

    Ok, you might ask why would one use a multi row tabbar with only one row? In my case I use dynamic data, so I can not now how many rows the control will have.

    Anyway, thanks for this solution!
    Andrew

    Reply to this comment

    hadrien leroy Reply:

    hey Andrew,

    I’m interresting for seeing your solution with dynamic data, could you post an url ?

    Hadrien

    Reply to this comment

  5. Rich Tretola Says:
    August 6th, 2008 at 9:59 am

    Thanks for the feedback Andrew.

    Reply to this comment

  6. Brandon Says:
    June 18th, 2009 at 5:54 pm

    Rich, I am having an issue getting this to run an I assume it has to do with the version of Flex/AS. I’m currently running Flex 3 and it gives me the following error when I attempt to run it:

    Description Resource Path Location Type
    1046: Type was not found or was not a compile-time constant: MultiRowTabs. Index.mxml MultiRowTab/src Unknown Flex Problem.

    Any insight into what may be going on would be much obliged! Thank you, sir.

    Brandon –

    Reply to this comment

    Rich Tretola Reply:

    Not getting much from your error, what is missing?

    Reply to this comment

    Brandon Reply:

    Sorry about that, Rich. Here’s everything I get when I copy the error along with a screenshot of my Flex 3 environment.

    Severity and Description Path Resource Location Creation Time Id
    1046: Type was not found or was not a compile-time constant: MultiRowTabs. MultiRowTab/src Index.mxml line 41 1245678440890 101

    Screenshot:
    http://prototype.arkitypemedia.net/MultiRowTab/MultiRowTabError.jpg

    Thank you for your time!

    Reply to this comment

  7. Kurt Says:
    August 5th, 2009 at 10:54 am

    Rich,
    I’m not a programmer in any fashion …
    I’m using flex to create a web app and found your MultiRowTab code.
    I’m trying to implement it in flex by doing the following, but keep getting this error:
    The prefix “eFlexComponents” for element “eFlexComponents:MultiRowTabs” is not bound.

    I create a new MXML component and pasted your MultiRowTabs.mxml and then created a new application and pasted your code from index.mxml.
    I reset the namespace to xmlns:eFlexComponents=”.”

    Any assistance is greatly appreicated.

    Kurt

    Reply to this comment

    Rich Tretola Reply:

    Make sure you have xmlns:eFlexComponents=”com.everythingFlex.components.*” defined in the mx:Application tag and that you also have the MultiRowTabs.mxml file within the package com.everythingFlex.components. You can get the source at http://everythingflex.com/flex2/MultiRowTabs/srcview/index.html (lower left corner)

    Reply to this comment

  8. ThE BiShOp* Says:
    August 27th, 2009 at 5:22 am

    Is it possible to add icons before the title ?

    Reply to this comment

  9. MultiRowTabs Flex Component Redux | EverythingFlex: Flex & AIR Says:
    August 27th, 2009 at 12:24 pm

    [...] Comments ThE BiShOp* on MultiRowTabsRich Tretola on LocalConnection – Maintaing connection between AIR applicationsEvan on [...]

  10. MultiRowTabs Flex Component Redux | EverythingFlex: Flex & AIR Says:
    August 27th, 2009 at 12:24 pm

    [...] Comments ThE BiShOp* on MultiRowTabsRich Tretola on LocalConnection – Maintaing connection between AIR applicationsEvan on [...]

Comments