Flash_and_Flex_03_2009

ActionScript Development

that makes the component functional, see (Listing 2). This code is responsible for setting the title and body of the blog post item and handling the click of the LinkButton. The setPostBody() method is responsible for limiting the length of the text description to 80 characters, and if the length is indeed longer than 80 characters, an ellipsis is added to identify there is more text. Also, if you notice, the event handler is simply dispatching a custom event of "readFullPost" , which will be defined in the next section of the main MXML file. This event will trigger the display of the full post. At this point the MXML component is completed, save your changes and move onto the main.mxml file to get everything working together. The first step of this section is to add the other components to complete the design of the blog view, see (Listing 3). The majority of the MXML is standard, the design portion in this code is the single post view, that is not visible to start. The Application tag has a creationComplete event that is called once the application is fully loaded. Now that the design is complete, the next step is to build the ActionScript, which is all contained within tags. The first part of the ActionScript code is to import the necessary classes and define the variables used. In the custom component you developed before you added a call to a custom event. You use the compiler directives to define the event before being able to use it. Now the next step is to build the methods functions . The first one is the init() method, which is called once the application is loaded. This method creates a new VBox component which will hold the BlogItem instances created later. An event is also setup here, which is for our custom event. The last step of the init() method is to add the VBox to the application and making a call to loadPostData(), see (Listing 6). The next method is loadPostData() which sets up the XML loading. The XML will contain the blog post data to be displayed in the blog view. This method basically sets up a new URLLoader instance, an event to call once the XML is loaded and the actual request to load the XML from a PHP file that will be setup in the next section, see (Listing 7). The postDataLoaded() method is fairly large. This method takes the XML loaded, loops through it and creates a new BlogItem instance for each section in the XML. For readability I have broken this method into two pieces. The first piece is the method with the for..each loop stubbed out, the second piece is the complete for..each portion, see (Listing 8). The for..each loop starts by adding each blog post to an array, which will be used to display

Listing 8. The event handler that is called once the XML is loaded

private function postDataLoaded(e:Event):void {

var urlLoader:URLLoader = URLLoader(e.currentTarget); var nextY:uint = 50; var i:uint=0; posts = []; for each ( var post:XML in XML(urlLoader.data)..post) {

. . .

}

Listing 9. The for..each loop responsible for creating a new BlogItem instance for each XML 'post' node

for each ( var post:XML in XML(urlLoader.data)..post) { posts.push({ id:post..id, label:post..name, data:post..body }); var blogItem:BlogItem = new BlogItem();

container.addChild(blogItem);

blogItem.itemID = i; blogItem.postTitle = post..name; blogItem.setPostBody(post..body); blogItem.x = 10; blogItem.y = nextY += blogItem.height + 5; i++;

}

Listing 10. Method called when the LinkButton is clicked, to view the single post

private function fullPostHandler(e:MouseEvent):void {

trace("fullPostHandler() " + BlogItem(e.target).itemID); container.visible = false ; container.height = 1;

singlePostTitle.text = posts[BlogItem(e.target).itemID].label; singlePostBody.text = posts[BlogItem(e.target).itemID].data; singlePost.visible = true ;

}

Listing 11. The last method in the application, used to hide the single post view and re-display the list of posts

private function postListViewHandler():void {

singlePost.visible = false ; container.visible = true ; container.percentHeight = 100;

}

03/2009 (5)

Made with FlippingBook HTML5