Page polymorphism-state object implemented by Flex

In the Flex program, the concept of state design is introduced. In a program, the interface is divided into relatively independent parts according to the functional requirements. During the running process, as the user interacts, the interface switches between different parts. For example, in the shopping cart program, the logon interface, the shopping interface, the shopping cart interface, and the payment interface represent different functions, showing the running status of the current program, each interface is a Status ).

In a complex program, it is very important to divide the program according to the function structure. In this way, the problem becomes clear, which is also the reason for using the state design.

In fact, we have had a lot of dealings with the status, but we didn't make it theoretical. For example, the mouse clicking action is also composed of several States: move the mouse up, press the mouse, release the mouse, move the mouse away. To analyze the problem from this perspective, the Organization is clear and it is not easy to fall into annoying logical disputes.

When the status changes, we can add a deformation animation for the switching of the two statuses. Deformation animation consists of several animation effects. It can be understood that state switching is also a kind of behavior. Therefore, the creation and use of deformation animation are as simple as the behavior.

In Flex, status creation is also very simple. We do not need to spend time designing the interface, nor care about the status operation methods. These are all done by Flex.

All components implement the state mechanism. Generally, container-type components or container-specific components and state mechanisms are the best combination, so that the state mechanism can control a functional block of the program.

Please refer to the source code of the demo. mxml instance:
<? Xml version = "1.0"?> <Br/> <! -- Simple example to demonstrate the States class. --> <br/> <mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml"> <br/> <mx: Script> <br/> <! -- [CDATA [<br/> import mx. controls. alert; <br/> import mx. events. closeEvent; </p> <p> private function clickHandler (event: Event): void {<br/> Alert. show ("Do you want to save your changes? "," Save Changes ", 3, this, alertClickHandler); <br/>}</p> <p> // Event handler function for displaying the selected Alert button. <br/> private function alertClickHandler (event: CloseEvent): void {<br/> if (event. detail = Alert. YES) <br/> {<br/> // status. text = "You answered Yes"; <br/> lable1.text = "Please Login! "; <Br/> currentState =''; <br/>}< br/> else <br/> {<br/> currentState = 'register '; <br/> // status. text = "You answered No"; <br/>}< br/>] --> <br/> </mx: script> <br/> <! -- Define one view state, in addition to the base state. --> <br/> <mx: states> <br/> <mx: State name = "Register"> <br/> <mx: addChild relativeTo = "{loginForm}" position = "lastChild"> <br/> <mx: target> <br/> <mx: formItem id = "confirm" label = "Confirm:"> <br/> <mx: TextInput/> <br/> </mx: formItem> <br/> </mx: target> <br/> </mx: AddChild> <br/> <mx: addChild relativeTo = "{loginForm}" position = "lashChild"> <br/> <Mx: target> <br/> <mx: FormItem id = "email" label = "Email:"> <br/> <mx: textInput id = "emailId"/> <br/> </mx: FormItem> <br/> </mx: target> <br/> </mx: addChild> <br/> <mx: SetProperty target = "{loginPanel}" name = "title" value = "Register"/> <br/> <mx: setProperty target = "{loginButton}" name = "label" value = "Register"/> <br/> <mx: setEventHandler target = "{loginButton}" name = "click" handlerFunction = "clickHandler "/> </P> <mx: setStyle target = "{loginButton}" <br/> name = "color" value = "blue"/> <br/> <mx: removeChild target = "{registerLink}"/> </p> <mx: addChild relativeTo = "{spacer1}" position = "before"> <br/> <mx: target> <br/> <mx: linkButton id = "loginLink" label = "Return to Login" click = "currentState ='' "/> <br/> </mx: target> <br/> </mx: AddChild> <br/> </mx: State> <br/> </mx: states> </p> <! -- Define a Panel container that defines the login form. --> <br/> <mx: panel title = "Login" id = "loginPanel" <br/> horizontalScrollPolicy = "off" verticalScrollPolicy = "off" <br/> paddingTop = "10" paddingLeft = "10" paddingRight = "10" paddingBottom = "10"> </p> <mx: text width = "100%" color = "blue" id = "lable1" <br/> text = "Click the 'need to Register? 'Link to change state. click the 'return to login' link to Return to the base state. "/> </p> <mx: Form id =" loginForm "> <br/> <mx: FormItem label =" Username: "> <br/> <mx: TextInput/> <br/> </mx: FormItem> <br/> <mx: FormItem label =" Password: "> <br/> <mx: TextInput/> <br/> </mx: FormItem> <br/> </mx: form> </p> <mx: ControlBar> <br/> <mx: LinkButton id = "registerLink" label = "Need to Register? "<Br/> click =" currentState = 'register '"/> <br/> <mx: spacer width = "100%" id = "spacer1"/> <br/> <mx: button label = "Login" id = "loginButton"/> <br/> </mx: ControlBar> </p> </mx: panel> <br/> </mx: Application> <br/>
Here, a pair of mx: State labels are added to the mx: states label to define a State and name it "detail ". You can use the following method in the State object:

L SetEventHandler: sets the listening method for an event of the object.

L SetProperty: Set Object Attributes

L SetStyle: Set the object style

L AddChild: Add a child element to the object

L RemoveChild: deletes a child element.

L transition: sets the transition animation effect of the State.

When a program or component switches to the target State, the method added in it is automatically called.

In the preceding example, the addchild and removechild methods are used. The relativeto attribute of addchild indicates the target container, and position indicates the position of the new object in the container. The optional values include before, after, firstchild, and lastchild.

<Mx: addchild relativeto = "{contentpanel}" position = "lastchild" creationpolicy = "all">

......

</MX: addchild>

Position is lastchild by default, indicating that all child-level elements are at the end; firstchild indicates that all child-level elements are added at the beginning of the target; Before and After indicate that they are added to the container of the object, respectively, before and after the object. When an object is added, creationpolicy can control the display of child elements of the object. Optional values include all, auto, none, and queued. All indicates that the object is always created; Auto indicates that the object is created only when the object is required; queued indicates that the object is placed in the queue waiting for creation, and the object is initialized before creating child-level elements; none indicates that the object is not created until the createcomponentsfromdescriptors function is called. The default value is auto. Sometimes it can be set to all to force the object to always be displayed. If there are no special requirements, set it to all.

Removechild is easy to use. You only need to specify the target:

<Mx: removechild target = "{IMG}"> </MX: removechild>

This statement deletes an IMG object.

When the State object is used, the currentState attribute represents the State of the current object, which allows us to conveniently switch the State. In the changeState function, currentState is used to change the state:

// Determines the current status. The default status is null.

If (currentState = "detail "){

CurrentState = ""; // switch to the default state

Btn. label = "Learn More"; // modify the text of the button

} Else {

CurrentState = "detail"; // switch to the detail status

Btn. label = "back to introduction ";

}

<Mx: State name = "detail">... <Mx: State> the code in the label is executed. If the default status is returned again, all objects are restored. In other words, modifications made by AddChild and RemoveChild in the "detail" status do not affect the default status, and the deleted objects are still in the status.