two-way data binding between model and screen

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="352" height="152">
	<mx:Script>
		<![CDATA[
			
			[Bindable]
			public var username:String;
			
			[Bindable]
			public var group:String;
			
			
		]]>
	</mx:Script>
	
	<mx:Binding source="usernameId.text" destination="username" />
	<mx:Binding source="groupId.text" destination="group" />
	
	<mx:Label x="31" y="25" text="username"/>
	<mx:TextInput id="usernameId" text="{username}" x="135" y="23"/>
	<mx:Label x="31" y="79" text="group"/>
	<mx:TextInput id="groupId" text="{group}" x="135" y="77"/>
</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	xmlns:ns1="view.*" width="617" height="206" creationComplete="onComplete()">
	<mx:Script>
		<![CDATA[
			
			
			private function onComplete() : void {
				screen1.username="<username>";
				screen1.group="<group>";
			}
			
			private function onClick():void {
				trace("username: "+screen1.username);
				trace("group=:"+screen1.group);
			}
		]]>
	</mx:Script>
	<ns1:FormViewNModel id="screen1" x="148" y="33">
	</ns1:FormViewNModel>
	<mx:Button x="26" y="50" label="Show Data" click="onClick()"/>
	
</mx:Application>