topic Re: floatingPane in ArcGIS JavaScript Maps SDK Questions

floatingPane

RichardMoussopo — Tue, 16 Sep 2014 13:22:12 GMT

I have a declarative floatingPane that opens on a button click. but once closed, it won't open again. Apparently, the floating pane get destroyed after closing. how do I overwrite that behavior?

<div data-dojo-type="dijit/form/Button" id="measure" data-dojo-props="iconClass:'measureIcon'" title="Measure"

onclick="showDialogMeasure()">

</div>

<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"

data-dojo-props="resizable:true, dockable:false, title:'Measurement'"

style="position: absolute; top: 30%; left: 25%; width: 280px; height: 180px; visibility: hidden; padding: 0; margin: 0;">

</div>

function showDialogMeasure() {
    if (dijit.byId("dFloatingPane").style.visibility === "hidden") {
        dijit.byId("dFloatingPane").show();
    }
    dijit.byId("dFloatingPane").show();
  
}

Re: floatingPane

RiyasDeen — Tue, 16 Sep 2014 13:45:12 GMT

Hi Richard,

I had one hell of a time trying to manipulate the default floatingpane close behaviour. Then finally ended up recreating the floating pane every time i required it. Here's an extract if it helps.

createMeasurement: function () {
  console.log("Entered Method: " + arguments.callee.nom);
  // On show move the top position by height of toolbar. This needs to be done if using API version 3.0 or above. and not needed for API 2.8 or below.
  // Same has to be done for left position using contents pane width, if contents panel is left oriented.

  this.deleteWidgetsRecursive("measurementPanel");
  var holder = new dojo.create('div', { 
  id: 'measurementPanelHolder'
  });
  this._floatingContainer.containerNode.appendChild(holder);
  this._measurementPanel = new dojox.layout.FloatingPane({
  id: "measurementPanel",
  title: "Measurement",
  closable: true,
  resizable: false, 
  dockable: false,
  isLayoutContainer: true,
  doLayout: true,
  dockTo: this._dock,
  style: 'top:25px;left:0px;width:210px;height:120px;z-index:101;'
  }, dojo.byId('measurementPanelHolder')).placeAt(this._floatingContainer.containerNode, "last");
  this._measurementPanel.containerNode.appendChild(new dojo.create('div', { 
  id: 'measurementDiv',
  style: 'font-family: tahoma; font-size: medium;'
  }
  )
  );
  //dojo.connect(this._measurementPanel, "onShow", dojo.hitch(this, function () { this._measurementPanel.isVisible = true; }));
  this._measurementWidget = new esri.dijit.Measurement({
  map: this._map,
  defaultAreaUnit: esri.Units.SQUARE_KILOMETERS,
  defaultLengthUnit: esri.Units.KILOMETERS
  }, dojo.byId("measurementDiv")).placeAt(this._measurementPanel.containerNode);

  dojo.connect(this._measurementWidget.area, "onClick", dojo.hitch(this, function () {
  this._map.setMapCursor('url(cursors/Measure_Area.cur), auto');
  }));

  dojo.connect(this._measurementWidget.distance, "onClick", dojo.hitch(this, function () {
  this._map.setMapCursor('url(cursors/Measure_Distance.cur), auto');
  }));

  dojo.connect(this._measurementWidget.location, "onClick", dojo.hitch(this, function () {
  this._map.setMapCursor('url(cursors/Measure_Point.cur), auto');
  }));

  dojo.connect(this._measurementWidget, "onMeasureEnd", dojo.hitch(this, function(activeTool,geometry){
  if (activeTool === "location") {
  this.setCursorToActiveTool();
  }
  }));

  dojo.connect(this._measurementPanel.closeNode, "onclick", dojo.hitch(this, function(){
  this.setCursorToActiveTool();
  }));

  this._measurementPanel.startup();
  this._measurementWidget.startup();
  },

Re: floatingPane

StevenGraf1 — Tue, 16 Sep 2014 14:01:58 GMT

Here's how I achieve this affect. Set the class to display none in your css.

<img id="layerID" alt="" src="images\layers.png" Title="Layers" onclick="toggle('layerList')" />
<div id="layerList" class="floating-layerMenuWhite2" style="width:250px; height:400px;">
</div>

Re: floatingPane

KenBuja — Tue, 16 Sep 2014 17:23:00 GMT

What I've done with the FloatingPane in my application is to create it with the closable property set to false to prevent it from being closed. The downarrow control still lets the user "close" it by hiding it.

<div id="divFloatingPane"
    data-dojo-type="dojox/layout/FloatingPane"
    data-dojo-props="resizable:false, dockable:true, closable:false, title:'test'"
    style="position:absolute;top:50px;left:50px;width:300px;height:220px;visibility:hidden;">
</div>

In my script, I use this to get a reference to the FloatingPane

