0 Replies Latest reply on Feb 25, 2010 7:17 PM by rickcr

    Using states and a transition.. I want one view hidden and the other 'maximized'

    rickcr Level 1

      I know the subject is vague.. hard to explain without my example (shown below.) I'm new to Flex so I'm sure I'm missing a basic approach..

       

      Basically I have a VBox with two components (each 50% height) on a single parent VBox container. When the container loads, I want one of the vbox compoents open full and when you click an arrow it switches to showing both views (50% each.)

       

      Right now I'm setting the initial view full, by on initialize calling currentState = 'ShowReportsFull';

      The problem with this is, if I use a transition, you see the transition happen right away (hiding the split view) which is ugly.

       

      Basically I need a way (I think) to have two components in a VBox where one is 'hidden' by default and the other component taking up the full height. Or maybe some other approach? Again, I'm new so maybe I'm taking the wrong approach. Here is what I have so far...

       


      function init():void {
          reportListingsView.toggleFullTrigger.addEventListener(MouseEvent.CLICK, toggleTargetSelector);
          dataSelectorHome.toggleFullTrigger.addEventListener(MouseEvent.CLICK, toggleTargetSelector);
          //switch current state to full - will cause an ugly flicker of the transition
          currentState = 'ShowReportsFull';
      }

       

      private function toggleTargetSelector(event:MouseEvent):void {
          currentState = currentState == 'ShowReportsFull' ? '' : 'ShowReportsFull';
      }

       

      <mx:states>
          <mx:State  name="ShowReportsFull">
              <mx:SetProperty target="{dataSelectorHome}" name="visible" value="false"/>
              <mx:SetProperty target="{dataSelectorHome}" name="includeInLayout" value="false"/>
              <mx:SetProperty target="{reportListingsView}" name="height" value="100%"/>
              <mx:SetStyle target="{reportListingsView.toggleFullTrigger}" name="icon" value="{reportListingsView.ArrowClose}"/>
          </mx:State>
      </mx:states>

       

      <mx:transitions>
          <mx:Transition id="toFull" fromState="*" toState="ShowReportsFull">
              <mx:Sequence id="t1" targets="{[dataSelectorHome]}">
                  <mx:Iris showTarget="false" duration="350"/>
                  <mx:SetPropertyAction target="{dataSelectorHome}" name="includeInLayout"/>
                  <mx:SetPropertyAction name="visible"/>
              </mx:Sequence>
          </mx:Transition>
      </mx:transitions>

       

      <!-- *** I'd prefer on the first view of this component, that you only see the reportListings view, and dataSelectorHome is hidden -->

       

      <mx:HDividedBox width="100%" height="100%"  horizontalScrollPolicy="off" verticalScrollPolicy="off" >
          <layout:SystemNav id="systemNav" width="20%" height="100%"/>
          <mx:VBox width="80%" height="100%" paddingBottom="2" paddingLeft="2" paddingTop="8" paddingRight="5">
              <layout:DataSelectorHome id="dataSelectorHome" width="100%" height="50%" />
              <layout:ReportListings id="reportListingsView" width="100%" height="50%" />
          </mx:VBox>
      </mx:HDividedBox>