1 Reply Latest reply on May 6, 2007 1:30 PM by BLXWebMaster

    flex menu navigation

    ncgames
      I am trying to build a menu in flex, but I'm having trouble getting it to work. I would like to use a ToggleButonBar, that shows the current location as a depressed button.
      Here's what I go so far:
      <?xml version="1.0" encoding="utf-8" ?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
      <mx:ToggleButtonBar>
      <mx:ArrayCollection>
      <mx:Array>
      <mx:Object label="A" click="navigateToURL(new URLRequest('My Website'), '_parent')"/>
      <mx:Object upSkin="@Embed('up.gif')" overSkin="@Embed('over.gif')" downSkin="@Embed('enter_g5.gif')" click="navigateToURL(new URLRequest('mywebsite'), '_parent')" />
      </mx:Array>
      </mx:ArrayCollection>
      </mx:ToggleButtonBar>
      </mx:Application>
      this code doesn't work as expected...

      this code below works though:
      <?xml version="1.0" encoding="utf-8" ?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
      <mx:ControlBar>
      <mx:LinkButton height="16" width="26" upSkin="@Embed('up.gif')" overSkin="@Embed('over.gif')" downSkin="@Embed('enter_g5.gif')" click="navigateToURL(new URLRequest('MYWEBSITE'), '_parent')" />
      </mx:ControlBar>
      </mx:Application>

      What do I need to do to get the toggle button bar working? Also, when it does take the visitor to the new section of my website, how can I pass info to let the link show as being the currently visited paged--maybe using the downSkin by default?

      I'm using eclipse and building swf files with the flex2sdk.
        • 1. Re: flex menu navigation
          BLXWebMaster Level 1
          Firstly, I would use the clickHandler event for your ToggleButtonBar. I am sure you can get it to work with teh Object tag, however probobly easier to have all code in one place. The sample I threw together uses the Index, but you could also use the label property to get the same result. As for setting the state once the page is loaded, the only way I know how if you are actually loading the application everytime a user clicks a button is to pass a query string. I am passing the index via a query string called strIndex. You can then capture the query string using "Application.application.parameters".

          I did not set the states, however you shoudl be able to figure it out easy enough since you will have access to the query string.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application
          xmlns:mx=" http://www.adobe.com/2006/mxml"
          initialize="init();"
          >

          <mx:Script>
          <![CDATA[
          import mx.controls.*;
          import mx.events.*;
          import mx.events.ItemClickEvent;

          // Capture Query String In URL
          public function init():void {
          if (Application.application.parameters.strIndex) {
          Alert.show("asd");
          switch (Application.application.parameters.strIndex) {
          case "0" :
          Alert.show("0");
          break;
          case "1" :
          Alert.show("1");
          break;
          default :
          Alert.show("Button Not Found");
          }
          }
          }

          // Handler For Click Event
          private function clickHandler(event:ItemClickEvent):void {
          Alert.show(String(event.index));

          switch (String(event.index)) {
          case "0" :
          navigateToURL(new URLRequest(' Http://127.0.0.1'), '_parent')
          break;
          case "1" :
          navigateToURL(new URLRequest(' Http://127.0.0.1'), '_parent')
          break;
          default :
          Alert.show("Button Not Found");
          }
          }
          ]]>
          </mx:Script>

          <mx:ToggleButtonBar itemClick="clickHandler(event);">
          <mx:ArrayCollection>
          <mx:Array>
          <mx:Object label="A"/>
          </mx:Array>
          </mx:ArrayCollection>
          </mx:ToggleButtonBar>
          </mx:Application>