topic Re: Collapsible Accordion/Panel, anyone? in ArcGIS API for Flex Questions

Collapsible Accordion/Panel, anyone?

DidumAbraham — Mon, 10 Jan 2011 15:54:07 GMT

Has anyone incorporated a collapsible Accordion/Panel into his/her flex app? I'm not having any luck with either one.

Re: Collapsible Accordion/Panel, anyone?

RobertScheitlin__GISP — Mon, 10 Jan 2011 16:54:37 GMT

Didum,

So when you say collapsible are you looking for some sort of minimizing capability for a panel? An Accordion component collapses its content by default, So I am just a little confused what you are after.

Re: Collapsible Accordion/Panel, anyone?

DidumAbraham — Mon, 10 Jan 2011 20:01:00 GMT

Didum,

So when you say collapsible are you looking for some sort of minimizing capability for a panel? An Accordion component collapses its content by default, So I am just a little confused what you are after.

Yes, I am after a minimizing capability for a panel. I have attached an outlook of the application I'm working on with this post. In the attached file, under "Map Contents", I'm trying to be able to minimize this left panel and also the bottom panel titled "Features : 0" in order to give users a wider screen space for the map.

Re: Collapsible Accordion/Panel, anyone?

RobertScheitlin__GISP — Mon, 10 Jan 2011 20:25:21 GMT

Didum,

It looks like you are really dealing with a VDividedBox.

If that is the case then just give it an id and then call some code like this:

vDivBox.moveDivider(0,10000);

Re: Collapsible Accordion/Panel, anyone?

ReneRubalcava — Mon, 10 Jan 2011 20:57:56 GMT

I have a CollapseContainer skinnable container that I use that can be tweaked via the skin.
https://gist.github.com/773635

Here is the Skin I use to collapse the container on the left of the of the page to a small bar.
https://gist.github.com/773640

Not at work at the moment, so I can't get a screenshot of how it works, but you pretty much let the skin do the work to resize and move the parts.

Re: Collapsible Accordion/Panel, anyone?

DidumAbraham — Tue, 11 Jan 2011 13:57:22 GMT

Didum,

It looks like you are really dealing with a VDividedBox.

If that is the case then just give it an id and then call some code like this:
vDivBox.moveDivider(0,10000);

Robert,

Yes, I'm already using a VDividedBox for the bottom panel not the left panel. I did give the VDividedBox an id of vDivBox and inserted your code above into a function, however, it does not work.

Re: Collapsible Accordion/Panel, anyone?

DidumAbraham — Tue, 11 Jan 2011 14:02:04 GMT

I have a CollapseContainer skinnable container that I use that can be tweaked via the skin.
https://gist.github.com/773635

Here is the Skin I use to collapse the container on the left of the of the page to a small bar.
https://gist.github.com/773640

Not at work at the moment, so I can't get a screenshot of how it works, but you pretty much let the skin do the work to resize and move the parts.

Rene,

I'm now looking into the links you posted.

Re: Collapsible Accordion/Panel, anyone?

RobertScheitlin__GISP — Tue, 11 Jan 2011 14:08:59 GMT

Didum,

Strange I tested this code and it worked fine for me. Maybe you should post your code for examination.

Re: Collapsible Accordion/Panel, anyone?

DidumAbraham — Sun, 12 Dec 2021 00:02:36 GMT

Robert,

I should mention that our REST API directory is local and in the process of being made public.

Errors occurred:

The text that you have entered is too long (13362 characters). Please shorten it to 10000 characters long.

