Using states to control the display of the popup component. : State « Effects « Flex

1. Flex
2. Effects
3. State

Using states to control the display of the popup component.

          

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->



<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>
    <fx:Style>
        .popUpBox { 
           backgroundColor : #e9e9e9; 
           borderStyle : "solid"; 
           paddingTop : 2; 
           paddingBottom : 2; 
           paddingLeft : 2; 
           paddingRight : 2; 
        }
    </fx:Style>
    <s:states>
        <s:State name="normal" />
        <s:State name="emailOpen" />
    </s:states>
    <s:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence>
                <s:Fade target="{emailPopUp.popUp}" duration="250" />
            </mx:Sequence>
        </mx:Transition>
    </s:transitions>
    <s:Group x="60">
        <s:Button label="Send email" click="currentState = 'emailOpen'" />
        <s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"
            styleName="popUpBox" includeIn="emailOpen"
            displayPopUp.normal="false" displayPopUp.emailOpen="true">
            <mx:Form>
                <mx:FormItem label="From :">
                    <s:TextInput />
                </mx:FormItem>
                <mx:FormItem label="To :">
                    <s:TextInput />
                </mx:FormItem>
                <mx:FormItem label="Subject :">
                    <s:TextInput />
                </mx:FormItem>
                <mx:FormItem label="Message :">
                    <s:TextArea width="100%" height="100" maxChars="120" />
                </mx:FormItem>
                <mx:FormItem direction="horizontal">
                    <s:Button label="Send" click="currentState = 'normal'" />
                    <s:Button label="Cancel" click="currentState = 'normal'" />
                </mx:FormItem>
            </mx:Form>
        </s:PopUpAnchor>
    </s:Group>
</s:Application>

   
    
    
    
    
    
    
    
    
    
  

Related examples in the same category

1.	Add child to State
2.	Add child before in a State
3.	Add child to position in a State
4.	Add or remove children
5.	Using different creation policies
6.	Setting overrides on component properties
7.	Change the enabled property for two Button controls, setting one false, and the other true
8.	View defining two states
9.	View States
10.	Setting event handlers with State
11.	Change control property in state changing
12.	Remove a child in state changing
13.	Create State based on existing State
14.	Set current state to null
15.	Change control color in State
16.	Add child relative to an existing control in State
17.	Use two statements in click event inline
18.	Add child and change property when state changed
19.	Change view state
20.	Creating a simple view state
21.	Set Transition state
22.	Two statements in the click attribute
23.	Adding and removing components with State
24.	Adding and removing components by changing state
25.	Adding and removing components in State with RemoveChild
26.	Applying states
27.	Validate either a United States ZIP code or a Canadian postal code
28.	Define States
29.	States Event Handlers
30.	States Includes and Excludes
31.	Deferred view state, and you cannot access it until after the first switch to the Deferred view state
32.	Use the Reset button to restore the collection view to its original state.