Getting Started with Flex 2 > Lessons > Use Web Services > Insert and position controls

Insert and position controls

In this section, you create the layout of your reporting application. You decide to use a ComboBox control to let the users set the number of top posts to list, and a DataGrid to display the top posts.

  1. With your Lessons project selected in the Navigator view, select File > New > MXML Application and create an application file called Services.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 Services.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 the 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 Design mode, drag the following controls into the Panel container from the Components view:
  5. Use the mouse to arrange the controls on the Canvas in a vertical, left-aligned column similar to the following:


    Flex application layout.

  6. Select the ComboBox control and enter cbxNumPosts as the value of its id property in the Flex Properties view.

    The ComboBox control doesn't list any items. You populate the list next.

  7. Switch to the editor's Source mode by clicking the Source button in the editor's toolbar, and then enter the following code between the opening and closing <mx:ComboBox> tag:
    <mx:Object label="Top 5" data="5"/>
<mx:Object label="Top 10" data="10"/>
<mx:Object label="Top 15" data="15"/>

    For a tutorial on list-based controls, see Use List-based Form Controls.

  8. Switch back to Design mode, select the DataGrid component, and specify the following properties in the Flex Properties view:
  9. Select the LinkButton control and enter Select an item and click here for full post as the value of its label property.

    The layout should look like the following example:


    Flex application layout with LinkButton.

  10. Switch to Source mode.

    The Services.mxml file should contain the following MXML code (your coordinate values may vary):

    <?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="Most Popular Posts">

        <mx:ComboBox x="30" y="25" id="cbxNumPosts">
            <mx:Object label="Top 5" data="5" />
            <mx:Object label="Top 10" data="10" />
            <mx:Object label="Top 15" data="15" />
        </mx:ComboBox>
        
        <mx:DataGrid x="30" y="75" id="dgTopPosts" 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:LinkButton x="30" y="250" 
            label="Select an item and click here for full post"/>
    </mx:Panel>
    
</mx:Application>

The next step is to insert and configure an RPC component called WebService in your application.

Flex 2.01

Take a survey