Select to view content in your preferred language

Collapsible Accordion/Panel, anyone?

1307
11
01-10-2011 07:54 AM
DidumAbraham
New Contributor II
Has anyone incorporated a collapsible Accordion/Panel into his/her flex app? I'm not having any luck with either one.
Tags (2)
0 Kudos
11 Replies
RobertScheitlin__GISP
MVP Emeritus
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.
0 Kudos
DidumAbraham
New Contributor II
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.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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);
0 Kudos
ReneRubalcava
Frequent Contributor II
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.
0 Kudos
DidumAbraham
New Contributor II
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.
0 Kudos
DidumAbraham
New Contributor II
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.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Didum,

   Strange I tested this code and it worked fine for me. Maybe you should post your code for examination.
0 Kudos
DidumAbraham
New Contributor II
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>
0 Kudos
DidumAbraham
New Contributor II
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
0 Kudos