Creating the map

To begin, get a basic "Hello World" map compiling and running. Read through this article, follow the steps, and come back here when you've got the map running. At the end of those steps, you should have a map that looks like the one at this URL.

Creating the UI

Next, you'll add the Flex components needed so that the user can enter the to/from addresses, and then see the results displayed next to the map. Follow these steps:

1. Add some additional layout containers within the existing Panel.

   Start by adding a VBox above the Map component. This VBox will soon contain the directions form and output elements, laid out one after another from top to bottom. Then surround both that VBox and the Map component with an HDividedBox. This will enable users easily to drag a divider to resize either the map or the directions info, depending on their needs. The MXML for that is shown below, and a screenshot of the result in Design mode is shown as Figure 1:

   <mx:HDividedBox width="100%" height="100%">
       <mx:VBox width="100%" height="100%">
       </mx:VBox> 
             <maps:Map id="mapContainer" width="100%" height="100%" mapevent_mapready="onMapReady(event)"/> 
   </mx:HDividedBox>

   

   Figure 1. Additional layout containers

2. Add the directions form components.

   First add labels and text inputs for the users to enter the to and from addresses, and give them id attributes so you can reference them programmatically later. To make sure that a label is on the same line as its corresponding text input, surround the pairs with HBox components. To make testing the app easier, give the text inputs default values of "San Francisco CA" and "Mountain View CA". Finally, add a Button component that says "Get Directions". The MXML for all that is shown below, and a screenshot of the result in Design mode is shown as Figure 2:

   <mx:HBox>
        <mx:Label text="From: " width="70"/>
        <mx:TextInput id="from" text="San Francisco, CA" width="100%"/>
   </mx:HBox>
   <mx:HBox>
        <mx:Label text="To: " width="70"/>
        <mx:TextInput id="to" text="Mountain View, CA" width="100%"/>
   </mx:HBox>
   <mx:Button label="Get Directions"/>

   

   Figure 2. Add the directions form components

3. Connect the button's click event with a function in the code.

   Add a click attribute to the component that calls a function called processForm, like this:

   click="processForm(event);" 

   Then, inside the script section, define the processFrom function to just trace the value of the text attributes for the from and to components. For example, loading the app and just clicking the button without changing of the values would output "San Francisco CA Mountain View CA" to our Flash log. The code for that looks like this:

   private function processForm(event:Event):void {
        trace(from.text + " " + to.text);
   }

4. Add the directions output components.

   Start by adding an HRule below the Button component to visually separate the form from the output. Then add two text components with id attributes. These will be used to later display the summary and copyright information from the directions query. Finally, add a DataGrid component between the two text components. This will be used to later display the directions steps. Give the DataGrid an id attribute and set its sortableColumns property to false, since users won't want to sort the steps in any way besides sequential. By using a DataGrid instead of just a Text component with HTML inside, you'll be able to assign handlers to click events for individual steps and specify custom formatting for each column. The MXML for that is shown below, and a screenshot of the result in Design mode is shown as Figure 3:

      <mx:Text id="directionsSummary" width="100%"/>
       <mx:DataGrid
        id="directionsGrid"
        dataProvider="{directionsSteps}"
        width="100%"
        height="100%"
        sortableColumns="false" />
       <mx:Text id="directionsCopyright" width="100%"/>

   

   Figure 3. Add the directions output components

5. Connect the directions grid to a data provider.

   There are various ways of dynamically populating a DataGrid. For this example, you'll be using an ArrayCollection object, adding and clearing items from it as needed. Start by declaring and initializing a global variable called directionsSteps of type ArrayCollection. Mark that variable as [Bindable], so that the UI will automatically reflect any changes in the variable.

[Bindable] public var
directionsSteps:ArrayCollection = new ArrayCollection(); 

Then add a dataProvider attribute to the existing DataGrid and set it equal to "{directionsSteps}". The curly braces notation denotes that the UI component is being connected to a variable.

dataProvider="{directionsSteps}"

At the end of the above five steps, you should have a map like this.

Nothing terribly exciting will happen yet, because you haven't added the directions logic into the code; but at least it looks good.

Page 2 of 3

Previous Page

Next Page