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.
No comments:
Post a Comment