Use a Flex List control to navigate to URLs

This example shows how to display a list of links in a Flex List control and let the user click on the list items navigate to the links.

A friend of mine recently built a photo gallery application. She wanted to load an external list of URLs representing photo album pages, so she could change the URLs in the future without rebuilding the app. The following technique worked pretty well for her project.

The following code declares a set of links in XML, binds them to a Flex List control, and then opens up each linked page in a new browser window when the user clicks an item in the list.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" viewSourceURL="srcview/index.html">
    
    <mx:Style>
    .linkList
    {
        textDecoration: underline;
        color: #ddeef8; 
        rollOverColor: #99aabb;
        textRollOverColor: #eeeeff;
        selectionColor: #8899aa;
        textSelectedColor: #ffffff;
        textAlign: center;
        fontSize: 12;
        backgroundAlpha: 0;
    }
    </mx:Style>
    
    <mx:Script>
    <![CDATA[
          import mx.events.ListEvent;
          
          [Bindable]
          private var itemXml:XMLList = 
          <>
              <item label="Adobe.com" url="http://www.adobe.com" />
              <item label="FlashLit.com" url="http://www.flashlit.com" />
              <item label="FlexExamples.com" url="http://blog.flexexamples.com" />
          </>;
                      
          private function onItemClick(evt:ListEvent):void
          {
              var item:Object = (evt.target as List).selectedItem;
              if (item.@url)
              {
                  navigateToURL(new URLRequest(item.@url), '_blank');
              }
          }
    ]]>
    </mx:Script>
    
    <mx:List id="urlList" 
        labelField="@label"
        itemClick="onItemClick(event)" 
        width="150" 
        height="78"
        dataProvider="{itemXml}" 
        styleName="linkList"/>

</mx:Application>

The interesting bits:

• The links are declared in an XMLList variable. You can enhance this example pretty easily to grab the XML from an external file and use that to populate the list.
• The List control binds directly to the itemXml variable. If you want the List display will change automatically if the XML data changes, put the data into a XMLListCollection variable instead and bind to that.
• The List's itemClick event triggers the onItemClick() method. Note that even though it's listening for "itemClick" the handler method receives a ListEvent object, not an ItemClickEvent object.
• The onItemClick() method grabs the clicked item's url property using the E4X @ operator. Then it invokes the navigateToURL() method to open up that URL in a new browser window.
• The resulting control could be used in an HTML frameset to switch the content in another frame. Just change the value '_blank' in the navigateToURL() method to the name of the appropriate frame.

Here's the little control in action.