fpVideo = registry.byId("divFloatingPane");

and I can then use

fpVideo.show();

when I want to open it programmatically.

Re: floatingPane

RichardMoussopo — Tue, 16 Sep 2014 17:56:21 GMT

Re: floatingPane

riyasdeen_b proposition to rewrite the entire code for just closing and reopening the floating pane, I think is too much. kenbuja‌'s short-cut looks interesting, but still trying to figure out how to may be add a close link in the title bar to hide the panel on click event....

Re: floatingPane

KenBuja — Tue, 16 Sep 2014 18:28:29 GMT

Richard, this is what my floating pane looks like

The down arrow in the upper right corner is what hides the pane. If you want access to the hide event, this is the code that fires it

aspect.after(fpVideo, 'hide', function () { console.log("aspect hide"); });

Re: floatingPane

RichardMoussopo — Tue, 16 Sep 2014 18:45:13 GMT

Thank you Ken,

but my floatingPane does not seem to have that down arrow. how do you get the narrow down to show up like yours?

as you can see bellow, my floatingPanel after setting to false the closable option and still no down narrow

Re: floatingPane

KenBuja — Tue, 16 Sep 2014 18:52:45 GMT

Try setting dockable to true

<!--Dialog Measurements-->
    <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
        data-dojo-props="resizable:true, dockable:true, closable:false, title:'Measurement'"
        style="position: absolute; top: 30%; left: 25%; width: 280px; height: 180px; visibility: hidden; padding: 0; margin: 0;">
        <div id="measurementDiv" class="divMeasurement"></div>
   </div>

Re: floatingPane

RichardMoussopo — Tue, 16 Sep 2014 19:11:53 GMT

still nothing

Re: floatingPane

StevenGraf1 — Tue, 16 Sep 2014 19:17:06 GMT

You shouldn't have to do anything special with the measurement widget. All you need to do is load in the correct modules and take the code from ESRI and put it in your application. I'm sure you're already using this sample.

Here is my HTML.

<div style="position:absolute; right:10px; bottom:40px; z-Index:999;-webkit-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49); -moz-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49); box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49);">
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
            <div id="measurementDiv"></div>          
          </div>
        </div>

Re: floatingPane

KenBuja — Tue, 16 Sep 2014 19:21:49 GMT

In my FloatingPane, I also have resizable set to false

Re: floatingPane

KenBuja — Tue, 16 Sep 2014 19:58:41 GMT

Take a look at this JSBin code that seems to work properly.

Re: floatingPane

RichardMoussopo — Tue, 16 Sep 2014 20:28:25 GMT

Thank you Steven,

I could just use a simple div, but I do like the idea of the floating pane for my other tools and being able the move the panel around the page...

I wish the floating panel could be that simple, now it's almost 8 hours that I am trying to figure this thing out!

Re: floatingPane

RichardMoussopo — Tue, 16 Sep 2014 20:39:14 GMT

Thanks Ken,

your short-cut is a really nice work around.

mine still does not show the down arrow but it does hide when I click on the top right corner of the title pane

Re: floatingPane

KenBuja — Tue, 16 Sep 2014 20:43:14 GMT

Did you include the FloatingPane.css?

Re: floatingPane

RichardMoussopo — Tue, 16 Sep 2014 20:55:57 GMT

Yes I did.

found it. was the image link in my css...

.dojoxFloatingMinimizeIcon {

background:url('../../../dijit/themes/tundra/images/spriteArrows.png') no-repeat 0px center;

width:7px;

margin: 0px 4px;

overflow:hidden;

float:right;

}

thank you.

for now I am using this short-cut even thought it is just minimizing the panel on bottom of of screen.

Thank you Ken

Re: floatingPane

AdrianMarsden — Wed, 17 Sep 2014 12:04:42 GMT

Have a read of https://community.esri.com/message/342697?sr=search&searchId=e912b943-0f92-4cca-9ce3-093c5d40d80e&searchIndex=10#342697

A lot there about styling floating Panes

Re: floatingPane

TedChapin — Wed, 17 Sep 2014 21:06:51 GMT

The FloatingPane documentation mentions a way to overwrite the close behavior using a subclass.

http://dojotoolkit.org/reference-guide/1.10/dojox/layout/FloatingPane.html#dojox-layout-floatingpane

When the widget is closed via the close button, it can no longer be shown: FloatingPane destroys itself when the close button is pressed. You must create a subclass of FloatingPane to override this behavior.

It would be good to hammer out these details so you can have a closable and reopenable floating pane that remembers the state of its contents.

Re: floatingPane

DavidStajan — Thu, 23 Oct 2014 17:13:53 GMT

I've used this implementation of a floating widget in my app and it worked great. There might be some useful code in there for others so I'm sharing the link

Spatial Agent GIS