2 Replies Latest reply on Feb 16, 2010 6:49 AM by novamatt

    State transitions when components disappear

    novamatt

      Hi,

       

      I'm currently doing a "drawer" component, that is a container with a "handle" button. When the user click on the handle, the content of the container si displayed and the handle lays at the bottom of the container. When the handle is clicked again, the content is hidden and the handle moves to the top.


      In a Flex 4-manner, I consequently defined my drawer content container to only be present when the drawer is opened, like this in the mxml skin :

       

              <s:states>
                <s:State name="closed"/>
                <s:State name="opened"/>
                <s:State name="disabled"/>
                <s:State name="normal"/>
           </s:states>
           <!-- host component -->
           <fx:Metadata>
                [HostComponent("nova.style.Drawer")]
           </fx:Metadata>
           <s:layout>
                <s:BasicLayout />
           </s:layout>
           <s:VGroup id="caisson" width="100%" height="100%">
                <s:Group width="100%" id="contentGroup" includeIn="opened">
                </s:Group>
                <s:Group width="100%">
                     <s:Button id="handle" label="{hostComponent.drawerLabel}" x="{hostComponent.handleX}" skinClass="nova.style.skins.DrawerHandleSkin"/>
                </s:Group>
           </s:VGroup>
      

       

      This works as expected. Now I want to add a transition between the states "opened" and "closed" that makes the drawer content and the handle move smoothly to the top or to the bottom, like a real drawer being dragged. Problem is as soon as the handle is clicked, my component toggles in state "closed" and the contentGroup is removed, making any animation on it or handle useless.

       

      So is there a simple way to animate the disparition of a component between states, or should I implement a radically different approach, that is modifying the y attribute of the contentGroup when state change ? What do you think ?

      Thanks

      Matt

        • 1. Re: State transitions when components disappear
          Chet Haase Level 3

          Hi Matt,

           

          The Fade effect has the logic built in to do what you want; it keeps the objects around long enough to fade them out (caveat: it doesn't handle the case where the Fade isn't the first effect in a Sequence). Otherwise, you need to use a RemoveAction effect in a Sequence to tell the transition not to remove it until you're good and ready. Something like this:

           

               <s:Sequence target="">

                    <s:Resize/>

                    <s:RemoveAction/>

               <s:Sequence>

           

          There's a similar problem when animating items into place that exist in the next state - they tend to blink in immediately. For that, you use an AddAction at the appropriate place in your sequence.

           

          Chet.

          • 2. Re: State transitions when components disappear
            novamatt Level 1

            Thanks a lot Chet, the trick with "RemoveAction" perfectly works !

             

            My final implementation below:

            <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" 
                            xmlns:mx="library://ns.adobe.com/flex/halo">
                 <s:transitions>
                      <s:Transition toState="opened">
                           <s:Sequence target="{contentGroup}" >
                                <s:Resize duration="500"/>
                                <s:RemoveAction />
                           </s:Sequence>
                      </s:Transition>
                      <s:Transition toState="closed">
                           <s:Sequence target="{contentGroup}" >
                                <s:Resize duration="500"/>
                                <s:RemoveAction />
                           </s:Sequence>
                      </s:Transition>
                 </s:transitions>
                 
                 <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                 </fx:Declarations>
                 <s:states>
                      <s:State name="closed"/>
                      <s:State name="opened"/>
                 </s:states>
                 <!-- host component -->
                 <fx:Metadata>
                      [HostComponent("nova.style.Drawer")]
                 </fx:Metadata>
                 <s:layout>
                      <s:BasicLayout />
                 </s:layout>
                 <s:VGroup width="100%" height="100%" gap="-1">
                      <s:Group width="100%" id="contentGroup" includeIn="opened" height.opened="100%" height.closed="0" clipAndEnableScrolling="true">
                      </s:Group>
                      <s:Group width="100%">
                           <s:Button id="handle" label="{hostComponent.drawerLabel}" x="{hostComponent.handleX}" skinClass="nova.style.skins.DrawerHandleSkin"/>
                      </s:Group>
                 </s:VGroup>
            </s:SparkSkin>