MenuExample

This example shows how you can use the task pane's icon to create a menu with a users click of the mouse. The example also shows how using a TaskPaneFX and TaskListFX together results in an application that in one state can show user tasks and when collapsed, gives the whole stage for the main application.

Sometimes the collapsible pane approach is not necessary but, when windows are not used, this saves space and time.

The image above shows both the TaksPaneFX and TaskListFX open with the main application taking up only half of the stage.

The image above shows a closed TaskPaneFX and TaskListFX giving the whole stage to the main application window.

Understanding this application

This application uses simple styles and focuses on the easy implementation of creating a menu with an iconClick on the iconButton of the task pane.

Load the data

<mx:XML id="myMenuData"
	format="e4x"
	source="../TaskPaneFXExample/data/menuData.xml"/>

Create the handler

import mx.events.MenuEvent;
 
import com.teotiGraphix.barControls.BarPlacement;
import com.teotiGraphix.barControls.events.BarEvent;
 
import mx.controls.Menu;
 
private var menu:Menu;
 
private function showMenu(event:BarEvent):void
{
	if (!menu)
	{
		menu = Menu.createMenu(null, myMenuData, false);
		menu.labelField = "@label";
		menu.addEventListener(MenuEvent.ITEM_CLICK,
							  menu_itemClickHandler);
	}
 
	menu.show(mouseX, mouseY);
}
 
private function menu_itemClickHandler(event:MenuEvent):void
{
	trace(event.item.@label);
}

• Create the showMenu() handler that will be registered in the task pane's iconClick handler.
• In the handler, if the menu instance is not created, create the Menu.
• Set the labelField to @label for xml.
• Add the menu_itemClickHandler() itemClick event handler.
• Finally, show the menu using the Application's mouseX and mouseY properties.

Assign the handler

<containers:TaskPaneFX id="pane1"
	barPlacementOpened="{BarPlacement.TOP}"
	barPlacementClosed="{BarPlacement.LEFT}"
 
	barStyleNameOpened="barOpenedStyles"
	barStyleNameClosed="barClosedStyles"	
 
	title="Menu Example Pane"
	titleIcon="{AssetsLibrary.getInstance().logoteofxSmall}"
 
	styleName="taskPaneBarStyles"
 
	iconClick="showMenu(event)"
	height="100%">

• Set the bar open and closed placements.
• Set the bar open and closed styleNames.
• Set title and titleIcon. We need the icon here for our iconClick event.
• Set the task pane's styleName.
• Register the showMenu()handler to the iconClick event of the task pane.

Result

With the user clicking on the titleIcon, the menu will show in the position of the mouse click.

Note : This same procedure can be used for the TaskListFX also. The two share the same events.