topic Re: Header Menu Bar Drop down in ArcGIS Viewer for Flex Questions

Header Menu Bar Drop down

KevinCressy — Wed, 18 Jan 2012 14:44:33 GMT

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.

Re: Header Menu Bar Drop down

RobertScheitlin__GISP — Wed, 18 Jan 2012 14:52:59 GMT

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:

Re: Header Menu Bar Drop down

KevinCressy — Wed, 18 Jan 2012 14:56:43 GMT

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!

Re: Header Menu Bar Drop down

RobertScheitlin__GISP — Wed, 18 Jan 2012 15:08:24 GMT

Kevin,

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

Re: Header Menu Bar Drop down

KevinCressy — Thu, 19 Jan 2012 11:08:53 GMT

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

Re: Header Menu Bar Drop down

RobertScheitlin__GISP — Thu, 19 Jan 2012 12:04:59 GMT

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:

Re: Header Menu Bar Drop down

KevinCressy — Thu, 19 Jan 2012 12:14:24 GMT

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

Re: Header Menu Bar Drop down

RobertScheitlin__GISP — Thu, 19 Jan 2012 12:31:15 GMT

Kevin,

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

Re: Header Menu Bar Drop down

KevinCressy — Thu, 19 Jan 2012 12:37:50 GMT

Hi Robert

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

Regards,

Kevin

Re: Header Menu Bar Drop down

RobertScheitlin__GISP — Thu, 19 Jan 2012 12:42:38 GMT

Kevin,

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

Re: Header Menu Bar Drop down

KevinCressy — Thu, 19 Jan 2012 13:09:11 GMT

Thanks Robert - I have tagged the posts.

Cheers,

Kevin

Re: Header Menu Bar Drop down

MartynSmith — Thu, 19 Jan 2012 16:05:15 GMT

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?

Re: Header Menu Bar Drop down

KevinCressy — Sat, 11 Dec 2021 18:00:09 GMT

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

Re: Header Menu Bar Drop down

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:00:12 GMT

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

Re: Header Menu Bar Drop down

KevinCressy — Thu, 19 Jan 2012 21:39:31 GMT

Thanks Robert,

That has fixed it.

Regards,

Kevin

Re: Header Menu Bar Drop down

MartynSmith — Wed, 21 Mar 2012 14:42:12 GMT

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