The example shows how a popup window is being created, removed and centered.
This is an extension of the simple popup example. Show and hide process of the popup is animated using tweens. The example code shows where to place the tweening in the source code.
The example shows how to bring a popup in front and remove the top popup. Click a window to bring it in front. The remove button will remove the popup currently being on top.
This is an extension of the multiple popups example. Show and hide process of a popup is animated using tweens. The example code shows where to place the tweening in the code.
The example shows how to open and remove a modal popup window. You may also double click the popup window’s title bar to remove the popup.
The example shows multiple modal popups in action.
The example shows code and demonstrates the behavior of turning a modeless into a modal window at runtime.
The example shows how the PopUpManager may be queried to return if a modal popup is present or if an object of the main application is allowed to receive focus.
The default overlay created with a modal popup is just a semi-transparent white shape. You may change it easily. You may also double click the popup window’s title bar to remove the popup.
The example shows the setup of a basic tooltip using the ToolTipManager class. The main class creates the ToolTipManager instance and registers tooltip adapter and the actual tooltip instance together with a component selector. Whenever a box is moused, the ToolTipManager instance is commanded to show or hide a tooltip.
The example shows the setup of an animated tooltip. The tooltip is shown after a short delay and auto hidden after 2 seconds. When a tooltip is shown and the mouse moves quickly to another object, the tip shall be simply moved rather than animated again. This is useful if users want to step over all object tooltips rapidly.
The example shows the setup of an advanced tooltip with nose, show delay, auto hide and auto correction (with anchor swap and horizontal shift). Move the colored boxes around to see the tooltips align on the grey border.
It is possible to set up individual tooltips for different components. This example configures boxes to use either the advanced (box 1 and 2) or the simple tooltip (box 3 to 5) from the other tooltip examples. The advanced tooltip will be auto corrected at the grey border.
You may let behave the same tooltip differently depending on properties of the owner object. The configuration can be placed in the tooltip adapter. The example shows four boxes, each with distinctive tooltip placement.
Using bounds, auto swap and auto correct you may fine grained control the placement of popups or overlays in case of exceedings. This example lets you specify placement anchors of both source and layer. Change the anchors of both the source and the layer object in the right column. Move the source object around to see the layer position being auto corrected and anchors swapped.
The placement class allows you to align objects of different branches of the display list. For example, you may place a tooltip around a source object or the popup of a color picker around the trigger button. The examples allows you to modify the placement anchors for both the source and the layer object as well as a placement offset. Click the controls at the right side.
Sometimes the layer dimensions may exceed the stage’s area. You may assign a boundary rect to auto correct the layer’s position. The layer’s position then will be corrected to stay within the bounds. Useful application: Large tooltips who should not exceed the stage area.
You may enable the auto swap option to automatically swap the placement anchors of source and layer object in that case the layer exceeds the specified bounds. A tooltip for example can be displayed at the left instead of the default right side of the source object. Use the controls of the auto swap section to specify a diff value starting from that the anchors should be swapped. Move the grey box towards the boundaries. Swapping (if enabled) works for the following overlap conditions: The layer overlaps the bounds at …
right and anchors set to [source-right:layer-left] will be swapped to [source-left:layer-right]
bottom and anchors set to [s-bottom:l-top] will be swapped to [s-top:l-bottom]
top and anchors set to [s-top:l-bottom] will be swapped to [s-bottom:l-top]
left and anchors set to [s-left:l-right] will be swapped to [s-right:l-left].
In all other cases (e.g. layer or source with a centered anchor) swapping is not supported.
Using bounds, auto swap and auto correct you may fine grained control the placement of popups or overlays in case of exceedings. The placement class provides an info object that can be used to replicate corrections. This example shows an advanced tooltip auto corrected and swapped. The tooltip consists of a nose which should be drawn and placed differently depending on the actual placement of the tooltip. Move the grey box towards the boundaries and see the tooltip align magically.