Professional Cairngorm™

15.6. Views

First you will deal with the view responsible for displaying messages to the user.

In the com.FlexBlog.views package create a new component based on HBox. Name it NotificationDisplay and clear the height and width values. Edit the component to match the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" visible="{this.message.length}"><mx:Script>
<![CDATA[
    import com.FlexBlog.valueobjects.UserNotificationVO;
    [Bindable]
    private var message:String = '';
    [Bindable]
    private var messageStyle:String = '';
    public function set notification(notification:UserNotificationVO):void{
        this.message = notification.message;
        if(notification.type == UserNotificationVO.ERROR_MESSAGE){
            this.messageStyle ='errorStyle';
        }else{
            this.messageStyle='';
        }
    }
    private function clearMessage(event:MouseEvent):void{
        this.message = '';
        this.messageStyle='';
    }
    ]]>
</mx:Script>
<mx:Style>
    .errorStyle{
        color:#95090f;
    }
</mx:Style>
    <mx:Button id="clearButton" label="Clear" click="clearMessage(event);"/>
    <mx:Text fontWeight="bold" fontSize="14" text="{this.message}"
styleName="{this.messageStyle}" width="100%"/>
</mx:HBox>

Starting at the top of the component, notice that the visible property has been tied to the length of the message property. Therefore, this component will display itself only if there is a message to display.

There are two private variables: message and messageStyle. These are used to tell other parts of this component what message to display ...