BaseExample

This base example mxml file shows you what a default TaskPaneFX and TaskListFX component look like with no styles and properties applied.

Below is a snippet of code from the application;

<containers:TaskPaneFX id="pane"
	title="My Task Pane"
	titleIcon="{AssetsLibrary.getInstance().logoteofxSmall}"
	barDoubleClickEnabled="true"
	barStyleNameOpened="horzStyles"
	barStyleNameClosed="vertStyles"
	showMinimizeButton="false"
	width="220">
 
	<mx:Tree id="tree"
		labelField="@label"
		dataProvider="{treeData}"
		width="100%"/>
 
</containers:TaskPaneFX>
 
<containers:TaskListFX id="list"
	title="My Task List"
	titleIcon="{AssetsLibrary.getInstance().logoteofxSmall}"
	width="200">
 
	<mx:CheckBox label="CheckBox One"/>
	<mx:CheckBox label="CheckBox Two"/>
	<mx:CheckBox label="CheckBox Three"/>
	<mx:CheckBox label="CheckBox Four"/>
 
</containers:TaskListFX>

The pane instance

• Add the title property of "My Task Pane".
• Add the titleIcon property of a class in the AssetsLibrary.
• Add the barDoubleClickEnabled property so the pane will open and close with a double click to the title bar.
• Add the styleName pointers of;
  • barStyleNameOpened
  • barStyleNameClosed
• Add the showMinimizeButton property and set it to false.
  • This removes the pane's ability to min-restore it's children. There are no TaskListFX components as children so the pane cannot minimize it's children.

Once we have the correct settings for the behavior we need, we can then add the child Tree component.

The pane styleNames

.horzStyles,
.vertStyles {
	backgroundColor:#FFFFFF;
}
 
.vertStyles {
	horizontalAlign:"center";	
}

This task pane has it's default open and closed bar placements at top (open) and left (closed). For the task pane to look correct when closed, we need to specify a new styleName for it's closed position.

• Create a .horzStyles style selector.
• Add horizontalAlign:"center" to correctly align the titleIcon and maximizeButton.

The list instance

• Add the title property of "My Task List".
• Add the titleIcon property of a class in the AssetsLibrary.

Once we have the correct settings for the behavior we need, we can then add the child CheckBox components.

This simple operation created a working task pane and task list.