1. flex4 status overview
in many rich Internet applications, changes in the appearance of webpages are based on user behavior. A State defines a manifestation of a component. To use the status, you should first define a default status, and then rewrite or change it on this basis to form a series of other styles. You can add or remove sub-elements, change CSS or attribute values, and change the triggered events.
below is a simple example:
xmlns: S = "Library: // ns.adobe.com/flex/spark"
xmlns: MX = "Library: // ns.adobe.com/flex/halo "
width =" 400 "Height =" 300 ">
<S: States>
<S: State name = "state1"/>
<S: State name = "state2"/>
</S: States>
<Mx: vbox verticalcenter = "0"
Horizontalcenter = "0">
<S: button
<! -- When the status is state1, set the label attribute and click the event -->
Label. state1 = "small"
Click. state1 = "currentstate = 'state2 '"
<! -- When the status is state2, set the width attribute, height attribute, label2 attribute, and click event -->
Width. state1 = "200"
Height. Status 2 = "200"
Label. state2 = "big"
Click. state2 = "currentstate = 'state1 '"/>
<! -- The label is displayed only when the status is state2 -->
<Mx: Label includein = "state2"
Width = "100%"
TEXT = "state 2 only"
Textalign = "center"/>
</MX: vbox>
</S: Application>
2. Define the status
The State definition in flex4 is different from that in flex3. You only need to define the State in the <states> </states> label. Adding sub-elements and setting attributes is not implemented here. As follows:
<S: States>
<S: State name = "state1"/>
<S: State name = "state2"/>
<S: State name = "state3"/>
.
.
</S: States>
3. Change the status
The uicomponent class defines a currentstate attribute and changes the state by changing the value of this attribute, the default value of this attribute is defined as the first State in the <states> </states> label. For example:
<S: button id = "B1" label = "change to state 1" Click = "currentstate = 'state2';"/>
<S: button id = "B2" label = "change to the default" Click = "currentstate = 'state1 ';"/>
Of course, you can also use the setcurrentstate method of the uicomponent class.
4. Set attributes, styles, and events for a status.
In flex4, the dot syntax is used to set the attribute values of a component in a certain state. For example:
<S: button label = "default state" label. state2 = "new state"/>
The preceding Code The lable value of this button is new state in state2 state, and default state in other States.
The above code can also be written as follows:
<S: button>
<S: Label> default state </S: Label>
<S: Label. state2> new State </S: Label. state2>
</S: button>
To clear the value of an attribute in a certain state, you can make the attribute value equal @ Clear . As follows:
<Button color = "0xff0000" color. state1 = "@ clear"/>
You can also use the dot syntax for events, for example:
<S: button id = "B1" label = "Click me"
Click = "ta1.text = 'hello ';"
Click. state1 = "ta1.text = 'Goodbye '"/>
5. add or remove Components
In flex4, you can add or remove a component directly in the attributes of the component. The component has two additional attributes: includein and excludefrom. Includein indicates that the component is to be added to the status indicated by the property value. excludefrom indicates that the component is to be deleted from the status indicated by the property value. includein and excludefrom cannot appear in the same component label, their values can be multiple States separated by commas. For example:
<S: States>
<S: State name = "default"/>
<S: State name = "addcheckbox"/>
<S: State name = "addtextinput"/>
<S: State name = "addcheckboxandbutton"/>
</S: States>
<S: checkbox id = "mycb" label = "checkbox"
Includein = "addcheckbox, addcheckboxandbutton"/>
<S: textarea text = "exclude from addtextinput"
Excludefrom = "addtextinput"/>
6. Change the parent element of a component.
The parent element of a component can also be changed. Do you believe it? But flex4 does. The <FX: reparent> label is used. Let's look at the code segment!
<? XML version = "1.0" encoding = "UTF-8"?>
<! -- States \ newstatesreparent. mxml -->
<S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009"
Xmlns: MX = "Library: // ns.adobe.com/flex/halo"
Xmlns: S = "Library: // ns.adobe.com/flex/spark">
<S: layout>
<S: verticallayout/>
</S: layout>
<S: States>
<S: State name = "parent1"/>
<S: State name = "parent2"/>
</S: States>
<S: hgroup>
<S: Panel id = "Panel1"
Height = "100" width = "100"
Title = "Panel 1">
<S: button id =" Setcb "Includein =" parent1 "/>
</S: Panel>
<S: Panel id = "panel2"
Height = "100" width = "100"
Title = "Panel 2">
<FX: reparent target =" Setcb "Includein =" parent2 "/>
</S: Panel>
</S: hgroup>
<S: hgroup>
<S: button label = "parent 1"
Click = "currentstate = 'parent1 '"
Enabled. parent1 = "false"/>
<S: button label = "parent 2"
Click = "currentstate = 'parent2 '"
Enabled. parent2 = "false"/>
</S: hgroup>
</S: Application>
This sentence: <FX: reparent target =" Setcb "Includein =" parent2 "/> what does it mean? Target value Setcb That is, the component we want to change to our father is Setcb ,Setcb The ID of the button of the first panel! When parent2 is switched to the state, this button becomes the child element of the second panle. Because includein = "parent2" tells us that when the status of parent2 is changed Setcb To the parent element of FX: reparent, that is, the second panel.
7. Control when adding child elements
Flex4 is created when it first changes to the state that requires this child element to appear. This is the default situation. However, if it takes a long time to create this sub-element, the user must feel the delay when switching the status, which is not good. Therefore, you can change the default value. By changing the itemcreationpolicy, this is a component property. It has two values: deferred, default value, which means that it is created when this component is first required to appear; immediate, which is Program This sub-element will be created as soon as it is started.
Once a child element is created, it will always exist.
The interface is not changed only through state. You can also use navigators, such as accordion, Tab navigator, and viewstack containers. Which one to use depends on your application requirements and user interface design.
8. Create a status Group
In flex4, You Can Group States. For example, the first and second states are a group, and the third and fourth states are a group. Let's first look at how to group it?
<S: State name = "default"/>
<S: State name = "addcheckbox" stategroups = "group1"/>
<S: State name = "addtextinput"/>
<S: State name = "addcheckboxandbutton" stategroups = "group1"/>
You only need to add the stategrooups attribute.
What are the benefits of adding a group?
If a component appears in multiple States, you can divide these States into one group. Then, when any status in this family appears, the setting of this component will be valid. The value after the dot syntax can be the group name, and the values of excludefrom and includein can also be the group name.
Example 1: a simple example of States
<? XML version = "1.0"?>
<S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009"
Xmlns: MX = "Library: // ns.adobe.com/flex/halo"
Xmlns: S = "Library: // ns.adobe.com/flex/spark">
<S: States>
<! -- Define the new view states. -->
<S: State name = "default"/>
<S: State name = "newbutton"/>
</S: States>
<S: vgroup id = "g1">
<S: hgroup>
<! -- Disable button in the newbutton view State.
When the current status is newbutton, the B1 button becomes invalid.
-->
<S: button id = "B1" label = "Click me"
Enabled. newbutton = "false"/>
<! -- Add a new child control to the vbox. -->
<! -- This button is displayed only when the status is newbutton -->
<S: button id = "B2" label = "New button"
Includein = "newbutton"/>
</S: hgroup>
<S: button label = "change to newbutton state"
Click = "currentstate = 'newclick';"/>
<! -- Define button control to switch to default view State. -->
<S: button label = "change to default view state"
Click = "currentstate = 'default';"/>
</S: vgroup>
</S: Application>
