16.6. Views
Now you need a view that will allow the user to enter a user name and password. Additionally, this view will display the welcome message and provide a logout mechanism when the user is logged in.
In the com.FlexBlog.views package, create a new component based on HBox. Name it Login. Remember to clear the height and width from the creation dialog. Edit the Login component to match the following:
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import com.FlexBlog.events.LogoutEvent; import com.FlexBlog.events.LoginEvent; import com.FlexBlog.valueobjects.UserVO; import com.FlexBlog.models.FlexBlogModel; [Bindable] private var model:FlexBlogModel =FlexBlogModel.getInstance(); private function doLogin(event:MouseEvent):void{
var user:UserVO = new UserVO(); user.userName = this.userName.text; user.password = this.password.text; new LoginEvent(user).dispatch(); } public function set loggedin(obj:Object):void{ if (obj){ this.userName.text =''; this.password.text = ''; } } ]]> </mx:Script> <mx:HBox visible="{this.model.currentUser == null}"> <mx:Label text="User Name:"/> <mx:TextInput id="userName"/> <mx:Label text="Password:"/> <mx:TextInput id="password" displayAsPassword="true"/> <mx:Button id="loginButton" label="Login" click="doLogin(event);"/> </mx:HBox> <mx:HBox visible="{this.model.currentUser != null}"> <mx:Text text="Welcome {this.model.currentUser.firstName}"/> <mx:Button id="logoutButton" label="Logout" ...
Get Professional Cairngorm™ now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.