ActionScript Development
Miniblog Part 2
by Matthew Keefe
Welcome to part 2 of the miniblog project. In part 1 (2/2008) you learned how to build the blog editor, database setup and PHP required to connect the two. In part 2 you will learn how to develop a front-end for the blog entirely in Flex. For this project I have used Flex Builder 3, but you can easily use the Eclipse plug-in or Flex SDK if you prefer.
special elements on this section is the click="" event on the LinkButton and the {postTitle} bindable string on the Label, see (Listing 1). Developing the ActionScript Once the design portion is completed, the next step is to add the ActionScript code
What you will learn… • Flex Design and Development • Building MXML Components • Basics of Events
What you should know… • Design view in Flex • ActionScript 3 Development
Level of difficulty
A ll of the code for this article can be found on the magazines web site. The first section of this code will be setting up the Flex project. Start by creating a new Flex Project File/New/Flex Project. Choose a location to save the project, name it and click Finish to create the project. You should see a few directories created. All of your Flex and ActionScript coding will go into the src/ directory. Now that the Flex project is created, the next step is to develop the blog item component. This will be used to display each blog post. The advantage to using a component is reusability. Basically, you build it once and use it as many times as needed. Right click on the src/ directory and choose New > MXML Component, in the dialog box enter a name of BlogItem and choose VBox in the Based on: drop-down box. Finally set the width to 400 and the height at 100, click Finish to create the component. You will now see two MXML files in your project, double- click the BlogItem.mxml if its not already open to start building the component. The first part of the component is the visual portion, which consists of a Label for the blog post title, a Text instance for the body of the blog post and a LinkButton which allows the reader to view the complete blog post. The two
Figure 1. Blog front-end application running in the browser
03/2009 (5)
64
Made with FlippingBook HTML5