topic Re: Save session state in ArcGIS API for Flex Questions

Save session state

DouglasGuess — Thu, 08 Apr 2010 18:23:46 GMT

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.

Re: Save session state

RobertScheitlin__GISP — Thu, 08 Apr 2010 23:52:48 GMT

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.

Save session state

DouglasGuess — Fri, 09 Apr 2010 00:55:50 GMT

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!

Re: Save session state

MattiasEkström — Fri, 07 Jan 2011 09:21:29 GMT

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.

Re: Save session state

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:35:09 GMT

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

Re: Save session state

DanielLewis — Fri, 01 Apr 2011 18:56:02 GMT

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?).

Re: Save session state

RobertScheitlin__GISP — Sat, 02 Apr 2011 12:29:49 GMT

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;

Re: Save session state

DanielLewis — Sat, 02 Apr 2011 12:39:23 GMT

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.

Re: Save session state

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:35:11 GMT

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");

Re: Save session state

DanielLewis — Sat, 11 Dec 2021 13:35:14 GMT

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.

Re: Save session state

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:35:17 GMT

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>

Re: Save session state

DanielLewis — Sat, 11 Dec 2021 13:35:19 GMT

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.

Re: Save session state

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:35:22 GMT

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

Re: Save session state

JamesKo — Mon, 04 Apr 2011 15:04:35 GMT

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.

Re: Save session state

RobertScheitlin__GISP — Mon, 04 Apr 2011 17:43:43 GMT

James,

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

Re: Save session state

AshleyOwens — Tue, 14 Feb 2012 19:22:50 GMT

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

Re: Save session state

RobertScheitlin__GISP — Tue, 14 Feb 2012 19:33:39 GMT

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.

Re: Save session state

AshleyOwens — Sat, 11 Dec 2021 13:35:24 GMT

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!

Re: Save session state

JessicaCondron — Fri, 16 Nov 2012 00:49:46 GMT

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!

Re: Save session state

AnthonyGiles — Fri, 16 Nov 2012 05:36:13 GMT

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