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

Collapsible Accordion/Panel, anyone?

DidumAbraham

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

Encontre mais publicações marcadas com

Accepted answers

All comments

DidumAbraham

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.

RobertScheitlin__GISP

Didum,

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

Didum.zip

DidumAbraham

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

DidumAbraham

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>

RobertScheitlin__GISP

Didum,

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

DidumAbraham

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.

DidumAbraham

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.

ReneRubalcava

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.

RobertScheitlin__GISP

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

DidumAbraham

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.

appOutlook.jpg

RobertScheitlin__GISP

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.

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.