nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Header Menu Bar Drop down

KevinCressy

Hi,

I would like to add a couple of menu items on a menu bar in the header of my flex viewer application. These would include "Links" and other hyperlinks that are useful on my project.

I have looked at implementing this using MenuBar (see here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/MenuBar.html) by adding the code example to HeaderControllerWidget.mxml however while I have managed to get a "box" where the menu should be - I don't actually get a menu to appear.

I am not sure if I am adding this to the wrong file or if there is something else I am missing.

Any help appreciated.

Finde mehr Beiträge mit dem Tag

Accepted answers

rscheitlin

Kevin,

I realized that I forgot to comment one area, and left some unused stuff in the code. Here is an updated version:

HeaderControllerWidget.zip

All comments

MartynSmith

I have implemented this code that Robert helped out with and it works great, and now trying to figure out how to extend its functionality. I'm trying to build a list of URL's in the dropdown menubar where the URL changes for each year, for example:

[Dropdown menu]
>"http://example.net/1997.txt"
>"http://example.net/1998.txt"
>"http://example.net/1999.txt"
> ... etc

The setup for the menubar code shown above is static XML, but I am wondering if there is a way to programtically create this menu with a while loop so that the menu grows as more years are added, something like this:

x = "earliest year"
while x < "current year":
URL = "http://example.net/" + x + ".txt"
x = x + 1

Any help is greatly appreciated

KevinCressy

Thanks Robert,

That has fixed it.

Regards,

Kevin

rscheitlin

Kevin,

Sure it was my mistake trying to compare an xml node and a string:

//Code Added    // Event handler for the MenuBar control's itemClick event.    private function menuHandler(event:MenuEvent):void  {     // Don't open the Alert for a menu bar item that      // opens a popup submenu.     if (event.item.@data != "top") {      //If you want to be able to do something unique when a menu      //item is clicked than you need code like this:      switch(String(event.item.@data)){       case "2-1":        navigateToURL(new URLRequest("http://www.bbc.co.uk/"));        break;       case "2-2":        navigateToURL(new URLRequest("http://www.sky.com/"));        break;       default:        Alert.show("Label: " + event.item.@label + "\n" +          "Data: " + event.item.@data, "Clicked menu item");        break;      }     }    } //End Code Added

KevinCressy

Kevin,

I realized that I forgot to comment one area, and left some unused stuff in the code. Here is an updated version:

Hi Robert,

Hope you can help I am sure this is an easy fix again.

I have been playing with the menu's, rearranging and adding sub menu's etc. I have managed to construct the menus as I would like them however the URL link is not working (I want some of the menu options to open external pages). At the moment the default message box is opening rather than the links to the external sites (i.e. BBC and Sky).

I have provided my code below. Any idea where I am going wrong?

//Code Added
   [Bindable]
   public var menuBarCollection:XMLListCollection;
   
   private var menubarXML:XMLList =
    <>
     <menuitem label="Document Links" data="top">
      <menuitem label="MenuItem 1-1" data="1-1">
       <menuitem label="MenuItem 1-1-1" groupName="one" data="1-1-1"/>
       <menuitem label="MenuItem 1-1-2" groupName="one" data="1-1-2"/>
      </menuitem>
      <menuitem type="separator"/>
      <menuitem label="MenuItem 1-2" data="1-2">
       <menuitem label="MenuItem 1-2-1" groupName="two" data="1-2-1"/>
       <menuitem label="MenuItem 1-2-2" groupName="two" data="1-2-2"/>
      </menuitem>
     </menuitem>
     <menuitem label="Other Links" data="top">
      <menuitem label="BBC Site" data="2-1"/>
      <menuitem type="separator"/>
      <menuitem label="Sky Site" data="2-2"/>
     </menuitem>
    </>;

//End Code Added

//Code Added
   // Event handler for the MenuBar control's itemClick event.
   private function menuHandler(event:MenuEvent):void  {
    // Don't open the Alert for a menu bar item that 
    // opens a popup submenu.
    if (event.item.@data != "top") {
     //If you want to be able to do something unique when a menu
     //item is clicked than you need code like this:
     switch( event.item.@data ){
      case "2-1":
       //doSomething();
       navigateToURL(new URLRequest("http://www.bbc.co.uk/"));
       break;
      case "2-2":
       //doSomethingElse();
       navigateToURL(new URLRequest("http://www.sky.com/"));
       break;
      default:
       Alert.show("Label: " + event.item.@label + "\n" + 
        "Data: " + event.item.@data, "Clicked menu item");
       break;
     }
    }
   }
//End Code Added

MartynSmith

I like this menu bar edit! have implemented it. Is there a way to have the XML data for the menus in a seperate file instead of embedded in the headercontroller.mxml? that way it could be updated without re-compiling?

KevinCressy

Thanks Robert - I have tagged the posts.

Cheers,

Kevin

rscheitlin

Kevin,

Don't forget to click the Mark as answer check as shown below in the bottom red rectangle:

KevinCressy

Hi Robert

This is exactly what I was after, sincere thanks for your help with this.

Regards,

Kevin

rscheitlin

Kevin,

I realized that I forgot to comment one area, and left some unused stuff in the code. Here is an updated version:

HeaderControllerWidget.zip

KevinCressy

Hi Robert,

No offence taken at all. Flex is new to me so you ar exactly right. I am currently starting the Flex in a week course hosted by Adobe, having just finished the Build a flex app in a day course. This was an excellent course that has shown me my way around the the Flash Builder IDE - but your right I need to look further into fundamentals. I am doing a combination of learning the fundamentals of the Flex SDK while also finding my way around the ArcGIS Flex API. I'm definately getting there and have learnt a lot recently, but clearly a long way to go!

Any way thanks for your help, I'll take a look at your code now.

regards,

Kevin

rscheitlin

Kevin,

Don't take offense, but it is painfully obvious that you need to learn just the basics of Flex Programming... You can not get far by just finding some code online and copy and pasting it, with out have a minimal (basic) understanding of the flex language. I recommend you Google flex in a Week.

That being said here is what you HeaderControllerWidget.mxml should have looked like, (all changes commented):

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

HeaderControllerWidget.zip

KevinCressy

Hi Robert,

My modified code is attached. I have added comments of Kevin** where I have added the new code - hopefully this helps?

I have only changed HeaderControllerWidget.mxml - I have not changed HeaderControllerWidget.xml

I notice I am getting a parse error at line 301 (just befor my script) but I can not resolve this.

Thanks in advance for the help,

Kevin

HeaderController.zip

rscheitlin

Kevin,

OK, post what you have added to the HeaderControllerWidget.mxml and I will have a look.

KevinCressy

Thanks Robert.

I was hoping to implement that looked a little less out of box which was why I was going to attempt to use the MenuBar component. This will certainly help in the short term though so thanks very much!

rscheitlin

Kevin,

Sounds like you need to look at this widget:

http://www.arcgis.com/home/item.html?id=5e4717fe1bb247f89b9092308e569c30

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.