18.6. Views

You need a view that will allow the user to select a post and a view to display the details of the selected post.

Start with the view that will display the list of recent posts and allow the user to select posts. Then in the com.FlexBlog.views package create a new component based on List. Name it PostList. Remember to clear the height and width from the creation dialog box. Edit the component to match the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml"
itemClick="onPostSelected(event);"
labelField="title" backgroundAlpha="0">
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import com.FlexBlog.valueobjects.PostVO;
            import com.FlexBlog.events.SetCurrentPostEvent;
            private function onPostSelected(event:ListEvent):void{
                new SetCurrentPostEvent(PostVO(this.selectedItem)).dispatch();
            }
        ]]>
   </mx:Script>
</mx:List>

This component will receive a collection of PostVO objects by binding its dataProvider property to the recentPosts property of the ModelLocator. Note that the labelField property has been set to title, meaning that this list will display the titles from the PostVO collection. Further note that the itemClick property has been set to trigger a function named onPostSelected.

The onPostSelected method takes the selectItem from the list and passes it to a SetCurrentPostEvent that is then dispatched.

Now create the view for displaying a post. In the com.FlexBlog.views package create a new component based on VBox. Name ...

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.