I will post it as mush as I'm allowed to...

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 xmlns:esri="http://www.esri.com/2008/ags"
 pageTitle="Didum: Flex Facility Map, Query-zoom"
 styleName="plain" xmlns:samples="com.esri.ags.samples.*">
  
 <fx:Script>
  <![CDATA[
   import com.esri.ags.FeatureSet;
   import com.esri.ags.Graphic;
   import com.esri.ags.tasks.supportClasses.Query;
   import com.esri.ags.tools.NavigationTool;
   import com.esri.ags.utils.GraphicUtil;
   
   import mx.controls.Alert;
   import mx.events.DataGridEvent;
   import mx.events.ListEvent;
   import mx.events.MoveEvent;
   import mx.rpc.AsyncResponder;    
     
   public var g:Graphic; //added public keyword
   
   private function doQuery():void
   {
    // clear the graphics layer
    myGraphicsLayer.clear();
    
    
    var query:Query = new Query();
    if(rdBtn0.selected === true){ 
     query.outSpatialReference = myMap.spatialReference; 
     query.returnGeometry = true; 
     query.where = "LOWER (ADDRESS1) LIKE '%"+ fText.text + "%'"; 
     query.outFields = ["ADDRESS1","BUILDING_TYPE","COST_CENTER","INVENTORY_NUMBER",
      "PHONE_NUMBER","SQUARE_FOOTAGE","UKEY,YEAR_BUILT"];
     }else if(rdBtn1.selected === true){
     query.outSpatialReference = myMap.spatialReference;
     query.returnGeometry = true;
     query.text = fText.text; //Inventory=ObjectID, there4 query.text 
     query.outFields = ["ADDRESS1","BUILDING_TYPE","COST_CENTER","INVENTORY_NUMBER",
      "PHONE_NUMBER","SQUARE_FOOTAGE","UKEY,YEAR_BUILT"];
    }else if(rdBtn2.selected === true){
     query.outSpatialReference = myMap.spatialReference;
     query.returnGeometry = true;
     query.where = "YEAR_BUILT='"+ fText.text +"'"; 
     query.outFields = ["ADDRESS1","BUILDING_TYPE","COST_CENTER","INVENTORY_NUMBER",
      "PHONE_NUMBER","SQUARE_FOOTAGE","UKEY,YEAR_BUILT"];     }
    
    
    queryTask.execute(query, new AsyncResponder(onResult, onFault));
    function onResult(featureSet:FeatureSet, token:Object = null):void
    {
     
     if (featureSet.features.length == 0)
     {
      Alert.show("City Name search is case sensitive.\nNo data found. Please try again.");
     }
     else
     {
      var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(featureSet.features);
      if (graphicsExtent)
      {
       myMap.extent = graphicsExtent.expand(4); 
       bPanel.title = "Features : " + featureSet.features.length;
       myGrid.visible = true;
      }
     }
    }
    function onFault(info:Object, token:Object = null):void
    {
     Alert.show(info.toString());
    }
   }
   
   
   protected function vDivBox_moveHandler(event:MoveEvent):void
   {
    // TODO Auto-generated method stub
    vDivBox.move(0,10000);
   }

  ]]>
 </fx:Script>
 
 <fx:Declarations>
  
  <!--Fill Polygon with purple & draws solid blue line around Polygon on final expansion-->
  <esri:SimpleFillSymbol id="sms_fExp" style="solid" alpha="0.6" color="0x6600FF">
   <esri:SimpleLineSymbol width="4" color="0xFF0000" style="solid"/>
  </esri:SimpleFillSymbol>
  
  <!-- Fill, draws solid red line around Polygon on initial expansion -->
  <esri:SimpleFillSymbol id="sfs_iExp" alpha="0.10" style="solid">
   <esri:SimpleLineSymbol width="4" color="0x0000FF" style="solid"/>
  </esri:SimpleFillSymbol>
  
  <!-- Layer with US States -->
  <esri:QueryTask id="queryTask" showBusyCursor="true"
   url="http://testgeonexus/ArcGIS/rest/services/Facilities/BUILDING_SO_V/MapServer/0"
   useAMF="true"/>
     
  <!--navigation tool-->
  <esri:NavigationTool id="navTool" map="{myMap}"/>
 </fx:Declarations>

Re: Collapsible Accordion/Panel, anyone?

RobertScheitlin__GISP — Tue, 11 Jan 2011 18:14:36 GMT

Didum,

Here is your code with my changes. I comment all my work.

Re: Collapsible Accordion/Panel, anyone?

DidumAbraham — Tue, 11 Jan 2011 19:47:00 GMT

Robert,

Thank you for your work. About the left panel, I did use the help suggested by Rene and got it to work. Thanks Rene.

Re: Collapsible Accordion/Panel, anyone?

DidumAbraham — Sun, 12 Dec 2021 00:02:39 GMT

