Flex Viewer 2.0 ClassicController Widget issue

[StaceMaples]

Just switched to the ClassicController widget in my FlexViewer app, but no matter what I do, when I hover over the Nav tool icon, then try to move down to select one of the nav tools, the tool menu popup retracts before I can select a tool.  I don't see a setting in the xml files anywhere to control this.  Actually this happens with ANY of the Group icons in the widget.   I get this behavior in Firefox and IE7. Any thoughts?

[RobertScheitlin__GISP]

Stacey,

  Here is the fix. This code needs to replace your ControllerMenu.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2010 ESRI
//
// All rights reserved under the copyright laws of the United States.
// You may freely redistribute and use this software, with or
// without modification, provided you include the original copyright
// and use restrictions.  See use restrictions in the file:
// <install location>/License.txt
//
////////////////////////////////////////////////////////////////////////////////
-->
<mx:Canvas  xmlns:mx    ="http://www.adobe.com/2006/mxml"
    xmlns:flash ="flash.filters.*"
    xmlns:classic   ="widgets.ClassicController.*"
    rollOver    ="openMenu()"
    rollOut     ="closeMenu()" xmlns:s="library://ns.adobe.com/flex/spark">
    <!--
    /**
    * The ControllerMenu represents the drop down menu on the controler bar.
    * Each ControllerMenu will have menu items of ControllerMenuItem on it.
    */
    -->
    <mx:Script>
        <![CDATA[
            import com.esri.viewer.AppEvent;
            import com.esri.viewer.ViewerContainer;

            import mx.collections.ArrayCollection;

            import spark.components.supportClasses.ItemRenderer;

            /**
             * menuImage is the url to the image used for the menu.
             */
            [Bindable]
            public var menuImage:String;

            /**
             * menuLabel is the label displayed for the menu.
             */
            [Bindable]
            public var menuLabel:String;

            /**
             * menuCollection is the array collection of controller menu items to be listed in the menu.
             */
            [Bindable]
            public var controllerMenuItemAC:ArrayCollection;

            private var menuTimer:uint;

            private static var STATE_MAXIMIZED:String = "maximized";

            //open menu
            private function openMenu():void
            {
                menuTimer = setTimeout(showMenu, 200);
            }

            //close menu
            private function closeMenu():void
            {
                clearTimeout(menuTimer);
                currentState = "";
            }

            //show menu
            private function showMenu():void
            {
                currentState = ControllerMenu.STATE_MAXIMIZED;
            }

            protected function controllerMenuItemDG_controllerMenuItemClickHandler(event:Event):void
            {

                var controllerMenuItem:ControllerMenuItem = ItemRenderer(event.target).data as ControllerMenuItem
                switch (controllerMenuItem.itemAction)
                {
                    case "widget":
                        ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, controllerMenuItem.itemId));
                        break;
                    case "navtool":
                        var data:Object =
                    {
                        tool: controllerMenuItem.itemValue,
                            status: controllerMenuItem.itemLabel
                    }
                        ViewerContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_NAVIGATION, data));
                        break;
                    case "basemap":
                        ViewerContainer.dispatchEvent(new AppEvent(AppEvent.BASEMAP_SWITCH, controllerMenuItem.itemValue));
                        break;
                    case "link":
                        navigateToURL(new URLRequest(controllerMenuItem.itemValue));
                        break;
                    case "function":
                        break;
                }
            }

        ]]>
    </mx:Script>

    <mx:states>
        <mx:State name="maximized">
            <mx:SetProperty target="{menuBox}" name="height"/>
            <mx:SetProperty target="{menuBox}" name="width"/>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition fromState="" toState="*">
            <mx:Resize duration="400" target="{menuBox}" />
        </mx:Transition>
        <mx:Transition fromState="*" toState="">
            <mx:Resize duration="200" target="{menuBox}" />
        </mx:Transition>
    </mx:transitions>

    <mx:VBox id="mainBox"
             horizontalAlign="center"
             horizontalScrollPolicy="off"
             verticalGap="0"
             verticalScrollPolicy="off" >
        <mx:Image id="menuIcon"
                  buttonMode="true"
                  source="{menuImage}"
                  useHandCursor="true">
            <mx:filters>
                <flash:GlowFilter color="#000000" alpha="0.5" blurX="10" blurY="10"/>
            </mx:filters>
        </mx:Image>
        <mx:VBox id="menuBox"
                 height="0"
                 horizontalAlign="center"
                 horizontalScrollPolicy="off"
                 verticalGap="0"
                 verticalScrollPolicy="off"
                 width="100">
            <mx:VBox backgroundColor="#FFFFFF"
                     backgroundAlpha="0.0"
                     horizontalAlign="center"
                     rollOver="currentState='maximized'"
                     verticalGap="0"
                     minWidth="150">
                <!-- TODO: set menuLabel variable
                <mx:Label styleName="ControllerTitle" text="{menuLabel}" color="#FF0000" fontSize="20">
                    <mx:filters>
                        <flash:GlowFilter color="#000000" alpha="0.8" blurX="10" blurY="10"/>
                    </mx:filters>
                </mx:Label> -->
                <mx:VRule styleName="ControllerRule" height="15"/>
            </mx:VBox>
            <mx:Canvas styleName="ControllerCanvas" minWidth="140">
                <mx:VBox width="100%" verticalGap="0" click="{currentState=''}">
                    <classic:ControllerMenuItemDataGroup id="controllerMenuItemDG"
                                                         dataProvider="{controllerMenuItemAC}"
                                                         controllerMenuItemClick="controllerMenuItemDG_controllerMenuItemClickHandler(event)">
                        <classic:layout>
                            <s:VerticalLayout
                                gap="0"
                                useVirtualLayout="true"
                                verticalAlign="middle"/>
                        </classic:layout>
                    </classic:ControllerMenuItemDataGroup>
                </mx:VBox>
            </mx:Canvas>
        </mx:VBox>
    </mx:VBox>
    <mx:Canvas width="{mainBox.width}" height="{mainBox.height}" />

</mx:Canvas>

[ChayaBalsiger]

Hi,
Does that code only work for the mxml file?  I tried using that code with the xml file and it made the widgets disappear and the widget that I have set to preload floated up the screen and disappeared.

[RobertScheitlin__GISP]

cmascioletti,

   Yep, If someone post code in this forum, than 99.8% of the time it is for people that are using the source code version of the viewer, and are compiling the code in FlashBuilder. There is no way to fix this issue if you are using the precompiled version unless you get FlashBuilder and recompile the MXML using the source code for the viewer.