2 Replies Latest reply on Apr 9, 2008 1:57 PM by Gregory Lafrance

    Flex Switch Between Panels

    timgerr1
      Hey all, I am new to flex (coming from Javascript) and I was wondering how do display different panels. Here is what I mean, I have two(2) panels and I want to display pOne and not pTwo. If I press a button (one that I don't have yet) I would like to display pTwo and not pOne. In HTML I would use the DOM model and tell the CSS to hide on of the panels then show the other. How can I do this in Flex3.

      My old thinking would tell me to use a if statement, somthing like if button A was pressed then show pOne, of button B was pressed then show pTwo.

      What is the flex way of doing this.

      Thanks,
      timgerr


        • 1. Re: Flex Switch Between Panels
          cxf02
          Use a view stack. Each Object in the VS below is a custom container. Adapt this to work with your panels

          <!-- Objects for Control Bar -->

          <mx:ViewStack id="appViews" creationPolicy="all" x="10" y="119" width="99%" height="98%" >
          <vx:HomeView id="homeView" label="Home" showEffect="WipeDown" hideEffect="WipeUp" width="100%" height="100%"/>
          <vx:WebView id="webView" label="Got Web 2.0?" showEffect="WipeDown" hideEffect="WipeUp" width="100%" height="100%" />
          <vx:ProcessView id="processView" label="Communicaton &amp; the Web" showEffect="WipeDown" hideEffect="WipeUp" width="100%" height="100%"/>
          <vx:ProductView id="productView" label="Branded Products" showEffect="WipeDown" hideEffect="WipeUp" width="100%" height="100%"/>
          <vx:ServiceView id="serviceView" label="Services" showEffect="WipeDown" hideEffect="WipeUp" width="100%" height="100%"/>
          <vx:CompAdvantageView id="compAdvtgView" label="Competitive Advantage" showEffect="WipeDown" hideEffect="WipeUp" width="100%" height="100%"/>
          <vx:CompanyView id="compView" label="Read About Us" showEffect="WipeDown" hideEffect="WipeUp" width="100%" height="100%"/>
          </mx:ViewStack>

          <mx:ApplicationControlBar x="3" y="80" width="100%" >
          <mx:ToggleButtonBar dataProvider="{appViews}"/>
          </mx:ApplicationControlBar>
          • 2. Re: Flex Switch Between Panels
            Gregory Lafrance Level 6
            Another example:

            ------------------------------ ViewStack.mxml -------------------------------
            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*">
            <mx:Script>
            <![CDATA[
            private function selectPortal(event:Event):void {
            if(cmbx.selectedItem.data == "home"){
            portals.selectedChild = home;
            }
            if(cmbx.selectedItem.data == "hr_portal"){
            portals.selectedChild = hr_portal;
            }
            if(cmbx.selectedItem.data == "is_portal"){
            portals.selectedChild = is_portal;
            }
            if(cmbx.selectedItem.data == "pay_portal"){
            portals.selectedChild = pay_portal;
            }
            }
            ]]>
            </mx:Script>

            <mx:ApplicationControlBar width="100%">
            <mx:Label text="Select an intranet portal: " fontSize="12"/>
            <mx:ComboBox id="cmbx" change="selectPortal(event)">
            <mx:Object label="XYZ Intranet Home Page" data="home"/>
            <mx:Object label="Human Resources Portal" data="hr_portal"/>
            <mx:Object label="Information Services Portal" data="is_portal"/>
            <mx:Object label="Payroll Portal" data="pay_portal"/>
            </mx:ComboBox>
            </mx:ApplicationControlBar>
            <mx:ViewStack id="portals" width="100%" height="100%">
            <mx:Panel width="100%" height="100%" horizontalAlign="center"
            backgroundColor="#ccffcc" id="home">
            <mx:Text text="Welcome to the XYZ Corporate Intanet" fontSize="20"
            color="blue"/>
            </mx:Panel>
            <comp:HumanResources id="hr_portal"/>
            <comp:InformationServices id="is_portal"/>
            <comp:Payroll id="pay_portal"/>
            </mx:ViewStack>
            </mx:Application>
            ------------------------------------------------------------------------------------
            ---------- components/HumanResources.mxml ------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="100%" height="100%" horizontalAlign="center" backgroundColor="red">
            <mx:Text text="Human Resources Portal" fontSize="20"
            color="blue"/>
            </mx:Panel>
            ------------------------------------------------------------------------------------
            ---------- components/InformationServices.mxml ------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="100%" height="100%" horizontalAlign="center" backgroundColor="purple">
            <mx:Text text="Information Services Portal" fontSize="20"
            color="blue"/>
            </mx:Panel>
            ------------------------------------------------------------------------------------
            ---------- components/Payroll.mxml ------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="100%" height="100%" horizontalAlign="center" backgroundColor="gray">
            <mx:Text text="Payroll Portal" fontSize="20"
            color="blue"/>
            </mx:Panel>