Flex 4.5 NavigatorContent buttonBar Issue

JHayes · ‎01-27-2012

Hello!

I'm using Flash Builder 4.5 Premium and ArcGIS API for Flex 2.5.

Scenerio:
I have a buttonBar whose dataProvider is an mx:viewStack supplied by Spark NavigatorContent. I have checkBoxes inside each of the NavigatorContent instances. The checkBoxes turn content on and off. Works great.

Problem:
When you select a different button in the buttonBar the selected content from the previuos button still displays.

Question:
How do I get the selected content from the previous button to not display? I'm not sure how to do this.

Bonus:
If someone can tell me how to handle the checkBox eventHandler more efficiently that would be awesome! Because right now I currently have an eventHandler function for each check box (like 18). Since I'm still green, so I figured I'd get everything working before trying to streamline this. Or perhaps I need to add something to this code to unSelect the checkBox once the button has changed? Not sure.

Thanks for the help!

Joe

<?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:esri="http://www.esri.com/2008/ags"       xmlns:mx="library://ns.adobe.com/flex/mx"       pageTitle="Aloha Existing Conditions"       initialize="initApp(event)">    <fx:Style source="alohaExistingCond.css"/>    <fx:Script>    <![CDATA[    import com.esri.ags.Graphic;    import com.esri.ags.components.Editor;    import com.esri.ags.components.Legend;    import com.esri.ags.events.FeatureLayerEvent;    import com.esri.ags.events.LayerEvent;    import com.esri.ags.geometry.MapPoint;    import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;    import com.esri.ags.layers.DynamicMapServiceLayer;    import com.esri.ags.layers.TiledMapServiceLayer;    import com.esri.ags.layers.supportClasses.LayerInfo;    import com.esri.ags.layers.supportClasses.LayerLegendInfo;    import com.esri.ags.layers.supportClasses.LegendItemInfo;    import com.esri.ags.tasks.supportClasses.AddressCandidate;        import flash.events.Event;        import flashx.textLayout.events.UpdateCompleteEvent;        import mx.containers.TitleWindow;    import mx.controls.Alert;    import mx.core.IFlexDisplayObject;    import mx.events.FlexEvent;    import mx.managers.PopUpManager;    import mx.rpc.AsyncResponder;        import spark.components.Panel;    import spark.events.IndexChangeEvent;        import splash1.SplashScreen1;        public function initApp(event:FlexEvent):void    {   //  showWindow();     }        private var point1:Point = new Point();        private function showWindow():void {     var login:SplashScreen1 = SplashScreen1(PopUpManager.createPopUp(this, SplashScreen1 , true));              PopUpManager.centerPopUp(login);    }        public function turnonbasemap():void     {      photo.visible = false;     basemap.visible = true;      }    public function turnonphoto():void    { [     photo.visible = true;     basemap.visible = false;      }       //these are the checkBox Handlers    public function bintBox(evt:MouseEvent):void    {      myLegend.visible = true;          if(CheckBox(evt.target).selected)     {      bikelaneMapServer.visible = true;    }     else     {      bikelaneMapServer.visible = false;    }     }    public function sintBox(evt:MouseEvent):void    {      sidewalkMapServer.visible = true;          if(CheckBox(evt.target).selected)      {            }      else      {      sidewalkMapServer.visible = false;      }    }    public function scomBox(evt:MouseEvent):void    {      sidewalkComments.visible = true;          if(CheckBox(evt.target).selected)      {            }      else      {      sidewalkComments.visible = false;      }    }    public function bcomBox(evt:MouseEvent):void    {      bikelaneComments.visible = true;          if(CheckBox(evt.target).selected)      {            }      else      {      bikelaneComments.visible = false;      }    }    public function opsBox(evt:MouseEvent):void    {      OPS.visible = true;           if(CheckBox(evt.target).selected)      {            }      else      {      OPS.visible = false;      }    }       ]]>      </fx:Script>     <!-- Button Bar Window ~~~~~~~~~~~~~~~ -->  <s:BorderContainer id="buttonBarContainer"          left="352" right="3" top="64" height="134"         borderWeight="2" cornerRadius="5">      <s:Label text="Select an item below:"       x="10" y="10"/>      <s:ButtonBar id="viewMenu" left="5" right="5" top="30" height="21"        dataProvider="{myViewStack}"       requireSelection="true"/>           <!-- change="changeSelection(event)" -->              <s:Group id="layerGroup"        left="5" right="3" top="55" height="80">          <mx:ViewStack id="myViewStack" height="72">              <s:NavigatorContent id="planning" label="Planning">                <s:layout>         <s:TileLayout paddingLeft="10" paddingRight="20"              orientation="columns" columnWidth="175"              requestedColumnCount="-1"/>        </s:layout>                 <s:CheckBox id="bCommentCheckBox"          label="Bike Lane Comment"        fontSize="14"        click="bcomBox(event)"/>                <s:CheckBox id="foo1"            label="Foo 1"           fontSize="14"/>        <s:CheckBox id="foo2"             label="Foo 2"           fontSize="14"/>        <s:CheckBox id="foo3"            label="Foo 3"           fontSize="14"/>        <s:CheckBox id="foo4"             label="Foo 4"           fontSize="14"/>               </s:NavigatorContent>        <!--  trans tab  ~~~~~~~~~~~~~~-->            <s:NavigatorContent id="trans" label="Transportation">                <s:layout>         <s:TileLayout columnWidth="175" orientation="columns"              paddingLeft="10" paddingRight="20"              requestedColumnCount="-1"/>        </s:layout>                <s:CheckBox id="sCommentCheckBox"            label="Sidewalk Comments"           fontSize="14"              click="scomBox(event)"/>                   <s:CheckBox id="sidewalkCheckBox"            label="Sidewalk Inventory"           fontSize="14"              click="sintBox(event)"/>                                                   <s:CheckBox id="bikelaneCheckBox"             label="Bike Lane Inventory"           fontSize="14"              click="bintBox(event)"/>                  </s:NavigatorContent>              <s:NavigatorContent id="environ" label="Environmental">                <s:layout>         <s:TileLayout paddingLeft="10" paddingRight="20"              orientation="columns" columnWidth="200"               requestedColumnCount="-1"/>        </s:layout>                <s:CheckBox id="opsCheckBox"             label="Watershed Enhancement"           fontSize="14"           click="opsBox(event)"/>         </s:NavigatorContent>              <s:NavigatorContent id="housing" label="Housing/Social">                <s:layout>         <s:TileLayout paddingLeft="10" paddingRight="20"              orientation="columns" columnWidth="175"              requestedColumnCount="-1"/>        </s:layout>                <s:Label text="Housing and Social Services Maps"/>       </s:NavigatorContent>              <s:NavigatorContent id="built" label="Built Environment">                <s:layout>         <s:TileLayout paddingLeft="10" paddingRight="20"              orientation="columns" columnWidth="175"              requestedColumnCount="-1"/>        </s:layout>                <s:Label text="Built Environment Maps"/>       </s:NavigatorContent>              <s:NavigatorContent id="transit" label="Transit">                <s:layout>         <s:TileLayout paddingLeft="10" paddingRight="20"              orientation="columns" columnWidth="175"              requestedColumnCount="-1"/>        </s:layout>                <s:Label text="Tansit Maps"/>       </s:NavigatorContent>      </mx:ViewStack>       <!--<s:Label id="selectionText"         x="10" y="60"/>  -->    </s:Group>  </s:BorderContainer>        <esri:ArcGISTiledMapServiceLayer id="basemap"              url="http://........Washco_primary_basemap_SP/MapServer"/>    <esri:ArcGISTiledMapServiceLayer id="photo"              url="http://......../Orthos_2010_SP/MapServer"              visible="false"/>        <esri:ArcGISDynamicMapServiceLayer id="bikelaneMapServer"                name=" "               visible="false"               url="http://........services/DOE/DOE_Bikelane/MapServer"/>        <esri:ArcGISDynamicMapServiceLayer id="sidewalkMapServer"               name=" "               visible="false"               url="https://........DOE/DOE_Sidewalk/MapServer"/>        <esri:ArcGISDynamicMapServiceLayer id="OPS"               name=" "               visible="false"               url="http://........OPS/Watershed_Enhance/MapServer"/>       <esri:FeatureLayer id="sidewalkComments"           mode="snapshot"           visible="false"           url="http://........DOE/SidewalkComment/FeatureServer/0"/>    <!--    outFields="[Comment, entered]"    -->        <esri:FeatureLayer id="bikelaneComments"           mode="snapshot"           visible="false"           url="http://........BikelaneComment/FeatureServer/0"/>     <esri:GraphicsLayer id="myGraphicsLayer"/>   </esri:Map>   </s:Application>

RobertScheitlin__GISP · ‎01-27-2012

Joe,

See if this is what you are after:

            protected function CheckBox_clickHandler(event:MouseEvent):void             {                 const vis:Boolean = CheckBox(event.target).selected;                 switch(event.target.label){                     case "Bike Lane Comment":{                         bikelaneMapServer.visible = vis;                          break;                     }                     case "Sidewalk Comments":{                         sidewalkComments.visible = vis;                         break;                     }                     //etc, etc...                 }             }                          protected function viewMenu_changeHandler(event:IndexChangeEvent):void             {                 //Clear all the optional layers in the map                 bikelaneMapServer.visible = bCommentCheckBox.selected = false;                 sidewalkComments.visible = sCommentCheckBox.selected = false;                 //etc, etc...             } <s:ButtonBar id="viewMenu" left="5" right="5" top="30" height="21"                       dataProvider="{myViewStack}"                      requireSelection="true" change="viewMenu_changeHandler(event)"/>  <s:CheckBox id="sCommentCheckBox"                                  label="Sidewalk Comments"                                 fontSize="14"                                 click="CheckBox_clickHandler(event)"/>

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

View solution in original post

RobertScheitlin__GISP · ‎01-27-2012

Joe,

See if this is what you are after:

            protected function CheckBox_clickHandler(event:MouseEvent):void             {                 const vis:Boolean = CheckBox(event.target).selected;                 switch(event.target.label){                     case "Bike Lane Comment":{                         bikelaneMapServer.visible = vis;                          break;                     }                     case "Sidewalk Comments":{                         sidewalkComments.visible = vis;                         break;                     }                     //etc, etc...                 }             }                          protected function viewMenu_changeHandler(event:IndexChangeEvent):void             {                 //Clear all the optional layers in the map                 bikelaneMapServer.visible = bCommentCheckBox.selected = false;                 sidewalkComments.visible = sCommentCheckBox.selected = false;                 //etc, etc...             } <s:ButtonBar id="viewMenu" left="5" right="5" top="30" height="21"                       dataProvider="{myViewStack}"                      requireSelection="true" change="viewMenu_changeHandler(event)"/>  <s:CheckBox id="sCommentCheckBox"                                  label="Sidewalk Comments"                                 fontSize="14"                                 click="CheckBox_clickHandler(event)"/>

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

JHayes · ‎02-02-2012

Robert,

That did it. You are the man! Thank you soo much. You're truely aiding the development (no pun intended) of a new generation of developers. I'm putting you on my Christmas list brother.

Joe

RobertScheitlin__GISP · ‎02-02-2012

Joe,

Glad that worked for you... But you marked your post as the answer and thus I did not recieve the points for answering your question. You have to mark the post that answers your question with the check.

JHayes · ‎02-02-2012

Oops - I think I just fixed it.

JHayes · ‎02-09-2012

Robert,

Thought I should update you about this code. Please see this forum post. Using the code from the other post and changing the buttonBar change event to to this works well. Thanks.

protected function viewMenu_changeHandler(event:IndexChangeEvent):void
            {
                bikelaneCheckBox.selected = false;
                sCommentCheckBox.selected = false;
                bCommentCheckBox.selected = false;
                sidewalkCheckBox.selected = false;
                opsCheckBox.selected = false;
                planningAreasCheckBox.selected = false;
            }

Joe

BethManghi · ‎03-08-2013

I know this is an older thread, but for those having similar issues or wanting to know how to control a group of radio buttons better, using the RadioButtonGroup component may be helpful. Here's a link to some examples. You can set the "selection" in ActionScript only, but setting to null should clear the selected radio button.