Continues...

 <!-- Left Panel -->
 <s:Panel id="leftPanel" height="100%" color="0x3300FF" title="Map Contents" 
  borderVisible="false" backgroundColor="0xefefef" direction="ltr" left="5" 
  right="5" bottom="5" top="2.5">  
  
  <mx:TabNavigator height="150" width="280" backgroundColor="0xB2BFC6" color="0x000000">
      
   <s:NavigatorContent id="myTab1" label="Search Item" color="0xEEEEEE">
    <!--<mx:Box borderStyle="solid" width="270" height="110" backgroundColor="0xEEEEEE">-->
     <s:BorderContainer backgroundColor="0xEEEEEE" borderVisible="false" 
      left="5" right="5" top="0">  
      <s:layout>
       <s:HorizontalLayout horizontalAlign="left"/>
      </s:layout>
      <s:TextInput id="fText" enter="doQuery()" width="100" focusColor="0xa2d2ff" 
       toolTip="Select a radio-button 
 then enter some data here"
       color="0x66CCFF" borderColor="0xFF0000" fontSize="12" fontWeight="bold" top="10"/>
      <s:Button click="doQuery()" label="Query" color="0x000000"/>
     </s:BorderContainer>
     <!--Radio Buttons-->
     <s:VGroup horizontalAlign="left" gap="10" left="15" top="30" color="0x000000">
      <mx:RadioButton id="rdBtn0" selected="true" fontWeight="bold" 
       label="Search by City Name" labelPlacement="right"/>
      <mx:RadioButton id="rdBtn1" selected="false" fontWeight="bold" 
       label="By Inventory Number" labelPlacement="right"/>
      <mx:RadioButton id="rdBtn2" selected="false" fontWeight="bold" 
       label="Also by Year Built" labelPlacement="right"/>
     </s:VGroup>
    <!--</mx:Box>-->
   </s:NavigatorContent>
   
   <s:NavigatorContent id="myTab2" label="Map Layer" color="0xEEEEEE">   
    <!--Drop-DownList-->
    <mx:Box borderStyle="solid" left="5" paddingTop="10" paddingBottom="10" paddingLeft="10"
     paddingRight="10" width="270" height="110" backgroundColor="0xEEEEEE">
     <s:DropDownList id="myURL" width="190" horizontalCenter="0" requireSelection="true" 
      selectedIndex="1" color="0x000000">
      <s:ArrayList>
       <fx:String>Facilities/PARCEL_SO_V</fx:String>
       <fx:String>Facilities/BUILDING_SO_V</fx:String>
       <!--<fx:String>Boundaries/Boundaries</fx:String>-->
       <fx:String>Basemap/Basemap_Overlay</fx:String>
      </s:ArrayList>
     </s:DropDownList>
    </mx:Box>
   </s:NavigatorContent>
  </mx:TabNavigator>  
  
  
 </s:Panel>
 
 
 <!-- Center Panel -->
 <s:Panel id="centerPanel" width="100%" height="100%" color="0x3300FF" 
  title="Facility Web Map Application" borderVisible="true" autoLayout="true"
  backgroundColor="0xFFFFFF" direction="ltr" left="290" right="0" bottom="5" top="2.5">
  
  <!--Navigation ToolBar Buttons-->
  <s:controlBarLayout>
   <s:HorizontalLayout gap="10" horizontalAlign="center" paddingBottom="5"
    paddingLeft="5" paddingRight="5" paddingTop="5"/>
  </s:controlBarLayout>
  <s:controlBarContent>
   <s:HGroup gap="10" width="30%">
    <mx:Button click="navTool.zoomToPrevExtent();" toolTip="Previous Extent"
     disabledIcon="@Embed('assets/images/left.gif')" 
     downIcon="@Embed('assets/images/left.gif')"
     enabled="{!navTool.isFirstExtent}"
     overIcon="@Embed('assets/images/left.gif')" 
     upIcon="@Embed('assets/images/left.gif')" width="35" height="35"/>
    
    <mx:Button click="navTool.zoomToNextExtent();" toolTip="Next Extent"
     disabledIcon="@Embed('assets/images/right.gif')" 
     downIcon="@Embed('assets/images/right.gif')"
     enabled="{!navTool.isLastExtent}"
     overIcon="@Embed('assets/images/right.gif')"
     upIcon="@Embed('assets/images/right.gif')" width="35" height="35"/>
    
    <mx:Button click="navTool.zoomToFullExtent();" toolTip="Full Extent"
     downIcon="@Embed('assets/images/web.gif')"
     overIcon="@Embed('assets/images/web.gif')"
     upIcon="@Embed('assets/images/web.gif')" width="35" height="35"/>
    
    <mx:Button click="{myGraphicsLayer.clear(); navTool.deactivate();
     bPanel.title='Features : 0'; myGrid.visible=false;}" 
     downIcon="@Embed('assets/images/cancel.gif')"
     enabled="true" toolTip="Clear Graphic"
     overIcon="@Embed('assets/images/cancel.gif')"
     upIcon="@Embed('assets/images/cancel.gif')" width="35" height="35"/>
    <!--More Navigation Tools-->
    <mx:Button id="myZoomIn" click="navTool.activate(NavigationTool.ZOOM_IN);"
     disabledIcon="@Embed('assets/images/zoomin.gif')" 
     downIcon="@Embed('assets/images/zoomin.gif')"
     enabled="{!navTool.deactivate()}" toolTip="ZoomIn"
     overIcon="@Embed('assets/images/zoomin.gif')" 
     upIcon="@Embed('assets/images/zoomin.gif')" width="35" height="35"/>
    <mx:Button id="myZoomOut" click="navTool.activate(NavigationTool.ZOOM_OUT);"
     disabledIcon="@Embed('assets/images/zoomout.gif')" 
     downIcon="@Embed('assets/images/zoomout.gif')"
     enabled="{!navTool.deactivate()}" toolTip="ZoomOut"
     overIcon="@Embed('assets/images/zoomout.gif')"
     upIcon="@Embed('assets/images/zoomout.gif')" width="35" height="35"/>
    <mx:Button id="myPan" click="navTool.activate(NavigationTool.PAN);"
     disabledIcon="@Embed('assets/images/hand.gif')" 
     downIcon="@Embed('assets/images/hand.gif')"
     enabled="{!navTool.deactivate()}" toolTip="Pan"
     overIcon="@Embed('assets/images/hand.gif')"
     upIcon="@Embed('assets/images/hand.gif')" width="35" height="35"/>
   </s:HGroup>
  </s:controlBarContent>
  
  <mx:VDividedBox id="vDivBox" width="100%" height="100%" move="vDivBox_moveHandler(event)">
   <esri:Map id="myMap" openHandCursorVisible="false" logoVisible="false">
    <esri:extent>
     <esri:Extent xmin="-10853631.07" ymin="4792323.73" xmax="-9933940.75" ymax="5518781.25">
      <esri:SpatialReference wkid="102113"/>
     </esri:Extent>
    </esri:extent>
    <!--Current map layers-->
    <esri:ArcGISTiledMapServiceLayer visible="{getId.selectedIndex == 0}" alpha="1.0"
     url="http://testgeonexus/ArcGIS/rest/services/Basemap/Basemap/MapServer"/>
    <esri:ArcGISTiledMapServiceLayer visible="{getId.selectedIndex == 1}" alpha="1.0"
     url="http://testgeonexus/ArcGIS/rest/services/AerialImagery/Aerial_Imagery/MapServer"/> 
    <esri:ArcGISDynamicMapServiceLayer id="myDynamicService"
                                                                load="myDynamicService.defaultVisibleLayers()"
     url="http://testgeonexus/ArcGIS/rest/services/{myURL.selectedItem}/MapServer" alpha="1.0"/>
    
    
    <esri:GraphicsLayer id="myGraphicsLayer" symbol="{sfs_iExp}"
     graphicProvider="{queryTask.executeLastResult.features}"/>
   </esri:Map>
   <!--<samples:LayerTOC width="210" height="100%" mapLayer="{myDynamicService}"/>-->
   <mx:Panel id="bPanel" width="100%" height="38%" color="0x000000" 
    title="Features : 0" bottom="0" left="0" right="0">
    <mx:DataGrid id="myGrid" width="100%" height="100%" visible="false"
     dataProvider="{queryTask.executeLastResult.attributes}" "/> 
   </mx:Panel>   
  </mx:VDividedBox>
 </s:Panel>
 
 <!--Standalone ButtonBar--> 
 <s:ButtonBar id="getId" selectedIndex="0" right="5" top="10">
  <s:dataProvider>
   <s:ArrayList>
    <fx:String>Basemap</fx:String>
    <fx:String>Imagery</fx:String>
   </s:ArrayList>
  </s:dataProvider>
 </s:ButtonBar>
 
</s:Application>

and this link:
http://help.arcgis.com/en/webapi/flex/samples/index.html