5 Replies Latest reply on May 25, 2011 6:32 AM by miguel8312

    Making Panels Visible using Checkboxes

    Adam_Cork1990 Level 1

      Hi,

      Im trying to figure out code in Flex 4 to get panels to appear when a  checkbox has been ticked and to disappear when it is unticked. I have got it to  work with a single panel and a single checkbox but cannot seem to get it to work  with a number of checkboxes/panels. When I run my code, only one panel will  appear at a time. Here is my code, I'm new to flex and help would be greatly  appreciated:

       

       

      <?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"  minWidth="955" minHeight="600">

       

       

       

       

       

       

      <fx:Script>

       

       

       

       

       

      </fx:Script>

       

       

       

       

       

      <s:states>

       

       

       

       

       

      <s:State name="Name1"/>

       

       

       

      <s:State name="Name2"/>

       

       

       

      <s:State name="Name3"/>

       

       

       

      <s:State name="Name4"/>

       

       

       

       

       

      </s:states>

       

       

       

       

       

      <fx:Declarations>

       

       

       

       

       

      </fx:Declarations>

       

       

       

      <s:CheckBox x="57" y="26"  label="Name 1" id="chkName1"  click="currentState='Name1'" />

       

       

       

      <s:CheckBox x="57" y="52"  label="Name 2" id="chkName2"  click="currentState='Name2'"/>

       

       

       

      <s:CheckBox x="57" y="78"  label="Name 3" id="chkName3"  click="currentState='Name3'"/>

       

       

       

      <s:CheckBox x="57" y="104"  label="Name 4  SA" id="chkName4"  click="currentState='Name4'" />

       

       

       

      <s:Panel x="10" y="152"  width="250" height="200"  id="panName1" visible="true"  excludeFrom="Name2,Name3,Name4" >

       

       

       

      </s:Panel>

       

      <s:Panel x="309"  y="152" width="250"  height="200" id="panName2"  visible="true" excludeFrom="Name1,Name3,Name4">

       

      </s:Panel>

       

      <s:Panel x="609"  y="152" width="250"  height="200" id="panName3"  visible="true" excludeFrom="Name1,Name2,Name4">

       

      </s:Panel>

       

      <s:Panel x="10" y="373"  width="250" height="200"  id="panName4" visible="true"  excludeFrom="Name1,Name2,Name3">

       

      </s:Panel>

      </s:Application>

        • 1. Re: Making Panels Visible using Checkboxes
          Nishant Jha28

          Its doing what you asked it to do. There is no use of states here. Just use for panel visible="{chkBox1.selected}" and includeInLayout="{chkBox1.selected}"

          1 person found this helpful
          • 2. Re: Making Panels Visible using Checkboxes
            miguel8312 Level 3

            are you looking for something like this instead?

            <?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"  minWidth="955" minHeight="600">
            <fx:Script>
             <![CDATA[
              
              public function showHidePanels(event:MouseEvent):void{
               
               if (chkName1.selected == true ) { panName1.visible = true}
               else {panName1.visible = false};
               
               
               if ( chkName2.selected == true ) { panName2.visible = true}
               else {panName2.visible = false};
               
               
               if ( chkName3.selected == true ) { panName3.visible = true}
               else {panName3.visible = false};
               
               
               
               if (chkName4.selected == true ) { panName4.visible = true}
               else {panName4.visible = false};
               
               
              }
              
              
              
              
             ]]>
            </fx:Script>
             <!--
             <s:states>
              
              
              <s:State name="Name1"/>
              <s:State name="Name2"/>
              <s:State name="Name3"/>
              <s:State name="Name4"/>
               
              
             </s:states>-->
             
              
             
             <fx:Declarations>
               
             </fx:Declarations>
             
             
             
             <s:CheckBox x="57" y="26"  label="Name 1" id="chkName1" click="showHidePanels(event)"   />
             <s:CheckBox x="57" y="52"  label="Name 2" id="chkName2" click="showHidePanels(event)" />
             <s:CheckBox x="57" y="78"  label="Name 3" id="chkName3" click="showHidePanels(event)"  />
             <s:CheckBox x="57" y="104"  label="Name 4  SA" id="chkName4" click="showHidePanels(event)"  />
             
             
             
             <s:Panel x="10" y="152"  width="250" height="200"  id="panName1"  visible="false"  >
              
              
             </s:Panel>
             
             
             
             <s:Panel x="309"  y="152" width="250"  height="200" id="panName2"  visible="false" >
              
              
              
             </s:Panel>
             
             
             
             <s:Panel x="609"  y="152" width="250"  height="200" id="panName3"  visible="false" >
              
              
              
             </s:Panel>
             
             
             
             <s:Panel x="10" y="373"  width="250" height="200"  id="panName4" visible="false"  >
              
              
              
             </s:Panel>
             
             
            </s:Application>
            

             

            Copy and run code post back.

             

             

            if this answers your quesiton please mark it as such.

            Thanks

            Miguel

            • 3. Re: Making Panels Visible using Checkboxes
              Adam_Cork1990 Level 1

              I tried this code but it ran an error of "State 'visible' was referenced without being declared." How would I go about fixing this?

               

               

              <?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" minWidth="955" minHeight="600">

               

              <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

              </fx:Declarations>

               

              <s:CheckBox x="81" y="42" label="CheckBox" id="chkCheck" panPanel.visible="{chkCheck.selected}"/>

              <s:Panel x="81" y="103" width="250" height="200" id="panPanel" includeInLayout="{chkCheck.selected}">

              </s:Panel>

              </s:Application>

              • 4. Re: Making Panels Visible using Checkboxes
                Adam_Cork1990 Level 1

                Thats exactly what I was looking for. Thanks a million!

                • 5. Re: Making Panels Visible using Checkboxes
                  miguel8312 Level 3

                  just glad i can help mate.

                  Miguel