Share 'Layers' on Delicious Share 'Layers' on Facebook Share 'Layers' on Google Bookmarks Share 'Layers' on Twitter

  1. PopUpManager
  2. ToolTipManager
  3. Placement
  4. Comments (1)
  5. Leave a Comment

Layers

Layers is a package of managers dealing with main application overlays such as popups and tooltips. The source code is under development and already available on GitHub. The source code is finished and released ;-) See the examples page for usage examples.

PopUpManager

Manager class to create, place or remove popups throughout an application. You set up a single PopUpManager instance and assign a container to which all popups will be added. The container must be on top of your application. After that you may command _popUpManager.create(displayObject) to let your object appear on the very top of the application. The PopUpManager may display multiple popups at the same time. Popups may be modeless or modal. A modal popup blocks all mouse and keyboard interaction for any object living below that popup (main application or other popups).

  • The color chooser of a color picker control
  • An alert, message box or a dialog
  • The list of a select box control
AlertTutorial.swf

Add or remove some popups.

Features

  • Adding, removing, centering, z-adjusting popups
  • Works with plain display objects
  • Modal popups
  • Management of multiple modal popups displayed at the same time
  • Turning modeless into modal popups and vice versa
  • Custom modal overlays
  • Several test methods (number of popups, number of modal popups, object focus allowed check)
  • Supports transitions

See the PopUpManager tutorial with in-depth explanation and example code.
See the various PopUpManager examples.

ToolTipManager

Manager class to create, place or remove tooltips throughout an application. You create an independent tooltip component (entirely free) as well as a tooltip adapter to let the ToolTipManager communicate with your custom tooltip. You register adapter and tooltip in the ToolTipManager. Once registered and configured, your component will show a tooltip with a call to _toolTipManager.show(this, "Text");. The placement of the tooltip (topleft, center, bottomleft, …) and certain placement rules (auto correct, auto swap) can be customized within the adapter.
ToolTipManager is an application of the more generic Placement util introduced further below on this page.

ToolTipTutorial.swf

Hover the colored boxes to see the tooltips. Box #2 shows a larger tooltip. Move the boxes (and tooltips) towards the grey border to see the tooltips auto corrected and auto swapped.

Features

  • Adding, removing and placement of tooltips
  • Works with plain display objects (owner and tooltip)
  • Supports different tooltips for different owner objects
  • Placement of tooltips using anchors and offsets
  • Auto swap anchors on tooltip exceeds bounds
  • Auto correct position within specified bounds
  • Auto hide tooltips after delay
  • Supports transitions

Requirements

The ToolTipManager class relies on the width and height properties of both the owner and the tooltip object. You need to make sure that these properties are set and return the actual size of the component at the time the ToolTipManager.show() method is invoked. Otherwise ToolTipManager cannot set a valid position of the tooltip.

See the ToolTipManager tutorial with in-depth explanation and example code.
See the various ToolTipManager examples.

Placement

Util class to relate the position of two display objects living in different branches (or the same branch) of the display list. The class accepts a source and a layer object as well as some placement rules (anchors). Depending on those rules the class will calculate the position of the layer object. There are different properties to enable a more fine grained placement such as offsets, auto correct or auto swap.

  • Place the color chooser popup right next to the color picker trigger button.
  • Place the list of a select box right below (or above) the drop down control.
  • Place the tooltip of a component next to the component.
  • Let the color chooser appear at left, right, top or bottom of the color picker trigger button depending on its position on the stage.
PlacementDemo.swf

Change source and layer anchor in the right control panel. Move the source object towards the border to see the placement being auto corrected and anchors being swapped.

Features

  • Align objects of different display list branches
  • Default placements using anchors
  • Finer grained placements using offsets
  • Auto corrected position to fit optionally specified placement bounds
  • Auto swap anchors to fit optionally specified placement bounds
  • Generic functionality utilized by ToolTipManager

Requirements

The Placement class relies on the width and height properties of both the source and the layer object. You need to make sure that these properties are set and return the actual size of the component at the time the Placement.place() method is invoked. Otherwise the Placement class cannot set a valid position of the layer.

See the various Placement examples.



1 Comment

  1. Nik

    27. Januar 2013

    Hi, AS3Commons UI is great. Very good work!!

Leave a Comment

You have a question or have experienced an issue? Please post it in the forum: http://sibirjak.tenderapp.com/ in order to make the discussion available at a more central place.