Search Flex Components Free

Custom Search

December 29, 2007

Free Flex PopUp ToolBar Component

View Samples:View Samples:<

Download PopUp ToolBar

A click in the the menu opens a new PopUp Panel. This Panel can contain your custom components. You can move, resize, minimize and close this PopUp Panel. You can choose whether your menu appears horizontal or vertical.

In depth
For each item in the menu you need to declare two components.
The first is for the icon in the toolbar, the second is for component which opens up if you click the menu item. For both Items you can use any UIComponent.
It makes sense to use for the icon the mx.controls.Button or the mx.controls.Image widget. For the second component you should use some kind of container like mx.containers.Canvas, HBox or VBox or similar. In this container you can place your own widgets or components.
The PopUp ToolBar contains two custom tags.
The first is the component itself. It has the properties:
target:UIComponent the target container where the PopUp Panel appears. If you leave this property empty, the ToolbarMenu uses its parent as default target.
dataProvider:ArrayCollection contains the ToolBarMenuItems. A ToolBarMenuItem contains a pair of two UIComponents. The first is the icon for the menu, the second is Container component for the PopUp Panel.
direction:String the two possible values are: horizontal or vertical

The second is the .
All the properties (except: event) of the ToolBarItem effect the behavior of the PopUp Panel. This component has the properties:
title:String the title of the PopUp Panel
x:Number the x position of the PopUp Panel relative to the target.
y:Number the y position of the PopUp Panel relative to the target.
width:Number the width of the PopUp Panel, the default value is 200 pixel
height:Number the height of the PopUp Panel, the default value is 200 pixel
event:String the event for the item in the menu which triggers a new PopUp Panel,
possible values are: click, doubleClick, mouseOver

Example Code:

he Popup ToolBar < ks:PopUpToolBar id="myMenu" x="135" y="10" target="{myCanvas}" paddingLeft="5" paddingTop="5" paddingBottom="5" paddingRight="5" borderStyle="solid" borderThickness="1" borderColor="#CCCCCC" dataProvider="{myDataProvider}" direction="horizontal"/>

The dataProvider for the ToolBarMenu <mx:ArrayCollection id="myDataProvider"> <ks:ToolBarItem title="Hello World" x="30" y="40" width="350" height="200" event="doubleClick"> <!-- menu icon component --> <mx:Image source="data/icons/world.gif" /> <!-- PopUp Panel component --> <mx:Label text="Hello World" /> </ks:ToolBarItem> <ks:ToolBarItem title="BackgroundColor" event="doubleClick"> <mx:Image source="data/icons/circle.gif" /> <mx:DateChooser/> </ks:ToolBarItem> </mx:ArrayCollection>

Related Flex Tutorials