4 Replies Latest reply on Nov 10, 2011 11:57 PM by Lynn Kirabo

    Making state transitions within a DataList component

    infomotive

      I have a datalist that includes a word bubble, title , data and long list of text for each row in the data list. I want this to appear as the word bubble, title, date and a snippet of text. When the user can clicks on it, I want the text box to expand to show more text. To do this I went into the isolation mode for the Repeated Item. In the 'Selected' state I enlarged the text box and made a smooth transition. It runs exactly like I want it to. Now I want to click on an x box button and have the box shrink back to the way it is in 'normal' state.  However when I try to add an interaction to the button while in the 'selected' state the interactions menu does not allow me to choose a state to play transition to and the ok button is greyed out.  Once the user clicks on the text it enlarges and is now frozen that way as I am not able to add a way to transition back to the 'normal' state. 

       

      The reason for this seems to be that if you are in the 'normal' state you can easily select the 'selected' state. However there is no natural transition from 'selected' back to 'normal'.

        • 1. Re: Making state transitions within a DataList component
          acath Level 4

          Hi infomotive,

           

          The logic that controls which list item is selected is determined by the list's selectedIndex. When you click on an item, the list's selectedIndex is set to that item's index, which in turn puts the appropriate Repeated Item into it's "Selected" state (and puts the previously selected item into it's "Normal" state). This is all done for you by Flex, and you can't directly control the state of a Repeated Item (or, in fact, any other skinned component!). In order to set an item's state to "Normal", you need to set the list's selectedIndex to not be that item.

           

          You can do this by creating an action sequence with a Set Property effect that sets the selectedIndex of the list to -1 (which means nothing is selected). Unfortunately, you can't do this from within the Repeated Item itself because the Interactions panel won't let you target objects that are up the hierarchy from the event source! So there's actually no good way to do what you want to do in the current version of Flash Catalyst. However, it's quite easy in Flash Builder:

           

           

          -Adam

          • 2. Re: Making state transitions within a DataList component
            ksequen

            So how do you do this on Flash Builder?

            • 3. Re: Making state transitions within a DataList component
              Lynn Kirabo

              I'd also like to know how to get it done in Flash Builder.

              • 4. Re: Making state transitions within a DataList component
                Lynn Kirabo Level 1

                I realise this has already been answered, but just incase anyone wants to do this in Flash Catalyst itself

                 

                All you have to do is select the data list, then go to the interactions panel.

                 

                After you have selected the state that it should transition to, Change the last drop down to "When a specific Item is selected", then choose which item links to what.

                 

                Step-1.jpg Step-2.jpg

                 

                I hope this helps someone who doesn't have an idea how  to use Flash Builder.

                 

                Thanks.