5 Replies Latest reply on Aug 24, 2009 10:59 PM by Flex harUI

    Viewstacks and button bar

    Bifz

      Hello,

       

      I am trying to create an website using flex. My problem is,

       

      I have a grid in which one grid item has an accordion which has 6 tabs and in each tab i have different button bars. In the other grid item I have a viewstack and I want to change the child of the viewstack as per the button i click on the buttonbar. In simple buttons, I can do

      click="myViewStack.selectedChild=accountInfo;"

      but my button bar looks just like this and how do I make each button clickable to different viewstack children?

      <mx:ButtonBar direction="vertical" width="100%" height="105" x="0" y="0">
           <mx:dataProvider>
                <mx:String>Defined</mx:String>
                <mx:String>Baseline Data</mx:String>
                <mx:String>Time-Series Data</mx:String>
           </mx:dataProvider>
      </mx:ButtonBar>

      and my viewstack looks like this,

      <mx:ViewStack id="myViewStack" width="100%" height="358">
           <mx:Canvas label="View 1" width="100%" height="100%" id="abc">
                <mx:Text x="10" y="10" text="Default" height="86" width="371"/>
           </mx:Canvas>
           <mx:Canvas label="geospatial_defined" width="100%" height="100%">
                <mx:Text x="10" y="10" text="geospatial_defined"/>
           </mx:Canvas>
           <mx:Canvas label="geospatial_baseline" width="100%" height="100%">
                <mx:Text x="10" y="10" text="geospatial_baseline"/>
           </mx:Canvas>
           <mx:Canvas label="geospatial_timeseries" width="100%" height="100%">
                <mx:Text x="10" y="10" text="geospatial_timeseries&#xa;"/>
           </mx:Canvas>
      </mx:ViewStack>

       

      Is there anyway to use the buttonbar to c

        • 1. Re: Viewstacks and button bar
          Bifz Level 1

          sorry fot that..

           

          But Is there anyway to use the buttonbar to change the viewstack children or should I use buttons instead of a buttonbar??

           

          Help needed.

           

          Thanks

          -Bifal

          • 2. Re: Viewstacks and button bar
            Flex harUI Adobe Employee

            <mx:ViewStack selectedIndex="{buttonBar.selectedIndex}"

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui

            • 3. Re: Viewstacks and button bar
              Bifz Level 1

              Hello Alex,

               

              Thanks for the reply. That solution works but partially. It works for one buttonbar, but I have 6 different buttonbars in 6 different canvas.

               

              Can't I use one single viewstack for all the 6 different buttonbars??

              • 4. Re: Viewstacks and button bar
                Bifz Level 1

                To help understand my problem more, here is the code for the whole accordion and the viewstack

                 

                <mx:Accordion width="195" height="450" x="0" y="0" borderColor="#FFFFFF">
                     <mx:Canvas label="GEOSPATIAL DATA" width="195" height="179">
                          <mx:ButtonBar direction="vertical" width="100%" height="105" x="0" y="0" selectedIndex="1" id="geospatial_bb">
                               <mx:dataProvider>
                                    <mx:String>Defined</mx:String>
                                    <mx:String>Baseline Data</mx:String>
                                    <mx:String>Time-Series Data</mx:String>
                               </mx:dataProvider>
                          </mx:ButtonBar>
                     </mx:Canvas>
                     <mx:Canvas label="GIS TECHNOLOGY" width="100%" height="250">
                          <mx:ButtonBar x="0" y="0" direction="vertical" width="100%" height="140" selectedIndex="4" id="gis_bb">
                               <mx:dataProvider>
                                    <mx:String>Defined</mx:String>
                                    <mx:String>Basic Concepts</mx:String>
                                    <mx:String>Advantages</mx:String>
                                    <mx:String>Applications</mx:String>
                               </mx:dataProvider>
                          </mx:ButtonBar>
                     </mx:Canvas>

                </mx:Accordion>

                 

                Similary, I have more 4 buttonbars in different canvas. Now, this is the viewstack code,

                 

                <mx:ViewStack id="myViewStack" width="100%" height="358" selectedIndex="{geospatial_bb.selectedIndex}">
                     <mx:Canvas label="View 1" width="100%" height="100%" id="abc">
                          <mx:Text x="10" y="10" text="default" height="86" width="371"/>
                     </mx:Canvas>
                     <mx:Canvas label="geospatial_defined" width="100%" height="100%">
                          <mx:Text x="10" y="10" text="geospatial_defined"/>
                     </mx:Canvas>
                     <mx:Canvas label="geospatial_baseline" width="100%" height="100%">
                          <mx:Text x="10" y="10" text="geospatial_baseline"/>
                     </mx:Canvas>
                     <mx:Canvas label="geospatial_timeseries" width="100%" height="100%">
                          <mx:Text x="10" y="10" text="geospatial_timeseries"/>
                     </mx:Canvas>
                     <mx:Canvas label="gis_defined" width="100%" height="100%">
                          <mx:Text x="10" y="10" text="gis_defined"/>
                     </mx:Canvas>
                     <mx:Canvas label="gis_basic_concepts" width="100%" height="100%">
                          <mx:Text x="10" y="10" text="gis_basic_concepts"/>
                     </mx:Canvas>
                     <mx:Canvas label="gis_advantages" width="100%" height="100%">
                          <mx:Text x="10" y="10" text="gis_advantages"/>
                     </mx:Canvas>
                </mx:ViewStack>

                 

                So, if the "Defined" button in the GEOSPATIAL DATA accordion tab is clicks then the canavs label "geospatial_defined" in the viewstack should be visible.

                 

                And, if the "Defined" button in the GIS TECHNOLOGY accordion tab is clicks then the canavs label "gis_defined" in the viewstack should be visible.

                 

                I hope that helps. If you need more explanation please let me know.

                 

                -Bifal

                • 5. Re: Viewstacks and button bar
                  Flex harUI Adobe Employee

                  I'd probably define a common variable

                   

                  private var currentViewStackPage:int = 1;

                   

                  <mx:ViewStack selectedIndex="" ...>

                   

                  And for each buttonbar

                   

                  <mx:ButtonBar id="bb1" change="currentViewStackPage=bb1.selectedIndex" />

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui