Switch form with Transition : Form « Components « Flex






  1. Flex
  2. Components
  3. Form

Switch form with Transition

Switch form with Transition
           

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
        <mx:State name="Charge">
            <mx:AddChild relativeTo="{form1}" position="lastChild">
                <mx:FormItem label="Charge Number" id="formitem1">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>

        </mx:State>
        <mx:State name="Check">
            <mx:AddChild relativeTo="{form1}" position="lastChild">
                <mx:FormItem label="Routing Number" id="formitema">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>

        </mx:State>
    </mx:states>
    <mx:transitions>
        <mx:Transition id="paymentTransitionCharge" fromState="*" toState="Charge">
            <mx:Parallel targets="{[formitem1,formitema]}">
            <mx:Fade duration="400"/>
            <mx:Move xFrom="0" yFrom="0" duration="400"/>
        </mx:Parallel>
        </mx:Transition>
            <mx:Transition id="paymentTransitionCheck" fromState="*" toState="Check">
                <mx:Parallel targets="{[formitema,formitem1]}">
                <mx:Fade duration="400"/>
                <mx:Move xFrom="0" yFrom="0" duration="400"/>
                </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    <mx:Form x="103" y="56" width="397" height="284" id="form1">
        <mx:RadioButtonGroup id="radiogroup1"/>
        <mx:RadioButton x="143" y="70" label="Check" groupName="radiogroup1" click="currentState='Check'"/>
        <mx:RadioButton x="143" y="94" label="Charge" groupName="radiogroup1" click="currentState='Charge'"/>
    </mx:Form>
</mx:Application>








Related examples in the same category

1.Making use of form-related containersMaking use of form-related containers
2.Form Radio button groupForm Radio button group
3.Login form and get password back formLogin form and get password back form
4.Add submitForm() and debugMessage() functions as click event handlersAdd submitForm() and debugMessage() functions as click event handlers
5.Register the submitForm() and debugMessage() handler functions with b1's click eventRegister the submitForm() and debugMessage() handler functions with b1's click event
6.Clear form fieldsClear form fields
7.Form item labelForm item label
8.Empty form tag
9.FormHeading controlFormHeading control
10.A form for first name, last name, address, city, zip code and countryA form for first name, last name, address, city, zip code and country
11.Form Text required fieldForm Text required field
12.submit function can access the form control data directlysubmit function can access the form control data directly
13.Populating a Form control from a data modelPopulating a Form control from a data model
14.Form control barForm control bar
15.Form field with LabelForm field with Label
16.Add the submitForm() and debugMessage() functions as handlers of the click event:Add the submitForm() and debugMessage() functions as handlers of the click event:
17.Register the submitForm() and debugMessage() handler functionsRegister the submitForm() and debugMessage() handler functions
18.Add form header to a formAdd form header to a form
19.Bind form input control to ModelBind form input control to Model
20.Form label with iconForm label with icon
21.One form two FormHeadingsOne form two FormHeadings
22.Model data and form controls
23.Password form fieldPassword form field
24.Contact Editor FormContact Editor Form
25.Travel formTravel form
26.Form with ControlBarForm with ControlBar
27.Form Multiple HeadingsForm Multiple Headings
28.Adding border to FormAdding border to Form
29.defines the FormHeading controldefines the FormHeading control
30.Using Form controls to hold your form dataUsing Form controls to hold your form data
31.The submit function can access the form control data directly,The submit function can access the form control data directly,
32.Form Data Model ValueForm Data Model Value
33.A form that reads static data from a data model to obtain the value for a form fieldA form that reads static data from a data model to obtain the value for a form field
34.Adding a load event and a fault event to the form.Adding a load event and a fault event to the form.
35.Select a value for the formatString property from the drop-down listSelect a value for the formatString property from the drop-down list
36.Show individual times for the initialization and creation of each form element.Show individual times for the initialization and creation of each form element.
37.Register a single listener function, submitForm(), with two different buttonsRegister a single listener function, submitForm(), with two different buttons
38.Form ButtonForm Button
39.Form default buttonForm default button
40.The form and the buttons overlap as the application grows smaller, for example.The form and the buttons overlap as the application grows smaller, for example.
41.Form with ButtonForm with Button
42.Login ExampleLogin Example
43.Checking the box could make the user e-mail field requiredChecking the box could make the user e-mail field required