6 Replies Latest reply on Dec 2, 2007 10:37 PM by nmduc073

    When to use View State?

    nmduc073
      Hi,
      I am confused of View State. From https://service.acrobat.com/livedocs/flex/2/langref/mx/states/State.html, view state is a particular view of a component. It also gives an example which there is login form. When it has one more text box, it is a new view state. However, I still don't understand. Why do we have to use a view state in that example? Why don't we just write ActionScript code to add a textbox in the click event? What kind of changes can make a new view state? Is it a new view state if I change the color of text box?

      Please tell me when we should use View State? Is there any drawback with view state?
      Thank in advance.
        • 1. Re: When to use View State?
          peterent Level 2
          States were introduced to make changing a component easier. Yes - you can do all this in ActionScript. But setting up a couple of states in Flex Builder Design View is a snap. Then you can add transitions to apply effects to change from one state to another.

          For example: you have a component with two parts: a search form and a results area. The search form is normally hidden. Now you could do a number of things here, but with a state change you can have the search form expand and the results area shrink - a cool effect that gives the user a better experience and it is easy to set up without using ActionScript.
          • 2. Re: When to use View State?
            nmduc073 Level 1
            Thank you.n So, the main reason is to make a cool effect.
            • 3. Re: When to use View State?
              peterent Level 2
              No, effects aren't the main reason to use states. States are just a quick and easy way to make modifications to the user interface - a way that's different from traditional practices (eg, a page refresh in HTML).

              Consider a database search. You write a panel that has space for the results of the search. The base state could have this single space (maybe a DataGrid). Then you make a SearchState which also shows a place to enter the query. You might decide to use a state because the query area might be large and if you leave it up, eats into the results space - making the user scroll more.

              So you only show the query area when the user picks a Search button. To save you lots of time and code, you can use a state to make the query area appear and the results area smaller. Doing this in Flex Builder's Design View is simple.

              To add a coolness factor, you add a transition which makes the results area animate as it shrinks and the query area fade in. When the user closes the query area - or perhaps when the results return - you just switch the state. This automatically takes away the query area and resizes the results. The transition will fade out the query area and animate the resize of the results area.

              You do not need transitions with states, by the way. It is just a cosmetic thing.
              • 4. Re: When to use View State?
                nmduc073 Level 1
                Thank you. And I have another question.

                In some examples, I see that there are activities such as child removing, child addition... to change to new state.
                [CODE]
                <mx:states>
                <mx:State name="Description">
                <mx:AddChild relativeTo="{hbox1}" position="before">
                <mx:TextArea width="200" height="180"
                borderStyle="none"
                text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. "/>
                </mx:AddChild>
                <mx:RemoveChild target="{descButton}"/>
                <mx:AddChild relativeTo="{hbox1}" position="before">
                <mx:Button label="Close Description"
                click="this.currentState=''"/>
                </mx:AddChild>
                </mx:State>
                </mx:states>
                [/CODE]
                However, others only have a state name. And activities are defined in Transition.
                For example, here is the code from Configurator example: ( http://labs.adobe.com/wiki/index.php/Flex_3:Demo_Configurator)
                [CODE]
                <mx:states>
                <mx:State name="Help"/>
                <mx:State name="Final"/>
                <mx:State name="NoHelp"/>
                <mx:State name="NoFinal"/>
                </mx:states>

                <mx:Transition id="toFinalFromAny" fromState="*" toState="Final">
                <!-- The Parallel tag allows for more than one transition at the same time -->
                <mx:Parallel target="{finalScreen}">
                <!-- This will blur and fade the window as it transitions in -->
                <mx:SetPropertyAction target="{configuratorHeader.resetButton}" name="enabled" value="{false}"/>
                <mx:SetPropertyAction target="{finalScreen}" name="visible" value="{true}"/>
                <mx:Fade duration="300" alphaFrom="0" alphaTo="1" />
                <mx:Blur duration="400" blurYFrom="20" blurYTo="1" blurXFrom="20" blurXTo="1" />
                </mx:Parallel>
                </mx:Transition>
                [/CODE]

                It makes me confused. When should we use each of them?
                • 5. Re: When to use View State?
                  peterent Level 2
                  This is an excellent question. Let's use a simple example: in the base state there is a button. When you press the button 2 labels slide into view.

                  <mx:Button id="button1" label="Switch State" click="currentState='ExampleState' " />

                  <mx:states>
                  <mx:State name="ExampleState">
                  <mx:AddChild relativeTo="{hbox1}" position="before">
                  <mx:Label id="label1" text="First label" />
                  </mx:AddChild relativeTo="{button1}" position="before">
                  <mx:Label id="label2" text="Second label" />
                  </mx:AddChild>
                  </mx:State>
                  </mx:states>

                  When the state is changed the two labels are added. You might think that the labels are created (via new Label()) but that's not true. The Labels exist, but they are not added to the container's display list. When you make components in ActionScript you do something like this:

                  var label:Label = new Label();
                  label.text = "Test";
                  addChild(label);

                  The addChild(label) is what the <mx:AddChild> tag is doing. When a state changes and the AddChild is undone, the label is not destroyed, just removed from the display list using removeChild(label).

                  Now the transition. The idea is to have the first label appear, THEN the second label.

                  <mx:transitions>
                  <mx:Transition fromState="" toState="ExampleState">
                  <mx:Sequence>
                  <mx:AddChildAction target="{label1}" />
                  <mx:Move target="{label1}" fromX="-200" toX="200" />
                  <mx:AddChildAction target="{label2}" />
                  <mx:Move target="{label2}" fromX="-200" toX="300" />
                  </mx:Sequence>
                  </mx:Transition>
                  </mx:transitions>

                  A Sequence is used because you want to control the order in which the state changes. The AddChildAction corresponds to the AddChild in the state. This means "AddChild label1 now". This is followed by a Move which slides it into place from off screen. Then another AddChildAction to activate the AddChild for label2. This is followed by a Move for label2 to slide it into place.

                  --- NOTE: use <mx:Parallel> if you want actions and effects to happen at the same time --

                  If you don't have the <mx:Transition> at all, the two labels just appear. If you have the <mx:Transition> without the AddChildActions, Flex is going to pop the labels into view right away and then run the Transition. This usually winds up not doing what you want at all.

                  So: in a State, <mx:AddChild> has <mx:AddChildAction> in a Transition; <mx:RemoveChild> in a State has <mx:RemoveChildAction> in a Transition.

                  There is also: <mx:SetProperty> in a State and <mx:SetPropertyAction> in a Transition; <mx:SetStyle> in a State and <mx:SetStyleAction> in a Transition. The "Action" tags in a Transition just tell Flex when you want the corresponding tags in the State to be activated and run.

                  HTH
                  • 6. Re: When to use View State?
                    nmduc073 Level 1
                    Thank, peterent.