1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<?xml version="1.0" encoding="utf-8"?>
<FLContainer 
	creationComplete="successMessage.alpha = 0;"
	xmlns="obecto.core.*" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:validation="obecto.validation.*" 
	xmlns:data="obecto.validation.data.*" xmlns:form="component.flit.form.*" xmlns:layout="obecto.layout.*" 
	xmlns:transition="obecto.transition.*" xmlns:container="obecto.task.container.*" xmlns:animation="obecto.task.animation.*" 
	xmlns:display="flash.display.*">
	
	<mx:Script>
		<![CDATA[
			import obecto.tween.easing.PennerEasing;
			import obecto.task.animation.PropertiesTweenAnimationType;
		]]>
	</mx:Script>
	
	<mx:Metadata>
		[Part(name="successMessage", path="success")]
		[Part(name="contentPane", path="contentPane")]
	</mx:Metadata>
	
	<asset>
		@Embed(source="asset/Form.swf", symbol="FormContainer")
	</asset>
	
	<layout>
		<layout:VerticalLayout itemSpacing="100"/>
	</layout>
	
	<contentChildren>
		<form:FormItem id="passwordInput" label="Password:"/>
		<form:FormItem id="retypeInput" label="Retype:"/>
		<form:FormButton id="submitButton" x="296" label="Submit" enabled="{validationGroup.changedAndValid}"
			click="if (submitButton.enabled) transitionsManager.state = successState;"/>
	</contentChildren>
	
	<display:MovieClip id="successMessage"/>
	
	<validation:ValidatorGroup id="validationGroup">
		<validation:Validator source="{passwordInput.inputField}"
			changeEvent="change" focusInEvent="focusIn" focusOutEvent="focusOut"
			error="{passwordInput.errorBubble}" errorHalo="{passwordInput.errorHalo}">
			<data:BooleanExpressionValidator data="{passwordInput.inputText.length != 0}"
				errorMessage="Please, enter password!"/>
		</validation:Validator>
		
		<validation:Validator source="{retypeInput.inputField}"
			changeEvent="change" focusInEvent="focusIn" focusOutEvent="focusOut"
			error="{retypeInput.errorBubble}" errorHalo="{retypeInput.errorHalo}">
			<data:BooleanExpressionValidator data="{retypeInput.inputText.length != 0}"
				errorMessage="Please, retype password!"/>
			<data:BooleanExpressionValidator data="{retypeInput.inputText == passwordInput.inputText}"
				errorMessage="Passwords don't match!"/>
		</validation:Validator>
	</validation:ValidatorGroup>
	
	<transition:TransitionsManager id="transitionsManager" initialState="{passwordConfirmationState}">
		<transition:states>
			<transition:State id="passwordConfirmationState" name="passwordConfirmation"/>
			<transition:State id="successState" name="expanded"/>
		</transition:states>
		
		<transition:transitions>
			<transition:Transition fromState="{passwordConfirmationState}" toState="{successState}">
				<container:Sequence>
					<animation:PropertiesTweenAnimation target="{passwordInput}"
						tweenType="{PropertiesTweenAnimationType.TIME_TWEEN}" duration="0.2"
						easingFunction="{PennerEasing.linear}">
						<animation:TweenProperty name="alpha" endValue="0"/>
					</animation:PropertiesTweenAnimation>
					
					<animation:PropertiesTweenAnimation target="{retypeInput}"
						tweenType="{PropertiesTweenAnimationType.TIME_TWEEN}" duration="0.2"
						easingFunction="{PennerEasing.linear}">
						<animation:TweenProperty name="alpha" endValue="0"/>
					</animation:PropertiesTweenAnimation>
					
					<animation:PropertiesTweenAnimation target="{submitButton}"
						tweenType="{PropertiesTweenAnimationType.TIME_TWEEN}" duration="0.2"
						easingFunction="{PennerEasing.linear}">
						<animation:TweenProperty name="alpha" endValue="0"/>
					</animation:PropertiesTweenAnimation>
					
					<container:Parallel>
						<animation:PropertiesTweenAnimation target="{successMessage}"
							tweenType="{PropertiesTweenAnimationType.TIME_TWEEN}" duration="0.5"
							easingFunction="{PennerEasing.linear}">
							<animation:TweenProperty name="alpha" endValue="1"/>
						</animation:PropertiesTweenAnimation>
						
						<animation:PropertiesTweenAnimation target="{successMessage}"
							tweenType="{PropertiesTweenAnimationType.TIME_TWEEN}" duration="0.5"
							easingFunction="{PennerEasing.easeOutCubic}">
							<animation:TweenProperty name="y" startValue="-40" endValue="110"/>
						</animation:PropertiesTweenAnimation>
					</container:Parallel>
				</container:Sequence>
			</transition:Transition>
		</transition:transitions>
	</transition:TransitionsManager>
	
</FLContainer>