4 Replies Latest reply on Sep 18, 2007 5:15 PM by rkwattsinconnecticut

    tabbar tab mouseover or click events..newbie

    rkwattsinconnecticut
      I am trying to create a tab menu bar that opens a submenu with a mouseover event over each tab. I can't seem to get the tabbar children events to do anything. I can get click events to do things by reading the index property with a script and import mx.events.ItemClickEvent, but not with the code below. And I don't understand why the only click event that works below is the one in the mx:TextArea tags. Any guidance is appreciated.

      l version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" height="600" width="753" backgroundColor="#FFFFFF">




      <mx:ViewStack x="543" y="381" id="viewstack1" width="200" height="200" click="textarea1.text='viewstack'">
      <mx:Canvas label="Home" width="100%" height="100%">
      </mx:Canvas>
      <mx:Canvas label="Locations" width="100%" height="100%" click="textarea1.text='bbb'" id="mxLocations" rollOver="textarea1.text='ccb'">
      </mx:Canvas>
      <mx:VBox label="View 1" width="100%" height="100%" horizontalAlign="center" click="textarea1.text='bww'" mouseOver="textarea1.text='bbb'" rollOver="textarea1.text='bbbx'">
      <mx:Label text="View 122" fontSize="36" mouseOver="textarea1.text='bww'" rollOver="textarea1.text='bww'"/>
      </mx:VBox>

      </mx:ViewStack>

      <mx:TextArea x="124" y="528" text="xxx" id="textarea1" click="textarea1.text='bbb'"/>


      <mx:TabBar x="10" y="70" width="653" dataProvider="viewstack1" click="textarea1.text='tabbar'">
      </mx:TabBar>




      </mx:Application>
      Text
        • 1. Re: tabbar tab mouseover or click events..newbie
          TeotiGraphix Level 3
          Hi,

          Try using the itemClick event of the TabBar.

          <mx:TabBar x="10" y="70" width="653" dataProvider="viewstack1" itemClick="textarea1.text='tabbar'">

          Peace, Mike
          • 2. Re: tabbar tab mouseover or click events..newbie
            rkwattsinconnecticut Level 1
            Thank you Mike, I had itemClick wrong for sure, and I can look at event.index and see which tab was clicked and that is great. But what I can't do is see which tab had a mouseover or rollover event, since event.index does not change with mouseover. I am concluding that tabbar has focus and therefore the Canvas items do not and that is why the Canvas mouseover events do not fire. Am I getting close?

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" height="600" width="753" backgroundColor="#FFFFFF">

            <mx:ViewStack x="543" y="381" id="viewstack1" width="200" height="200" click="textarea1.text='viewstack'">
            <mx:Canvas label="Home" width="100%" height="100%">
            </mx:Canvas>
            <mx:Canvas label="Locations" width="100%" height="100%" click="textarea1.text='bbb'" id="mxLocations" rollOver="textarea1.text='ccb'">
            </mx:Canvas>
            <mx:VBox label="View 1" width="100%" height="100%" horizontalAlign="center" click="textarea1.text='bww'" mouseOver="textarea1.text='bbc'" rollOver="textarea1.text='bbbx'">
            <mx:Label text="View 122" fontSize="36" mouseOver="textarea1.text='bwa'" rollOver="textarea1.text='bwz'"/>
            </mx:VBox>
            </mx:ViewStack>
            <mx:TextArea x="124" y="528" text="xxx" id="textarea1" click="textarea1.text='bbb'"/>
            <mx:TabBar x="10" y="70" width="653" dataProvider="viewstack1" itemClick="textarea1.text='tabbar'" >
            </mx:TabBar>

            </mx:Application>
            • 3. Re: tabbar tab mouseover or click events..newbie
              TeotiGraphix Level 3
              Hi,

              No, all MouseEvents are bubbling.

              With a Container, you have to have a backgroundColor style set. If you do but still want it transparent, set backgroundAlpha to 0 and you will get all of it's mouse events.

              As for the tab bar mouseOver...

              here is some code


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

              private function testIt(event:MouseEvent):void
              {
              if (event.target is Button)
              {
              var index:int = bar.getChildIndex(DisplayObject(event.target));
              var tab:Button = Button(bar.getChildAt(index));
              trace("Tab = ", tab.label);
              }
              }

              ]]>
              </mx:Script>

              <mx:TabBar id="bar"
              mouseOver="testIt(event)"
              x="10" y="70"
              width="653"
              dataProvider="viewstack1"
              itemClick="textarea1.text='tabbar'" >
              </mx:TabBar>

              Traces...

              Tab = Locations
              Tab = View 1
              Tab = View 1
              Tab = Locations

              Peace, Mike

              PS rollOver events do not bubble. you need mouseOver to catch children of the TabBar.

              • 4. Re: tabbar tab mouseover or click events..newbie
                rkwattsinconnecticut Level 1
                Thank you again Mike for the lesson. There is so much to learn.