Saturday, February 03, 2007

Flex 2: Adding a toolbar to the list pane

I wanted to add a toolbar to the top of the list pane of my remote file explorer. The toolbar would contain icon buttons for some basic file operations like add, move, copy and delete.

After some poking around, it seemed that Flex does not have a built-in component for this purpose. The closest container for this purpose seemed to be ApplicationControlBar. I was able to create something that looks and acts like a typical desktop application toolbar with this declaration:

<mx:ApplicationControlBar dock="true" width="100%" 
  paddingTop="2" paddingRight="2"
  paddingLeft="2" paddingBottom="2" horizontalGap="2">
  <mx:PopUpButton id="newItem" label="" height="36" 
    styleName="toolbarButton" toolTip="Add Item..."
    icon="@Embed(source='assets/24x24/document_add.png')"/>
  <mx:Spacer width="8"/>
  <mx:Button id="newFolder" label="" height="32" 
    styleName="toolbarButton" toolTip="Add Folder..."
    icon="@Embed(source='assets/24x24/folder_add.png')"/>
  <mx:Spacer width="8"/>
  <mx:Button id="copyItems" label="" height="32" 
    styleName="toolbarButton" toolTip="Copy Selected Items"
    enabled="false" alpha="0.4"
    icon="@Embed(source='assets/24x24/copy.png')"/>
  <mx:Button id="moveItems" label="" height="32" 
    styleName="toolbarButton" toolTip="Move Selected Items"
    enabled="false" alpha="0.4"
    icon="@Embed(source='assets/24x24/document_into.png')"/>
  <mx:Button id="deleteItems" label="" height="32" 
    styleName="toolbarButton" toolTip="Delete Selected Items"
    enabled="false" alpha="0.4"
    icon="@Embed(source='assets/24x24/delete.png')"/>
</mx:ApplicationControlBar>

One additional puzzle was how to disable the copy, move and delete buttons until the user selects one or more items. The enabled flag on the Button component controls user interaction, but setting this flag to false does not change a button's appearance unless you specify the disabledColor, disabledIcon, or disabledSkin properties. I didn't want to create a second set of disabled icons. Eventually I figured out I can use the alpha property to dim out the button when disabled. I added this code to the change handler for the item list:

copyItems.enabled = moveItems.enabled = deleteItems.enabled = true;
copyItems.alpha = moveItems.alpha = deleteItems.alpha = 1.0;

I haven't written handlers for clicking on any of the buttons yet.