TaskPaneFX :: In depth

• Online Help Book
• ASDoc Documentation
• Technical Forum
• Ask Before You Buy

The TaskPaneFX SWC comes with 3 seperate components.

• TaskPaneFX
• TaskListFX
• TitleBarControl

These three components give you maximum control over utilizing the most important areas of you application's user interface while maintaining your own unique look & feel. From grouping like task oriented components in task groups using the TaskPaneFX to grouping individual tasks into specific containers using the TaskListFX, you will be on your way to creating usable and space saving applications that are already familiar to your users.

Main Features

TaskPaneFX

The image above is from an example in the product zip file. It uses an mxml component that bases off the TitleWindow and holds a TaskPaneFX as it's single child.

The task pane takes advantage of this user interface design pattern and lets you as a developer maintain full control of your applications real estate.

• The left image above shows the TaskPaneFX with it's isOpen property set to false and it's barPlacementClosed property set to the left.
• The right image shows the TaskPaneFX with it's isOpen property set to true and it's barPlacementOpened property set to top.

The TaskPaneFX also allows for a left or right opened barPlacement as the image above shows. The title in this image would show up as a tool tip. You can also set individual styleNames for opened and closed bar placements.

TaskPaneFX Features

• Supports all styles of the FSCollectionFX1 set.
• The TaskPaneFX is a container that has 3 possible layouts for it's child components.
  • vertical, horizontal, absolute
• Enable-disable bar double clicking to open-close the pane.
• Multiple bar placements
  • top, left, right, bottom
  • Bar placement opened position.
    • Custom styleName to assign to the opened bar.
  • Bar placement closed position.
    • Custom styleName to assign to the closed bar.
• Custom bar renderer to easily swap out bars at runtime.
• Custom button renderers.
  • minimizeButton, maximizeButton, closeButton
• Show-hide buttons at runtime.
  • minimizeButton, maximizeButton, closeButton
• Title text string.
  • When the width of the component is less than the label's viewable width, you will get a tooltip of the title.
• Title icon Graphic
  • This titleIcon will dispatch an iconClick and iconMouseDown event for easy menu creation.
• Bar styleName to control the bar's look independently of the task pane component.
• Bar title styleName to control the look of the bar's label independently of the bar's look.
• Control over the default thickness of the bar.
  • The default behavior of the component is to use the measured width-height. You can override this behavior by setting the barThickness style.
• Button events
  • closeButtonClick, maximizeButtonClick, maximizeRestoreClick, minimizeButtonClick, minimizeRestoreClick
• Programmatic control over the open and close state of the component with the isOpen property.
  • There is a custom resize tween and effects that accompany this change of state.
    • Assignable easing function and duration for the resize effect.
• Events broadcast at the update end of each state change (open-close).
• openPaneEffect when the pane starts to open.
• closePaneEffect when the pane starts to close.
• Child open-close control through methods, if true opens all children, false it closes all children
• favorChildrenOpen
  • If true, the maximize button will open all children even if some are closed.
  • If false, the maximize button will close all children even if some are open.
• open() and close() methods for opening and closing TaskListFX children.

The component is designed to accommodate top, left bottom and right opened bar placements. The closed bar placements are right and left. Much of the time in user interface design, hiding the large components or views to the right or left seems more intuitive for the user. Users are also more inclined to hide smaller tasks in the vertical direction as with the TaskPaneFX.

TaskListFX

The TaskListFX component basically uses the same algorithm as the TaskPaneFX with a few differences noted below;

• Does not contain the open() and close() methods, you will use isOpen to change the component's state.
  • These methods in the task pane are used to open task list children.
• Limited to the top bar placement.
• Does not contain the favorChildrenOpen property.

TitleBarControl

The TitleBarControl is a bar control that is used in many of our container components such as the TaskPaneFX, TaskListFX and WindowFX along with others. It provides a common interface for creating title headers that can be swapped at runtime with other title bars that implement the ITitleBarControl interface.

• See TitleBarControl Book for more information.

The title bar contains the following essential elements;

• title - for textual representation of the parent.
• titleIcon - for graphic representation of the parent.
• iconButton - for reference to the titleIcon used for tooltips and menu creation.
  • The iconButton is the actual getter reference to the titleIcon. The titleIcon is a class setter.
• minimizeButton - to act as a device to minimize/restore the parent.
• maximizeButton - to act as a device to maximize/restore the parent.
• closeButton - to act as a device to dismiss the parent.

The title bar also contains visual manipulation of these elements with;

• minimizeButtonRenderer - custom factory button rendering.
• maximizeButtonRenderer - custom factory button rendering.
• closeButtonRenderer - custom factory button rendering.
• showMinimizeButton - show/hide the button in the bar.
• showMaximizeButton - show/hide the button in the bar.
• showCloseButton - show/hide the button in the bar.

The TitleBarControl inherits it's border styles from the class BorderControl. All classes that are not Container decendents will subclass BorderControl. All styles available in the Container class are also available in the BorderControl class. The title bar uses padding, alignment, border skins and colors and border metrics when it lays out it's border.

The title bar inherits it's layout functionality from the IconLabelControl. This class lays out the label and icon for ach bar control. The TitleBarControl class extends this by adding layout for the additional buttons and also accounts for horizontal and vertical barPlacement.