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

  1. Placement Demonstration
  2. All Examples
    1. Popup
    2. Tooltip
    3. Placement
  3. Leave a Comment

Examples

Categories: Popup (9), Tooltip (5), Placement (5)

Placement Demonstration

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.

Category: Placement
PlacementDemo.swf
PlacementDemo.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
package layer.placement.demo {
  import org.as3commons.ui.layer.Placement;
  import org.as3commons.ui.layer.placement.UsedPlacement;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.geom.Rectangle;

  public class PlacementDemo extends Sprite {
    private var _placement : Placement;
    private var _controls : Controls;
   
    public function PlacementDemo() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      // bounds
      var bounds : Rectangle = new Rectangle(20, 20, 400, 300);
      with (graphics) {
        lineStyle(1, 0xCCCCCC);
        drawRect(bounds.x - 1, bounds.y - 1, bounds.width + 1, bounds.height + 1);
      }

      // source
      var source : DemoBox = new DemoBox("Source", 160, 150, 80, 80, 0xCCCCCC, 1, bounds);
      addChild(source);

      // layer
      var layer : DemoBox = new DemoBox("Layer", 0, 0, 50, 50, 0x4488DD, .5, null);
      layer.mouseEnabled = false;
      addChild(layer);

      // placement
      _placement = new Placement(source, layer);
      _placement.autoSwapAnchorsH = true;
      _placement.autoSwapAnchorsHDiff = 20;
      _placement.autoSwapAnchorsV = true;
      _placement.autoSwapAnchorsVDiff = 20;
      _placement.bounds = bounds;

      // controls
      _controls = new Controls();
      _controls.x = stage.stageWidth - 80;
      addEventListener("anchor", anchorChangedHandler);
      addEventListener("sourceposition", sourcePositionChangedHandler);
      addChild(_controls);
    }
   
    private function anchorChangedHandler(event : Event) : void {
      _placement.sourceAnchor = _controls.sourceAnchor;
      _placement.layerAnchor = _controls.layerAnchor;
      place();
    }

    private function sourcePositionChangedHandler(event : Event) : void {
      place();
    }
   
    private function place() : void {
      _placement.place();
      var box : DemoBox = _placement.layer as DemoBox;
      var used : UsedPlacement = _placement.usedPlacement;
      box.border = used.hShift != 0 || used.vShift != 0;
      box.setInfo(used.hShift, used.vShift, used.hSwapped, used.vSwapped);
    }
  }
}

All Examples

Popup

Simple Popup

The example shows how a popup window is being created, removed and centered.

Related: Simple Popup
Category: Popup

Animated Popup

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.

Category: Popup

Multiple Popups

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.

Category: Popup

Multiple Animated Popups

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.

Category: Popup

Modal Popup

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.

Category: Popup

Multiple Modal Popups

The example shows multiple modal popups in action.

Category: Popup

Turning a modeless into a modal Popup

The example shows code and demonstrates the behavior of turning a modeless into a modal window at runtime.

Category: Popup

Focus and modal popups

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.

Category: Popup

Custom Modal Overly

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.

Category: Popup

Tooltip

Simple Tooltip

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.

Category: Tooltip

Animated 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.

Category: Tooltip

Advanced Tooltip

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.

Category: Tooltip

Individual Tooltips

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.

Category: Tooltip

Contextual Tooltips

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.

Category: Tooltip

Placement

Placement Demonstration

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.

Category: Placement

Placement Anchors

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.

Category: Placement

Auto Correct

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.

Category: Placement

Auto Swap Anchors

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.

Category: Placement

Placement and Tooltip

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.

Category: Placement


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.