Professional Cairngorm™

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" ...