Professional Cairngorm™

19.6. Views

You need views that will allow the user to enter comments and display the comments for the currently selected posts. You will continue the practice, started in Chapter 18 on loading posts, of breaking views down into distinct components.

Start by creating the view that will allow users to enter comments. In the com.FlexBlog.views package create a new component based on Form. Name it CommentForm. Remember to clear the height and width from the creation dialog. Edit the component to match the following:

<?xml version="1.0" encoding="utf-8"?> <mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" visible="{this.model.currentUser != null}"> <mx:Script> <![CDATA[ import com.FlexBlog.events.AddCommentEvent; import com.FlexBlog.models.FlexBlogModel; import com.FlexBlog.valueobjects.CommentVO; import mx.controls.Alert; import mx.events.ValidationResultEvent; private var model:FlexBlogModel =FlexBlogModel.getInstance() private function submitComment(event:MouseEvent):void{ if (this.bodyValidator.validate().type == ValidationResultEvent.INVALID) { Alert.show('Please correct the highlighted fields. Mouse over each field for an error description.'); }else{ this.submitCommentButton.enabled = false; var comment:CommentVO =new CommentVO(); comment.userId = this.model.currentUser.userId; comment.body = this.comment.text; comment.postId =this.model.currentPost.postId; new AddCommentEvent(comment).dispatch(); } } public function set commentSubmitted(status:String):void{ if (status == 'success'){ ...