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; } } }

Save session state

Doug_Guess

I'm looking to modify the SFV to handle saving a users session state. More specifically, I would like to be able to save what layers in the LiveMapsWidget are on, extent the map is at, etc.... So, when that user leaves the map, maybe a prompt asking if they would like to "save their settings". Then, when they return, another prompt asking if they would like to "restore their settings" and everything is as it was, visible layers, extent, etc... something like that.

Has anyone implemented something like this? Casey Bentz sent me some sample code (thanks Casey!) but it's not using the SFV and I'm having some difficulty getting this to work. I believe this can be accomplished using SharedObjects but not exactly sure how to get it to work with the SFV.

I read at http://forums.esri.com/Thread.asp?c=158&f=2421&t=284721&mc=27#msgid883724 that Robert Scheitlin has an implementation for this. Robert, any help would be great!

Thanks.

Encontre mais publicações marcadas com

Accepted answers

All comments

AntGiles

Jessica,

I am using a shared object in each widget to retain its state, to access the properties of the widget, I have used the following:

this.x --- x position of wid
this.y --- y position of widget
this.wTemplate.width --- width of widget
this.wTemplate.height --- height of widget

Hope this helps

Regards

Anthony

JessicaCondron

Ashley I am trying to do the same thing with the widgets but haven't made it as far as you. How did you access the widget width, height, and x/y position? Thanks!

AshleyOwens

I am able to save widget information (state, width, height, x/y position), but am having trouble setting these values on the widgets when the app loads the next time. There is one exception: if the widget is set to preload in the config XML, it is loaded into the WidgetManager and I can retrieve it and set the values -

var wgt:IBaseWidget = ViewerContainer.getInstance().widgetManager.getWidget(Number(acWidgets.id),false);
wgt.setState(wgtObj.state);
if(wgt.getState() != WidgetStates.WIDGET_MINIMIZED)
{
 wgt.initialWidth = wgtObj.width;
 wgt.initialHeight = wgtObj.height;
}
wgt.setXYPosition(Number(acWidgets.x),Number(acWidgets.y));
wgt.setPreload(wgt.getState());

How can other widgets be accessed into an IBaseWidget object? I have tried several things such as retrieving from ModuleInfo -

wgt = moduleInfo.factory.create() as IBaseWidget;

I haven't found anything that works. Thanks for any insight!

rscheitlin

Ashley,

No this is just a code sample to get developers started. It is nearly two years old and I don't even remember what version I developed this for.

AshleyOwens

Hi Robert! Is this code available in the Code Gallery for ArcGIS API for Flex? What Flex & ArcGIS Server versions are compatible with the code?

Thanks for all your great work!
Ashley

rscheitlin

James,

This has always been an issue with the toc component, it does not update to programmatic changes to a layers visibility...

JamesKo

Robert,

This has been a cool addition to my website but I did notice something unusual with group layers. The checkbox for the group layer is not checked even though I had selected it in the previous session; however, the visible layers under the group layer are visible on the map.

rscheitlin

Daniel,

Try this code for that, maybe I got it all here:

