Flex Multi-List Selector using List Control, DataGrid, and the Accordion

The idea of a Multi-List Selector is not a new one. Apple implements something very similar to it in its Mac OS Operating System. Simply put, its a method of selecting an item by filtered hierarchical categories on a list by list basis. This structure is often seen while traversing files in directories, but can be applied with other data sources as well. This article by Keith Lee will demonstrate how to build a Multi-List Selector.

Instead of files and directories, I'm going to use States, Counties and Cities. Essentially this application will be used to give the user an easy way to select a city.

Flex offers many components that can help us build this application. The controls I immediately consider for the job are the List Control, DataGrid, and the Accordion (in combination with the List). The List is the obvious control to start with because it represents the data in the right way - a list of states, counties, and cities. The reason I also considered the DataGrid and the Accordion (with the List) is because the they both have a header. I want an easy way to label the three columns/list 'States','Counties' and 'Cities'. With that said, I selected the Accordion with the List option. Using this option also allows for future expansion of the tool. For instance, one could adapt the tool to add country, then state, county, and city. The Accordion naturally has this grouping capability.

With that said, our first code block contains our basic UI. The structure is pretty simple. The layout of the application is vertical. I've added an HBox which contains the main components of the application.

The basic structure of each list is a List Control inside a Canvas Container which is inside of an Accordian Control. The Canvas is there because Accordians must have a container as a child and a List is not a part of the container package. We repeat this 3 times, one for each column and give the appropriate name.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalGap="0"
        layout="vertical">

  <mx:HBox width="100%" height="100%">
 
     <!-- States -->
    <mx:Accordion id="statesAccoridon" width="100%" height="100%">
      <mx:Canvas width="100%" height="100%" label="States">
        <mx:List id="statesList"
             width="100%"
             height="100%"
             dataProvider="{locations.state.@name}"
             click="{selectCounties()}"/>
      </mx:Canvas>
    </mx:Accordion>
  
    <!-- Counties -->
    <mx:Accordion id="countiesAccoridon" width="100%" height="100%">
      <mx:Canvas width="100%" height="100%" label="Counties">
        <mx:List id="countiesList"
             width="100%"
             height="100%"
             click="selectCities()"/>    
      </mx:Canvas>
    </mx:Accordion>
  
    <!-- Cities -->
    <mx:Accordion id="citiesAccoridon" width="100%" height="100%">
      <mx:Canvas width="100%" height="100%" label="Cities">
        <mx:List id="citiesList" width="100%" height="100%"/>
      </mx:Canvas>
    </mx:Accordion>
  
  </mx:HBox>
  
  <!-- Selected City -->
  <mx:Label text="{citiesList.selectedItem}"/>
  
  <mx:Script>
    <![CDATA[
      
      public function selectCounties():void{
         countiesList.dataProvider =
           locations.state.(@name==statesList.selectedItem).counties.county.@name
      }
      
      public function selectCities():void{
        citiesList.dataProvider =      
locations.state.(@name==statesList.selectedItem).counties.county.
(@name==countiesList.selectedItem).cities.city.@name;
      }
      
    ]]>
  </mx:Script>
  
</mx:Application>

I've set the width and height to all containers to 100%. This will make it easy to later embed this application into a web page or other Flex application as a module. Also notice how the dataProvider attribute is only set for the statesList. This is because the countiesList and the citiesList are not populated until a state is selected. These dataProviders are set using ActionScript and are triggered by the click event listeners for both objects.

Here is what the start of our selector looks like: