Update TOC after layers visibility changed in ActionScript in MapManager

[RoseZhou]

Hi:

I have added code to automatically save the current settings (for example, visible layers, map extent... ) when the Browser window is closed. Next time when FlexViewer is launched, the previous settings will be loaded automatically. This part works very well.

The problem is the TOC widget when loaded always set the CheckBoxes based on the Map Service sublayers' DEFAULT VISIBILITY.

I looked through this forum. Some suggest to add a customized Event Listener in TocItem. But the code to load the user's previous settings is added in MapManager.mxml. Based on the  "Application life cycle", MapManager loads the map services first based on the configuration settings. Then the WidgetManager loads the widget's Flash files from the uniform resource locators (URLs) based on the configuration settings.

So even I dispatch a customized event in MapManager.mxml, the TOC widget won't catch it as it is not loaded yet.
Is it possible to get the visible layers in current map instead of using the Default Visibility when create the TOC item at initalization?

Any insights?

Thanks a lot!

Rose

[RoseZhou]

Does anyone have any clues on this?

Thanks a lot...

[KennyHoran]

Just brainstorming, but you could write a widget for this if you just had an event which triggers after the map layers load.  The Component life cycle indicates there's a load event which "applies to Map and Layer and ... is dispatched after its properties are set up but before the map is downloaded and displayed."  That sounds like exactly what you need.  You could make a simple widget which listens for that event and updates your properties, then the TOC entry would be generated using those new properties.  If that doesn't work you could try an event that fires after the TOC has loaded, such as applicationComplete.

[AimeiChen]

Hi:

I have added code to automatically save the current settings (for example, visible layers, map extent... ) when the Browser window is closed. Next time when FlexViewer is launched, the previous settings will be loaded automatically. This part works very well.

The problem is the TOC widget when loaded always set the CheckBoxes based on the Map Service sublayers' DEFAULT VISIBILITY.

I looked through this forum. Some suggest to add a customized Event Listener in TocItem. But the code to load the user's previous settings is added in MapManager.mxml. Based on the  "Application life cycle", MapManager loads the map services first based on the configuration settings. Then the WidgetManager loads the widget's Flash files from the uniform resource locators (URLs) based on the configuration settings.

So even I dispatch a customized event in MapManager.mxml, the TOC widget won't catch it as it is not loaded yet.
Is it possible to get the visible layers in current map instead of using the Default Visibility when create the TOC item at initalization?

Any insights?

Thanks a lot!

Rose

Hi, Rose
I am looking for the save current settings (visible layers, map extent...) function in my flex project, I don't use TOC widget so I am wondering if you are willing to share your code? Thanks

Amy

[RoseZhou]

Amy:

Check this thread.

I customized my application based on this thread:

http://forums.arcgis.com/threads/2196-save-session-state

Cheers

[AimeiChen]

Amy:

Check this thread.

I customized my application based on this thread:

http://forums.arcgis.com/threads/2196-save-session-state

Cheers

Hi, Rose

Thank you so much for pointing me to the right direction. I am working with flex viewer 3.0, followed all the instructions by Mr. Robert, I made changes on index.template, index.mxml and mapmanager.mxml, compiled my project without any errors, but the state is not able to be restored.
I have part of my source code here, would you please help me debug it? I've spent couple hours in it but still can't figure out.

Appreciated!
Amy

-----index.mxml
private function registerGlobalKeyHandler() :void
{
  stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
//This is what tells JavaScript in the html index to call savesettings before closing
  ExternalInterface.addCallback("savesettings", savesettings);
}

//This is the new function that gets called when the SFV is closed  
public function savesettings():void
            {
             settingsSO = SharedObject.getLocal("MYSFV30SAVEDSETTINGS");
             settingsSO.data[EXTENT] = ViewerContainer.getInstance().mapManager.map.extent;
             var map:Map = ViewerContainer.getInstance().mapManager.map;
             acVisLayers = new ArrayCollection();
            
             MapUtil.forEachMapLayer(map, function(layer:Layer):void {
     var cLayId:int = 0;
     for(var i:Number=0; i<acVisLayers.length -1;i++)
     {
      if(acVisLayers.name == layer.name)
      {
       cLayId = i;
       break;
      }
     }
     var layVisAc:ArrayCollection;
     if (layer is ArcGISDynamicMapServiceLayer) {
      layer.visible = acVisLayers[cLayId].visible;
      ArcGISDynamicMapServiceLayer(layer).visibleLayers = acVisLayers[cLayId].visarray;
     } else if (layer is ArcIMSMapServiceLayer) {
      layer.visible = acVisLayers[cLayId].visible;
      ArcIMSMapServiceLayer(layer).visibleLayers = acVisLayers[cLayId].visarray;
     } else if (layer is ArcGISTiledMapServiceLayer) {
      layer.visible = acVisLayers[cLayId].visible;
     }
     var lvisObj:Object = {
               name: layer.name,
               visible: layer.visible,
               visarray: layVisAc
              }
              acVisLayers.addItem(lvisObj);
    });
             
             settingsSO.data[VISLAYERS] = acVisLayers;
             settingsSO.flush();
            }
//End new function
 
private function handleKeyDown(event:KeyboardEvent) :void
{
if ((event.shiftKey) && (event.keyCode == 27))
  {
  AppEvent.dispatch(AppEvent.SET_MAP_NAVIGATION,null);
  }
}

and my index.template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>ArcGIS Viewer for Flex</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Esri ArcGIS viewer for Flex"/>
        <meta name="keywords" content="Esri, ArcGIS, Flex Viewer"/>
        <meta name="author" content="Esri"/>

        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
             the percentage of the height of its parent container, which has to be set explicitly.  Fix for
             Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show
             if JavaScript disabled.
        -->
        <style type="text/css" media="screen">
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center;
                   background-color: #ffffff; }
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>

        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section >
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <! END Browser History required section -->

        <script type="text/javascript">
            var isIElt9 = false;
        </script>
        <!--[if lt IE 9]>
            <script type="text/javascript">
                isIElt9 = true;
            </script>
        <![endif]-->
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
            var swfVersionStr = "11.1.0";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var isAIR = navigator.userAgent.indexOf("AdobeAIR") != -1;
            if (isAIR || isIElt9)
            {
                // workaround for overlaying tool tips and other content when loaded into an AIR app
                // workaround for cursor issue - https://bugs.adobe.com/jira/browse/SDK-26818
                params.wmode = "opaque";
            }
            var attributes = {};
            attributes.id = "index";
            attributes.name = "index";
            attributes.align = "middle";
            swfobject.embedSWF(
                "index.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
            <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
             JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
             when JavaScript is disabled.
        -->
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
               11.1.0 or greater is installed.
            </p>
            <script type="text/javascript">
                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
            </script>
        </div>
        <!--New JavaScript function for State-->
       <script language="JavaScript" type="text/javascript">

        window.onbeforeunload = clean_up;

     function clean_up()
     {
  var flex = document.index || window.index;
  flex.savesettings();
     }
       </script>
        <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="index">
                <param name="movie" value="index.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p>
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        11.1.0 or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>
   </body>
</html>