<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:states>
		<mx:State name="login">
			<mx:AddChild>
				<mx:Form id="loginForm">
					<mx:FormHeading label="Login" />
					<mx:FormItem label="Username:">
						<mx:TextInput id="log_username" />
					</mx:FormItem>
					<mx:FormItem label="Password:">
						<mx:TextInput id="log_password"
								displayAsPassword="true" />
					</mx:FormItem>
					<mx:FormItem>
						<mx:Button label="Login" />
					</mx:FormItem>
				</mx:Form>
			</mx:AddChild>
		</mx:State>
		<mx:State name="register">
			<mx:AddChild>
				<mx:Form id="registerForm">
					<mx:FormHeading label="Register" />
					<mx:FormItem label="Username:">
						<mx:TextInput id="reg_username" />
					</mx:FormItem>
					<mx:FormItem label="Password:">
						<mx:TextInput id="reg_password1"
								displayAsPassword="true" />
					</mx:FormItem>
					<mx:FormItem label="Confirm password:">
						<mx:TextInput id="reg_password2"
								displayAsPassword="true" />
					</mx:FormItem>
					<mx:FormItem>
						<mx:Button label="Register" />
					</mx:FormItem>
				</mx:Form>
			</mx:AddChild>
		</mx:State>
	</mx:states>

	<mx:transitions>
		<mx:Transition id="loginTransition"
				fromState="*"
				toState="login">
			<mx:WipeDown target="{loginForm}"/>
		</mx:Transition>
		<mx:Transition id="registerTransition"
				fromState="*"
				toState="register">
			<mx:WipeDown target="{registerForm}"/>
		</mx:Transition>
	</mx:transitions>

	<mx:Script>
		<![CDATA[
			import mx.events.ItemClickEvent;

			private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
				currentState = evt.item.data;
			}
		]]>
	</mx:Script>

	<mx:Array id="dp">
		<mx:Object data="" label="Default state" />
		<mx:Object data="login" label="Login" />
		<mx:Object data="register" label="Register" />
	</mx:Array>

	<mx:ApplicationControlBar dock="true">
		<mx:ToggleButtonBar id="toggleButtonBar"
				dataProvider="{dp}"
				itemClick="toggleButtonBar_itemClick(event);" />
	</mx:ApplicationControlBar>

</mx:Application>