//This is code for MapManager.mxml

   //config
      private function config(event:AppEvent):void
      {      
       configData = event.data as ConfigData;

       map = new Map();
       map.id = "map";
       map.zoomSliderVisible = false;
       map.addEventListener(MapEvent.LOAD, mapLoadComplete);
       this.addChild(map);
          SiteContainer.dispatchEvent(new AppEvent(AppEvent.MAP_LOADED, false, false, map));
          
          var infoContainer:Canvas = new Canvas();
          infoContainer.percentWidth = 100;
          infoContainer.percentHeight = 100;
          infoContainer.horizontalScrollPolicy = "off";
          infoContainer.verticalScrollPolicy = "off";
          this.addChild(infoContainer);
          infoPopup = new InfoPopup();
          infoPopup.map = map;
          infoContainer.addChild(infoPopup);
         
          navToolbar = new Navigation();
          navToolbar.map = map;
          
          drawToolbar = new Draw();
          drawToolbar.map = map;
          drawToolbar.addEventListener(DrawEvent.DRAW_END, onDrawEnd);
          
          getDefaultStatus();
          
          var i:int = 0;
         
          for (i = 0; i < configData.configExtents.length; i++)
          {
           var id:String = configData.configExtents.id;
           var ext:String = configData.configExtents.extent;
           var extArray:Array = ext.split(" ");
           var extent:Extent = new Extent(Number(extArray[0]), Number(extArray[1]), Number(extArray[2]), Number(extArray[3]));
           if (id == "full")
           {
            fullExtent = extent;
           }
           if (id == "initial")
           {
            map.extent = extent;
           }
          }
       
    for (i = 0; i < configData.configMap.length; i++)
          {
           var label:String  = configData.configMap.label;
           var type:String = configData.configMap.type;
           var url:String =  configData.configMap.url;
           var visible:Boolean = configData.configMap.visible;
           var alpha:Number = Number(configData.configMap.alpha);
           var style:String = configData.configMap.style;
           
           switch (type.toLowerCase())
     {
      case "tiled":
      {
       var tiledlayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer(url);
       tiledlayer.id = label;
       tiledlayer.name = label;
       tiledlayer.visible = visible;
       tiledlayer.alpha = alpha;
       map.addLayer(tiledlayer);
       break;
      }
       
      case "dynamic":
      {
       var dynlayer:ArcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(url);
       dynlayer.id = label;
       dynlayer.name = label;
       dynlayer.proxyURL = configData.proxy;
       dynlayer.visible = visible; 
       dynlayer.alpha = alpha;
       map.addLayer(dynlayer);
       break;
      }
      case "virtualearth":
      {
       var veTiledLayer:VETiledLayer =  new VETiledLayer();
       veTiledLayer.id = label;
        veTiledLayer.tokenURL = url;
        veTiledLayer.environment = "production";
        veTiledLayer.visible = visible; 
        veTiledLayer.alpha = alpha;
        veTiledLayer.mapStyle = style;
        veTiledLayer.name = label;
        map.addLayer(veTiledLayer);
        break;
      } 
     }
     
          }
      
          map.panArrowsVisible = false;
       map.zoomSliderVisible = true;
       map.logoVisible = true;
    
    Alert.show("Do you want to load your last session state? This will restore the maps extent " +
       "and the visiblity of the layers that were set in your last session." +
       "Do you want to load your previous session settings?", "Question", Alert.YES|Alert.NO, null, 
       alertClickHandler, expClass, Alert.YES);
      }
      
      private function alertClickHandler(event:CloseEvent):void
   {
    if (event.detail==Alert.YES)
    {
     //This is where we are loading the state from the saved object       
        settingsSO = SharedObject.getLocal("MYSFV13SAVEDSETTINGS");
        if (settingsSO.size > 0) {
         callLater(setExt,[settingsSO.data.extent]);
         function setExt(obj:Object):void
         {
          var mext:Extent = new Extent(obj.xmin, obj.ymin, obj.xmax,obj.ymax,map.spatialReference);
          map.extent = mext;
         }
         var acVisLayers:ArrayCollection = settingsSO.data.vislayers as 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;
       }
      });
     }
       }

DanielLewis

Daniel,

I tested this again and low and behold it was not working, so I dug in and guess there is some syntax errors in the JavaScript portion so try replacing your index.template.html with this:

<!-- saved from url=(0014)about:internet -->
<html lang="en">

<!-- 
Smart developers always View Source. 

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>
</head>

