A Flex Toolbar
For the little Flex application that I'm currently writing I wanted to implement a toolbar. In fact I wanted more of a tool palette rather than a plain toolbar, so something you might see in a paint or drawing application such as Photoshop rather than the bar found at the top of most applications. I've now found a solution although it's not perfect and I will probably go back to the issue at some point in the future.
I've looked at two possible solutions and I'm sure that there are other solutions available. I didn't want to spend ages coding something myself, preferring to just grab something and drop it in to my interface. First of all I found an article at the Flex Examples site which makes use of the mx:Image component wrapped by an mx:Repeater component with the whole thing wrapped by an mx:ToolBar component. However I discovered via the same post that the mx:ToolBar component can no longer be accessed through the MXML interface. I could have persevered with this, as I believe that it may still be possible to use this component, but I decided not to; probably because the documentation is somewhat non-existent.
I then thought of using the mx:TileList component after being inspired by another Flex Examples post. However I had a look at the options available in the Flex framework, considered the mx:ToggleButtonBar component and then found a post at LetsFlex. The LetsFlex post showed an example of re-styling the ToggleButtonBar and using images on the buttons rather than text. I know that this will probably be obvious to anyone who's spent time with Flex but, at the time, I didn't know for certain that the text of a button could be removed entirely and replaced with a graphic. This finally led me to use the ToggleButtonBar component as a partial solution. I say partial because I still wanted to implement a floating toolbar where the user could move the toolbar around the screen if they wished. During my searching I had discovered the Adobe Docking Toolbar component and now I returned to it. Now the documentation for this component is somewhat, shall we say, sparse. However it does come with some code examples that are good enough to get a toolbar implemented
I followed the following steps to get the Adobe Docking Toolbar component installed:
1) Downloaded from the Adobe Flex Components site
2) Extracted the downloaded zip file to somewhere convenient
3) I then tried two methods of using the pre-compiled .SWC file (as I'd downloaded the zip file to two of my PCs). Firstly I copied the Docker.SWC file to the \frameworks\libs folder of my Flex installation as mentioned in the readme.txt file that came with the zip file. Secondly, on my other PC, I added the path location of the Docker.SWC file to the 'SWC Libraries' setting within FlashDevelop; Project -> Properties menu, Compiler Options tab and added to the 'SWC Libraries' string.
Then later I noticed that I could simply have right-clicked on the Project panel in FlashDevelop and selected Add -> Library Asset... oh, well.
So now onto the code itself.
1: <?xml version="1.0" encoding="utf-8"?>
2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3: xmlns:fc="http://www.adobe.com/2006/fc"
4: measuredWidth="300" measuredHeight="300"
5: width="400" height="400">
6:
7: <mx:Script>
8: <![CDATA[
9: import mx.events.ItemClickEvent;
10: import org.flashdevelop.utils.FlashConnect;
11: import mx.controls.Alert;
12:
13: private function clickHandler(event:ItemClickEvent):void
14: {
15: FlashConnect.trace(event.item.ident);
16: Alert.show(event.item.ident,
17: "You selected...", Alert.OK);
18: }
19: ]]>
20: </mx:Script>
21:
22: <mx:Array id="iconData">
23: <mx:Object ident="Rectangle"
24: icon="@Embed(source='assets/rectangle.gif')" />
25: <mx:Object ident="Ellipse"
26: icon="@Embed(source='assets/circle.gif')" />
27: </mx:Array>
28:
29: <mx:Panel layout="vertical" width="100%" height="100%"
30: title="Toolbar Demo" horizontalGap="10">
31:
32: <fc:Docker id="docker" width="100%" height="100%">
33: <fc:DockableToolBar id="toolbar" label="Tools"
34: height="44" paddingTop="6">
35: <mx:ToggleButtonBar id="btnBar"
36: dataProvider="{iconData}"
37: itemClick="clickHandler(event)" />
38: </fc:DockableToolBar>
39: </fc:Docker>
40: </mx:Panel>
41: </mx:Application>
The components, belonging to the Docker SWC library, that I've used are Docker and DockableToolBar. These all belong to the fc namespace. Nothing really complex here. I've wrapped my ToggleButtonBar with the DockableToolBar component and that, in turn, is wrapped by a Docker component.
I created some 32 x 32 pixel buttons to fit on the toolbar and I realised then that the little handle at the far left of the toolbar, that is used to reposition the toolbar, is a little small. I took a look at the code for the DockableToolBar component and discovered that I could change the embedded graphic that represents the toolbar handle so that it's a little bigger but, frankly, I can do that some other time.
The simple app. can be seen below. I apologise if this post seems a little sprawling and has missing info. I've been meaning to write this post for a while and, when I finally got around to it and had written the first draft, I had problems embedding my Flex app. At the time of writing this closing paragraph I just want to get the post published and to move on to the next thing! If you read this and would maybe like some more information please submit a comment or drop me an email.
Posted by Graham Blake on 6th June 2009 at 05:53