Wrox Home  
Search
Yahoo! Maps Mashups
by Charles Freedman
February 2007, Paperback


The Layout

Now that you have the data ready to code, it is time to consider the layout elements of the mashup. First, you need to itemize each interface element you will need to provide the user so he or she can interact with your mashup. Taking advantage of the pre-built Flex controls that come with Flex 2 and are supported by Flex Builder 2, you will need to identify which components to use.

  • A Label control to display the title of the mashup
  • A List control to display the list of video clips
  • A VideoLoader control to play the video
  • A set of button controls to allow playing, pausing and stopping of the video
  • The Hbox control to properly lay out elements from left to right
  • The Vbox control to properly lay out elements from top to bottom
  • A SWFLoader control to load the Flash client's SWF

Each of these controls has its own unique set of properties. They can be explored in the Flex Component and Style Explorers, introduced in Chapter 18, "Yahoo! Maps and Flex 2," of the book Yahoo! Maps Mashups and accessible through the Flex Builder 2 start page. You will code these elements into the MXML next.

Coding the Controls

It is now time to code the MXML that will support the controls and layout:

<mx:HBox verticalAlign="top">
    <mx:VBox>   
      <mx:Label text="Sunol Valley > Golf Videos" />
      <mx:List id="list" width="100%" color="blue"
            dataProvider="{golfShots.shot}"
            change="listSelect(event);" />
       <mx:VideoDisplay id="vidPlayer" width="320" height="180" 
	   	autoPlay="false"/>
       <mx:HBox horizontalAlign="center">
              <mx:Button label="Play" click="vidPlayer.play();"/>
            <mx:Button label="Pause" click="vidPlayer.pause();"/>
            <mx:Button label="Stop" click="vidPlayer.stop();"/>
        </mx:HBox>
    </mx:VBox>      
    <mx:SWFLoader id="map" width="600" height="400" 
		source="asFlashAPI_golf.swf" autoLoad="true"/>
</mx:HBox>

The Hbox handles the overall horizontal layout, creating a side-by-side presentation. On the left side, wrapped in a Vbox control, to manage layout from top to bottom, is, first, the Label control. This displays the title of your mashup.

Next to the Label control is the List control. This control will let the user select a golf shot from the defined data, which is hooked into the control by means of the dataProvider property. This allows the control to reference the data within the Model control you coded above. When the selection happens, a change event handler will call the listSelect function, which you will code in the next step.

The VideoDisplay control provides a very simple way to display the video. To allow the user subsequent control of the video, three buttons neatly laid out inside an Hbox do the trick. Each button calls a method against the VideoDisplay instance. Finally, the SWFLoader will load the Flash client map SWF, the compiled AS-Flash API. You will code this, equipping it to fully accept the map commands through the local connection as part of this mashup.

Handling User Interaction

You need to add ActionScript within the MXML class on the Flex client to support the elements you will add. The ActionScript is much like what you would code in the Flash IDE:

<mx:Script>
    <![CDATA[
       //Called when an item in the list is selected    
       private function listSelect(event:Object) :void
       {
           playVideo(List(event.target).selectedItem);
       }
   
       //Receives the selected Item and 
	   //passes it along to local connection
       //Plays the selected video clip
      private function playVideo(selectedItem:Object):void
      {
          vidPlayer.source = selectedItem.url;
          mapConnector.addMarkerByLatLon(selectedItem.lat, 
		  	selectedItem.lon, selectedItem.label);
         vidPlayer.play();
      };            
       ]]>
</mx:Script>

The listSelect function is called from the List event handler when the list is changed. The object that is sent as part of the event carries with it the selected item data of the row selected in the list. This index allows the ActionScript to extract all the properties from the Model based on the selected item.

Lastly, the playVideo function is coded to accept the selectItem object. Within this function, the url property of the selectedItem will be loaded in the VideoLoader control. addMarkerByLatLon is also called against the local connection instance. The lat, lon and label properties will be carried through the local connection and ultimately be received by the Flash client SWF. There, they will resolve to add a marker to the map representing the location of the golf shot shown in the selected video clip.

This article is excerpted from Chapter 22, "The Flex 2 Mashup" of the book, Yahoo! Maps Mashups (Wrox, 2007, ISBN: 978-0-470-09778-6), by Charles Freedman. Watch for the next installment in this project at Wrox.com or subscribe to the RSS feed for these articles. Charles is a Senior Flash Developer for Yahoo! with a communications degree in film and television from Boston University. His development approach combines an education in multimedia with expertise and passion for building engaging and intuitive applications and content. In recent years, Charles has produced some of the most highly visible Flash platform work, leading development for Yahoo! Maps and deploying modules for the home pages of eBay, eBay China and Fidelity.