Getting Started with Flex 2 > Lessons > Retrieve and Display Data > Insert and position the blog reader controls

Insert and position the blog reader controls

In this section, you create the layout of your blog-reader application.

  1. With your Lessons project selected in the Navigator view, select File > New > MXML Application and create an application file called BlogReader.mxml.

    NOTE

     

    For the purpose of these lessons, several application files are used in a single Flex Builder project. However, it's good practice to have only one MXML application file per project.
  2. Designate the BlogReader.mxml file as the default file to be compiled by right-clicking (Control-click on Macintosh) the file in the Navigator view and selecting Set As Default Application from the context menu.
  3. In MXML editor's Design mode, drag a Panel container into the layout from the Layout category of the Components view, and then set the following Panel properties in the Properties view:
  4. In the Design mode, add the following controls to the Panel container by dragging them from the Components view:
  5. Use the mouse to arrange the controls in the layout in a vertical, left-aligned column.
  6. Select the DataGrid control and set the following properties:
  7. Select the TextArea control and set the following properties:
  8. Select the LinkButton control and set the following properties:

    The layout should look like the following:


    Flex application.

  9. Switch to the editor's Source mode by clicking the Source button in the editor's toolbar.

    The BlogReader.mxml file should contain the following MXML code:

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="Blog Reader">
        <mx:DataGrid id="dgPosts" x="20" y="20" width="400">
            <mx:columns>
                <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
            </mx:columns>
        </mx:DataGrid>

        <mx:TextArea x="20" y="175" width="400"/>
        <mx:LinkButton x="20" y="225" label="Read Full Post"/>
    </mx:Panel>
</mx:Application>
  10. Save the file, wait until Flex Builder finishes compiling the application, and then click the Run button in the toolbar to start the application. If you're using the plug-in configuration of Flex Builder, select Run > Run As > Flex Application.

    A browser opens and runs the application.



    NOTE

     

    The browser must have Flash Player 9 installed to run the application. You have the option of installing Flash Player 9 in selected browsers when you install Flex Builder. To switch to a browser with Flash Player 9, in Flex Builder select Window > Preferences > General > Web Browser.

    The application doesn't display any blog information yet.

The next step is to retrieve information about recent blog posts. You can use an RPC service component called HTTPService to accomplish this task.

Flex 2.01

Take a survey