7 Replies Latest reply on Aug 30, 2007 9:05 AM by levancho

    Conditional Tabs (show/hide)

    James Bower Level 1
      I'm trying to hide certain tabs based on the condition of whether they recieve content or not.
      Apparently, applying
      ... visible="{(someTextInput.text.length == 0) ? false:true}"
      doesn't work with tabs.

      What's the correct approach with tabs?

      Thanks,

      James
        • 1. Re: Conditional Tabs (show/hide)
          peterent Level 2
          Instead of using visible, use includeInLayout. If a child of the TabNavigator (or any container) has includeInLayout="false" it will execute removeChild() on the child component. Setting includeInLayout="true" on the child will add it back.
          • 2. Conditional Tabs (show/hide)
            James Bower Level 1
            Can you show me the code that will remove a tab using "includeInLayout="false"?

            This doesn't work.

            <mx:TabNavigator width="500" height="300">
            <mx:Canvas label="Tab 1" id="textTest" width="100%" height="100%">
            <mx:Form>
            <mx:FormItem label="Text 1">
            <mx:TextInput id="textTest1"/>
            </mx:FormItem>
            <mx:FormItem label="Text 2">
            <mx:TextInput id="textTest2"/>
            </mx:FormItem>
            </mx:Form>
            </mx:Canvas>
            <mx:Canvas label="Tab 2" width="100%" height="100%">
            <mx:Label text="{textTest1.text}"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 3" width="100%" height="100%" includeInLayout="false"> //<-- Here
            <mx:Label text="{textTest2.text}"/>
            </mx:Canvas>
            </mx:TabNavigator>

            I'd like something more like: // which doesn't seem to work either...

            <mx:Canvas label="Tab 3" width="100%" height="100%" includeInLayout="{(someTextInput.text.length == 0) ? false:true}">
            <mx:Label text="{textTest2.text}"/>
            </mx:Canvas>

            or another solution?

            Thanks,
            James
            • 3. Re: Conditional Tabs (show/hide)
              levancho Level 3
              add change="changeeventLisntener(event) to that "someTextInput"

              and

              <mx:Canvas id="mycanvas" label="Tab 3" width="100%" height="100%" >
              <mx:Label text="{textTest2.text}"/>
              </mx:Canvas>

              and function :

              private function changeeventLisntener(e:Event) : void {
              if(e.target as TextInput).text.length==0){
              mycanvas.includeInLayout=false;
              }else{
              mycanvas.includeInLayout=true;
              }
              • 4. Conditional Tabs (show/hide)
                James Bower Level 1
                Hi levancho,
                Thanks for your help.

                The code in the function you wrote throws several errors.

                maybe the following is correct:

                private function changeEventListener(e:Event):void
                {
                if((e.target as TextInput).text.length==0)
                {
                mycanvas.includeInLayout=false;
                }
                else
                {
                mycanvas.includeInLayout=true;
                }
                }


                Also, when you say

                "add change="changeeventLisntener(event) to that "someTextInput"

                do you mean something like this:

                <mx:Canvas label="Tab 3" width="100%" height="100%" id="mycanvas"
                includeInLayout="{(someTextInput.text.length == 0) ? false:true}"
                change="changeEventListener(event)">
                <mx:Label text="{textTest2.text}"/>
                </mx:Canvas>


                if so I get this error:

                "Cannot resolve attribute 'change' for component type mx.containers.Canvas."


                Thanks,
                James
                • 5. Conditional Tabs (show/hide)
                  levancho Level 3
                  sorry, I wrote a semi phseudo-code before, here is the correct one (with someTextInput I ment a textInput that you wrote in your example : someTextInput.text. ( i am assuming you want to hide component as soon as textinput has nothing it it, and show it as soon as something is in it) :
                  --------------
                  <?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.TextInput;
                  import mx.controls.Alert;

                  private function _check(e:Event):void
                  {
                  if((e.target as TextInput).text.length==0){
                  mycanvas.includeInLayout=false;
                  mycanvas.visible=false;
                  }else {
                  mycanvas.includeInLayout=true;
                  mycanvas.visible=true;
                  }
                  }

                  ]]>
                  </mx:Script>

                  <mx:Canvas id="mycanvas" >
                  <mx:Label text="lalala" />
                  </mx:Canvas>
                  <mx:TextInput x="175" y="127" text="Text" change="_check(event)" />
                  </mx:Application>



                  • 6. Re: Conditional Tabs (show/hide)
                    James Bower Level 1
                    Thanks again for your time.
                    It appears that the function you wrote works fine with most children however it doesn't "hide" or remove a tab in a tab navigator. I don't know what it is about tab navigator tabs but I remember reading somewhere that "removeChild" is needed for tabs. Would you have any idea on how to write a function that implements removeChild so that, for example, if a label within a tab is empty the tab doesn't appear when the application is initiated? I have a better description of what I am trying to do my post in the actionscript forum.

                    Thanks again!
                    • 7. Conditional Tabs (show/hide)
                      levancho Level 3
                      here you go as your post says during application initializtion to remove all children after first occurrence of tab without a label right?

                      <?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.TextInput;
                      import mx.controls.Alert;

                      private function checkTabs(e:Event):void
                      {
                      var _nolabel:Boolean = false
                      for each(var childTab:Canvas in mytabnavigator.getChildren()){
                      if(childTab.label=="") _nolabel = true;
                      if(_nolabel) {
                      mytabnavigator.removeChild(childTab);
                      }
                      }

                      }

                      ]]>
                      </mx:Script>

                      <mx:Canvas id="mycanvas" >
                      </mx:Canvas>
                      <mx:TabNavigator id="mytabnavigator" creationPolicy="all" creationComplete="checkTabs(event)" x="155" y="207" width="200" height="200">
                      <mx:Canvas label="One" width="100%" height="100%">
                      </mx:Canvas>
                      <mx:Canvas label="two" width="100%" height="100%">
                      </mx:Canvas>
                      <mx:Canvas label="three" width="100%" height="100%">
                      </mx:Canvas>
                      <mx:Canvas label="four" width="100%" height="100%">
                      </mx:Canvas>
                      <mx:Canvas label="" width="100%" height="100%">
                      </mx:Canvas>
                      <mx:Canvas label="six" width="100%" height="100%">
                      </mx:Canvas>
                      </mx:TabNavigator>
                      </mx:Application>