PDA

View Full Version : show / hide + tab + tabNavigator


ljonny18
11-15-2006, 09:07 AM
Hi

Is it possible to show / hide tabs within a tabNavigator depending orn e.g. a variable value....?

For example - I have a webService which gets the "user type" (admin / general user) and sets a variable within the Flex 2 application relevent to this.

If the user type is a "general user" then I want them to see (only) the default tabs within the tabNavigator, but if the user type is an "admin user", then I want to show another (additional) tab etc........

e.g.:
<mx:TabNavigator id="tn">
<vBox id="tab1" label="default tab 1">content</vBox> - always show tab within tabNavigator
<vBox id="tab2" label="default tab 2">content</vBox> - always show tab within tabNavigator
<vBox id="tab3" label="default tab 3">content</vBox> - always show tab within tabNavigator

<vBox id="adminTab" label="admin tab">content</vBox> - only show tab within tabNavigator for admin users (otherwise hide)
<mx:TabNavigator/>

Thanks,
Jon.

Tink
11-15-2006, 09:31 AM
how about you add the default tabs in MXML, and then when the webservice comes back, check the detail and add new tabs with AS if required.

ljonny18
11-21-2006, 11:04 AM
mm ok...

I did not think of this (how can you add a tab using actionScprit)... as I said:

I have a webService which gets the "user type" (admin / general user) and sets a variable within the Flex 2 application relevent to this.

- generalUser
- adminUser

and I have a tabNavigator with the tabs A, B, C and D:

<mx:TabNavigator id="tn">
<vBox id="a" label="A">content</vBox>
<vBox id="b" label="B">content</vBox>
<vBox id="c" label="C">content</vBox>
<vBox id="d" label="D">content</vBox>
<mx:TabNavigator/>

e.g. I want to allow the "generalUser" to see tab A and B and the "adminUser" to see tab C and D etc.....

from what you say - I assume you check the user type and then create the tabs accordingly.....

i.e.

if(user = admin) {
create tab A, create tab B
}

but then I have the question - what about the content within the tabs? hence I was wondering if you could jusr show / hide the tabs depending on the user type(s) etc....................

sorry - I am a bit cinfused as to how to go about this one, so any help is appreciated.

thanks,
Jon.

Tink
11-21-2006, 11:15 AM
have u tried just removing items from the tabNavigators display list?

if that doesn't work, you have to creat the content as an external class, and then create your instances and add them to the tabNavigator after the login has taken place. (in fact, this sounds a better option as it would look silly to show all items and then remove them. you should show the default items and then add the extra ones if they login as admin).

ljonny18
11-21-2006, 01:16 PM
Hi tink... what do you mean by "remvoing items from the tabNavigators display list" can you expand.... it sounds promising...


additionally... I was reading up on some examples about enabling and removing tabs, but am having no joy - I guess the artical is based around Flex 1.5 as I am having no joy using Flex 2....

basically it says, to disable a tab use:

testNav['tabBar'].getChildAt(1).enabled=false;

but I am getting the following "rin time" error:
ReferenceError: Error #1069: Property tabBar not found on mx.containers.TabNavigator and there is no default value.


and then it continues (to what I am interested in) to removing a tab:
testNav.destroyChildAt(1);

but again I am getting an error:
1062: Call to possibly undefined method destroyChildAt through a reference with a static type mx.containers:Tabnavigator.


you can see this documentation at:
http://weblogs.macromedia.com/nwatson/archives/flex/index.cfm

but this is basically what I am trying to achieve - but am having no joy :(

Thanks
Jon.

Tink
11-21-2006, 02:33 PM
i knocked this example up<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[
import mx.controls.Button;

private function showTab( event:MouseEvent ):void
{
var button:Button = Button( event.target );
button.enabled = false;

var hideButton:Button = Button( button.parent.getChildAt( 1 ) );
hideButton.enabled = true;

switch( button.label )
{
case "show tab 1" : tabNavigator.addChildAt( vBox0, 0 );
break;
case "show tab 2" : if( tabNavigator.getChildAt( 0 ) == vBox0 )
{
tabNavigator.addChildAt( vBox1, 1 );
}
else
{
tabNavigator.addChildAt( vBox1, 0 );
}
break;
case "show tab 3" : if( tabNavigator.getChildAt( 0 ) == vBox0 && tabNavigator.getChildAt( 1 ) == vBox1 )
{
tabNavigator.addChildAt( vBox2, 2 );
}
else if( tabNavigator.getChildAt( 0 ) == vBox1 )
{
tabNavigator.addChildAt( vBox2, 1 );
}
else
{
tabNavigator.addChildAt( vBox2, 0 );
}
break;
case "show tab 4" : tabNavigator.addChildAt( vBox3, tabNavigator.numChildren - 1 );
break;
}
}

private function hideTab( event:MouseEvent ):void
{
var button:Button = Button( event.target );
button.enabled = false;

var showButton:Button = Button( button.parent.getChildAt( 0 ) );
showButton.enabled = true;

switch( button.label )
{
case "hide tab 1" : tabNavigator.removeChild( vBox0 );
break;
case "hide tab 2" : tabNavigator.removeChild( vBox1 );
break;
case "hide tab 3" : tabNavigator.removeChild( vBox2 );
break;
case "hide tab 4" : tabNavigator.removeChild( vBox3 );
break;
}
}
]]>
</mx:Script>

<mx:VBox width="100%">
<mx:TabNavigator id="tabNavigator" width="250" height="250">
<mx:VBox id="vBox0">
<mx:DateChooser/>
</mx:VBox>
<mx:VBox id="vBox1">
<mx:DateChooser/>
</mx:VBox>
<mx:VBox id="vBox2">
<mx:DateChooser/>
</mx:VBox>
<mx:VBox id="vBox3">
<mx:DateChooser/>
</mx:VBox>
</mx:TabNavigator>

<mx:HBox width="100%">
<mx:VBox>
<mx:Button label="show tab 1" enabled="false" click="showTab( event );"/>
<mx:Button label="hide tab 1" click="hideTab( event );"/>
</mx:VBox>
<mx:VBox>
<mx:Button label="show tab 2" enabled="false" click="showTab( event );"/>
<mx:Button label="hide tab 2" click="hideTab( event );"/>
</mx:VBox>
<mx:VBox>
<mx:Button label="show tab 3" enabled="false" click="showTab( event );"/>
<mx:Button label="hide tab 3" click="hideTab( event );"/>
</mx:VBox>
<mx:VBox>
<mx:Button label="show tab 3" enabled="false" click="showTab( event );"/>
<mx:Button label="hide tab 3" click="hideTab( event );"/>
</mx:VBox>
</mx:HBox>
</mx:VBox>


</mx:Application>

ljonny18
11-21-2006, 03:00 PM
Tink.... you are a star!!!!


thats is exactly what I was after - I could just not get my head around how to go about doing it......


thanks a lot - your knowlege, time and torubles are much appreciated!

Jon :D