3 Replies Latest reply on Jun 27, 2007 2:13 PM by bmont

    Newbie Problem With View State Transition

    scooter5791 Level 1
      I am just starting out with Flex 2.1 and I am going through the lessons in the Getting Started manual. I am working on the View State and Transitions lesson. The basic lesson works fine and clicking the Advanced Options linkbutton shows the Advanced state with WipeDown and Dissolve transitons as expected. Now I am trying to add an another transition to reverse the process when switching back to the base state and it isn't working and I am not exactly sure why. Code is below. Also I have a question about using the '*' wildcard - how can I name the defaut state instead of using a wildcard:

      <mx:Transition id="transHideAdvanced" fromState="Advanced" toState="*">

      Thanks is advance...

      <?xml version="1.0" encoding="iso-8859-1"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

      <!-- Define the view states -->
      <mx:states>
      <mx:State name="Advanced">
      <mx:AddChild relativeTo="{pnlMain}" position="lastChild">
      <mx:VBox x="20" y="160" width="160" height="80" id="vboxAdvanced">
      <mx:CheckBox label="Regular expression"/>
      <mx:CheckBox label="Case sensitive"/>
      <mx:CheckBox label="Exact phrase"/>
      </mx:VBox>
      </mx:AddChild>
      <mx:SetEventHandler target="{lnkAdvanced}" name="click" handler="currentState=''" />
      </mx:State>
      </mx:states>

      <!-- Define transitions -->
      <mx:transitions>
      <!-- Define transition for showing Advanced Options VBox -->
      <mx:Transition id="transShowAdvanced" fromState="*" toState="Advanced">
      <!-- Define transition effects -->
      <mx:Parallel target="{vboxAdvanced}">
      <mx:WipeDown duration="300" />
      <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="300" />
      </mx:Parallel>
      </mx:Transition>
      <!-- Define transition for hiding Advanced Options VBox -->
      <!-- ********** THIS DOESN'T WORK BUT I'M NOT SURE WHY *************** -->
      <mx:Transition id="transHideAdvanced" fromState="Advanced" toState="*">
      <!-- Define transition effects -->
      <mx:Parallel target="{vboxAdvanced}">
      <mx:WipeUp duration="300" />
      <mx:Dissolve alphaFrom="1.0" alphaTo="0.0" duration="300" />
      </mx:Parallel>
      </mx:Transition>
      </mx:transitions>

      <mx:Panel id="pnlMain" title="View States With Transitions Example" x="5" y="5" width="300" height="400" layout="absolute">
      <mx:Label text="Search" x="20" y="70" />
      <mx:TextInput x="20" y="90" />
      <mx:Button id="btnGo" label="Go" x="185" y="90" />
      <mx:LinkButton id="lnkAdvanced" label="Advanced Options" x="20" y="120" click="currentState='Advanced'" />
      </mx:Panel>

      </mx:Application>
        • 1. Re: Newbie Problem With View State Transition
          SkiShakakai
          Change "*" to an empty string "". That should take care of your problem.
          • 2. Re: Newbie Problem With View State Transition
            scooter5791 Level 1
            Thanks SkiShakakai - but that didn't solve the problem. Actually if it had I would wonder why since the '*' supposedly means any view state should be affected. So fromState="Advanced" toState="*" should mean when I switch from the Advanced view state to any other view state the transition should apply. But for some reason it doesn't work. When transitioning from the base state to the Advanced state the transitions both work - it wipes down and dissolves in just fine. But when going back to the base state it just abrubtly disappears with no transition.

            This isn't a big deal - I am just going through the basic tutorials and this is not a real project. But it always bothers me when I can't figure out why something doesn't work because I know sometime in the future I will need something like this in a real project and would rather know now what the issue is when I don't have any project timeline pressures.

            And my other question is how would I say I only wanted the transition to happen when going to the base state - not a wildcard. Can I just use: fromState="Advanced" toState="base"??
            • 3. Re: Newbie Problem With View State Transition
              bmont Level 1
              I don't know if you have solved your problem or not but I had the same problem with the Wipeup effect going from one state back to the base state.

              After a lot of experimentation I finally found the following setting worked:

              On the Wipeup effect change the property "showTarget" to false. The default is true. This worked for me.

              Hope it helps.