<body scroll='no'>
<script language="JavaScript" type="text/javascript">
<!--
  AC_FL_RunContent(
     "src", "${swf}",
     "width", "${width}",
     "height", "${height}",
     "align", "middle",
     "id", "${application}",
     "quality", "high",
     "bgcolor", "${bgcolor}",
     "name", "${application}",
     "allowScriptAccess","sameDomain",
     "type", "application/x-shockwave-flash",
     "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
// -->
</script>
<script language="JavaScript" type="text/javascript">
 window.onbeforeunload = clean_up;

 function clean_up()
 {
  var flex = document.${application} || window.${application};
  flex.savesettings();
 }
</script>
<noscript>
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="${application}" width="${width}" height="${height}"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>
 </object>
</noscript>
</body>
</html>

Robert,

Thanks, that worked. Are the variables in the index.html (i.e. ${application}) supposed to be picked up from another file? I have to go through and change them to the application title, file name, etc.

Now I'm going to try to add a popup to ask the user if they want to restore the state or take the default.

rscheitlin

Daniel,

I tested this again and low and behold it was not working, so I dug in and guess there is some syntax errors in the JavaScript portion so try replacing your index.template.html with this:

<!-- saved from url=(0014)about:internet -->
<html lang="en">

<!-- 
Smart developers always View Source. 

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>
</head>

<body scroll='no'>
<script language="JavaScript" type="text/javascript">
<!--
  AC_FL_RunContent(
     "src", "${swf}",
     "width", "${width}",
     "height", "${height}",
     "align", "middle",
     "id", "${application}",
     "quality", "high",
     "bgcolor", "${bgcolor}",
     "name", "${application}",
     "allowScriptAccess","sameDomain",
     "type", "application/x-shockwave-flash",
     "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
// -->
</script>
<script language="JavaScript" type="text/javascript">
 window.onbeforeunload = clean_up;

 function clean_up()
 {
  var flex = document.${application} || window.${application};
  flex.savesettings();
 }
</script>
<noscript>
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="${application}" width="${width}" height="${height}"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>
 </object>
</noscript>
</body>
</html>

DanielLewis

Daniel,

Yes it is the browser window closing that fires the save code. The below code is triggered from the index.html. So one of the first things to do is look for this line in the index.html that you are putting on the server. As far as which files need to be moved to the server I would think just the index.swf and index.html, but I normally just grab them all.
window.onbeforeunload = clean_up;

I confirmed that my indexl.html does have that line:

<html lang="en">
<!-- 
////////////////////////////////////////////////////////////////////////////////
//
// Copyright © 2008 - 2009 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>/FlexViewer/License.txt
//
////////////////////////////////////////////////////////////////////////////////
// -->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="ESRI, ArcGIS, Flex, Flex SDK, Viewer, GeoWeb"/>
  <meta name="description" content="Flex Viewer to demonstrate the best practice to develop GeoWeb application by leveraging the power of spatial technologies"/>
  <meta name="revised" content="version 1.0, Nov 14, 2008" />
  
  <title>Viewer</title>

  <script src="AC_OETags.js" language="javascript"></script>

  <style>
    body { margin: 0px; overflow:hidden }
  </style>
  
</head>



<body scroll='no'>
<script language="JavaScript" type="text/javascript">
<!--
  AC_FL_RunContent(
     "src", "index",
     "width", "100%",
     "height", "100%",
     "align", "middle",
     "id", "index",
     "quality", "high",
     "bgcolor", "#6e6e6e",
     "name", "index",
     "allowScriptAccess","sameDomain",
     "type", "application/x-shockwave-flash",
     "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
// -->
</script>


<!--New JavaScript function for State-->
<script language="JavaScript" type="text/javascript">

 window.onbeforeunload = clean_up;

 function clean_up()
 {
  var flex = document.${application} || window.${application};
  flex.savesettings();
 }
</SCRIPT>
<!--End New JavaScript function for State-->


<noscript>
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="index" width="100%" height="100%"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="index.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#6e6e6e" />
   <param name="allowScriptAccess" value="sameDomain" />
   <embed src="index.swf" quality="high" bgcolor="#6e6e6e"
    width="100%" height="100%" name="index" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>
 </object>
</noscript>
</body>
</html>

And, I've double-checked to make sure that all of the changes you listed in your files are in mine.

rscheitlin

Daniel,

If you are talking about the javascript code than it is

alert('hello');

.

If you are talking the ActionScript code then it is

import mx.controls.Alert;
Alert.show("Hello");

DanielLewis

Daniel,

Yes it is the browser window closing that fires the save code. The below code is triggered from the index.html. So one of the first things to do is look for this line in the index.html that you are putting on the server. As far as which files need to be moved to the server I would think just the index.swf and index.html, but I normally just grab them all.
window.onbeforeunload = clean_up;

Robert,

Thanks again for your help. I'll give that a try and report back.

Also, can you tell me how to do the equivalent of a wscript.echo type statement so I can place that type of statement in the code and have it show a popup at that point so I can see if it is making it into specific routines for debugging/troubleshooting.

rscheitlin

Daniel,

Yes it is the browser window closing that fires the save code. The below code is triggered from the index.html. So one of the first things to do is look for this line in the index.html that you are putting on the server. As far as which files need to be moved to the server I would think just the index.swf and index.html, but I normally just grab them all.

window.onbeforeunload = clean_up;

DanielLewis

Robert,

Sorry for bringing up an old thread, but I'm trying to implement your code you provided in this thread to allow session state to be saved. I've copied your changes to my index.mxml, mapmanager.mxml and index.html, compiled and copied the new index.html and index.swf to the website and the state is not being restored.

Is the index.swf and index.html the only post-build files that will need to be copied over?

What triggers the function to save the state at the sfv close (clicking on the web browser close button?).

rscheitlin

Mattias,

You need to do something along this line in the mapManager

for(var w:int=0; w<configData.widgetContainers.length; w++)
    {
     for(var wig:int=0; wig<configData.widgetContainers.widgets.length; wid++)
     {
      var wgt:Object = configData.widgetContainers.widgets[wid];
      var preload:String  = wgt.preload;
      var label:String    = wgt.label;
      var icon:String     = wgt.icon;
      var config:String   = wgt.config;
      var url:String      = wgt.url;
      var headless:String = wgt.headless;
     }
    }

mattias_j

I wanted this functionality in my customized FlexViewer 2.1, and thought I could try this code from Robert. I copied the changes that Robert made to the files, and pasted the into the corresponding places in my code and then step by step got rid of the errors (caused by using SFV 1.3 code in SFV 2.1).
Then I was actually surprised to see that it seems to be working fine; extent, turned on layers and even the check-boxes in my TOC.

I would also like to be able to save which widget that are open, does anyone know how to do that? I'm guessing the first thing I need to know is how to programatically identify which widget that are opened and closed and then programatically open widgets.

Doug_Guess

Thanks Robert. However, when I try to download the zip file, I get an error stating that the file is corrupt. Would you mind posting another zip file? Or, you could just email me the files (dguess@lancaster.ne.gov)

Thanks again!

rscheitlin

Doug,

This is far from complete but it saves the extent and all layers visibility when the SFV is closed and reloads those when the SFV opens. It uses the Flash Player shared objects. One of the big problems is that the LiveMapsWidget's TOC does not update based on programmatic changes to layers visibility. There are many things left to do like ask if the user wants to load the last state when the SFV opens.

SFV_State.zip

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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