1 Reply Latest reply on Mar 7, 2007 6:53 PM by BLXWebMaster

    Menubar Events

    Mark_TheWebGuru
      Hi, I'm new to Flex so can anybody help me out with menu building.

      Problem: I can change viewStacks by itemClicks on the menuitems, however, my menu structure has only only menuitem for the home and logout buttons where the itemClick event doesn't work. Top level menus only have the click event which only passes the mouseEvent, not the menuEvent like in the itemClick. How can I get events to change viewStacks for my home and logout buttons

      My Code


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" pageTitle="POL Demo" creationComplete="initCollections();" >

      <mx:Script>
      <![CDATA[
      import mx.events.MenuEvent;
      import mx.controls.Alert;
      import mx.collections.*;

      [Bindable]
      public var menuBarCollection:XMLListCollection;

      private var menubarXML:XMLList =
      <>
      <menuitem label="Home" data="0" />
      <menuitem label="Transactions" data="top">
      <menuitem label="New Transaction" data="1"/>
      <menuitem label="Transaction Manager" data="4"/>
      </menuitem>
      <menuitem label="Reports" data="top">
      <menuitem label="X-Report" data="2"/>
      <menuitem label="Z-Report" data="3"/>
      </menuitem>
      <menuitem label="Maintenance" data="top">
      <menuitem label="Buyer's Maintenance" data="5"/>
      <menuitem label="PLU Maintenance" data="6"/>
      </menuitem>
      <menuitem label="Options" data="top">
      <menuitem label="Change Password" data="7"/>
      </menuitem>
      <menuitem label="Log Out" data="8"/>
      </>;

      private function initCollections():void {
      menuBarCollection = new XMLListCollection(menubarXML);
      }

      private function menuHandlerItemClick(oEvent:MenuEvent):void {
      storeViews.selectedIndex = oEvent.item.@data;
      }
      ]]>
      </mx:Script>
      <mx:Style source="main.css"/>

      <mx:VBox height="100%" width="100%">

      <mx:MenuBar id="mainMenuBar" labelField="@label" itemClick="menuHandlerItemClick(event);" dataProvider="{menuBarCollection}" styleName="storeControlBar">
      </mx:MenuBar>

      <mx:ViewStack id="storeViews" width="100%" height="100%" creationPolicy="all">
      <Menu_01_Home id="viewHome" label="Home"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_02_NewTxn id="viewNewTxn" label="New Transaction"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_03_XReport id="viewXReport" label="X-Report"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_04_ZReport id="viewYReport" label="Z-Report"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_05_TxnManager id="viewTxnManager" label="Transaction Manager"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_06_MaintainBuyers id="viewMaintainBuyers" label="Buyers Maintenance"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_07_MaintainPLU id="viewMaintainPLU" label="PLU Maintenance"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_08_ChangePassword id="viewChangePassword" label="Change Password"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      <Menu_09_LogOut id="viewLogOut" label="Log Out"
      showEffect="WipeDown" hideEffect="WipeUp"
      />
      </mx:ViewStack>

      </mx:VBox>

      </mx:Application>


      Thanks in advance

        • 1. Re: Menubar Events
          BLXWebMaster Level 1
          Ahhh.... Someone else...

          This took me a while also, seems that there was not an inherent easy way to capture top leval menu. I have been using this solution in several apps and have never had an issue.

          Basically I am using the "click" event for the MenuBar which is triggered on Top Level menu items.

          Sample Code:
          <mx:MenuBar id="mainMenuBar" labelField="@label" itemClick="menuHandlerItemClick(event);" click="clickHandler()" dataProvider="{menuBarCollection}" styleName="storeControlBar"/>

          /*
          The trick is to use the click event which I added to your MenuBar.
          The click handler with send the index of the MenuBar top level. So, capture it and then select the associated view.
          It helps to use the Alert method to determine the index, because it does not return the numbers you might expect.
          */

          //Click event handler for the main button.
          public function clickHandler():void {
          var selectedItem:String = barMenu.selectedIndex.toString();
          Alert.show(selectedItem);
          switch(selectedItem) {
          case "0": // Home
          storeViews.selectedChild=this['viewHome'];
          break;
          case "1": // Logout
          storeViews.selectedChild=this['viewLogOut'];
          break;
          default:
          break;
          }
          }

          Allen
          Adobe Community Expert
          http://www.adobe.com/communities/experts/members/AllenLevine.html