Russischer Bär

PopUpManager, ToolTipManager

Jens Struwe — Fri, 10 Jun 2011 14:44:52 +0000

Version 0.3 of AS3Commons UI comes with the new layers package including managers dealing with main application overlays such as popups and tooltips.

PopUpManager

Manager class to create, place or remove popups throughout an application.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorial.swf" width="500" height="300" /]

Add or remove some popups.

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.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorial.swf" width="460" height="360" /]

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.

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.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/placement/PlacementDemo.swf" width="530" height="360" /]

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.

See the various Placement examples.

Tutorial: Creating tooltips with the AS3Commons ToolTipManager

Jens Struwe — Fri, 10 Jun 2011 02:31:54 +0000

About the ToolTipManager class

The ToolTipManager is included in the layers package of the AS3Commons UI project. The class lets you create custom tooltips and register them to be shown for different display objects throughout the application. It is meant to be a pure ActionScript alternative to the well-known tooltip managers incorporated by Flex or the Flash component package.

About this tutorial

In this tutorial we are going to create a small application containing a couple of boxes where each box will show a tooltip on mouse over. The tooltips should in no case exceed the stage’s boundaries.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorial.swf" width="460" height="360" /]

If you want to see the final code first, jump to the last section of this tutorial.

The tutorial explains:

Creating and managing an instance of ToolTipManager
Creating a tooltip component
Creating a tooltip adapter
Assigning tooltips to components
Animating the tooltip’s show and hide events

Requirements

Owner and tooltip size

The ToolTipManager 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 the ToolTipManager cannot set a valid position of the tooltip.

External libraries

To run the code shown in this tutorial you need to install the following libraries.

AS3Commons UI 0.3 – Contains the PopUpManager and several layout algorithms
AS3Commons Collections 1.3.0 – Data structures required by AS3Commons UI
GTween 2.01 – Tweening library of choice

All libraries are included in the ZIP download of the AS3Commons UI project.

Creating a simple moveable box and a basic tooltip

To be able to test the behaviour of our later tooltip we need a source or owner object that can be freely moved aournd the stage. Such an object is not very special and easliy created. We will call it box. Moving the mouse over the box will bring the box to front before all other boxes. Moving the box is restricted to the specified boundaries. We store these boundaries in a global variable since we will later use them on different places.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorialStep1.swf" width="460" height="360" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step1/Box.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step1/Globals.as" /]

A basic tooltip is roughly a text field with background and border. Since a tooltip can be shared between different components, it should be possible to assign text at runtime.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step1/BoxToolTip.as" /]

Setup of `ToolTipManager`

The ToolTipManager expects a tooltip container display object within its constructor. We we will create the container at the very top of our application. There should be only one instance of ToolTipManager for a single application. We hence store the ToolTipManager instance in our global class Globals created in step 1.

...

Globals.bounds = bounds;

// init tooltips

var container : Sprite = addChild(new Sprite()) as Sprite;

Globals.toolTipManager = new ToolTipManager(container);

// add content

var items : Sprite = addChildAt(new Sprite(), 0) as Sprite;

...

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/Globals.as" /]

Triggering the tooltip from the box

The box should show a tooltip when the move enters the box and hide when the mouse leaves. Once we have the single ToolTipManager accessible by the box we can put the appropriate code.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/Box.as" /]

Register the tooltip

A tooltip can be shown by invoking the ToolTipManager.show(owner, content) method. Internally the ToolTipManager decides what actual tooltip class is to use for the particular owner component. To connect our simple tooltip with the box object we need to register it.

The ToolTipManager is designed to support arbitrary display objects as both owner and tooltip. To anyhow let the ToolTipManager communicate with our tooltip we need to create an adapter that will serve as an mediator between both. A tooltip adapter must subclass the base ToolTipAdapter class and here override certain adapter hooks.

The `ToolTipAdapter` hooks

onToolTip()

When it is invoked

Once for a tooltip
Right after the tooltip has been registered

Purpose

Set up initial adapter properties such as offsets or enable anchor swaps.

onContent()

When it is invoked

Called whenever the source object and content have been changed.

Purpose

The content usually will be someting literally. This hook should forward the content specified by the owner object to the tooltip. The tooltip is supposed store this content and to calculate here it’s final dimensions. The tooltip does not necessary need to draw its final appearance here. The tooltip adapter will query the tooltip’s dimensions right after this hook has been invoked and calculate the tooltip’s position.

onDraw()

When it is invoked

Called whenever a hidden tooltip should be shown.

Purpose

The tooltip is supposed to set the tooltip’s position and create its final appearance.

onRemove()

When it is invoked

Called whenever a tooltip should be hidden.

Purpose

To finalize the removal, the adapter needs to commit the removal by invocation of commitRemove() within this hook. The adapter may call commitRemove() synchronously or asynchronously. The latter case is appropriate if some transitions should be performed before the tooltip leaves.

Simple tooltip adapter

The most simple adapter only overrides the onContent() hook and forward the given content to the tooltip.

public class MyToolTipAdapter extends ToolTipAdapter {

  override protected function onContent(toolTip : DisplayObject, content : *) : void {

    MyToolTip(toolTip).text = content;

  }

}

The tooltip selector

The tooltip registration additionally requires the declaration of a tooltip selector together with the adapter and the tooltip itself. The selector accepts an arbitrary display object and decides if this object should use the mapped tooltip adapter or not. The selector is a perfect pattern to assign a certain tooltip right to a class of components while enabling different tootlips for different components.

public class MyTipSelector implements IToolTipSelector {

    public function approve(displayObject : DisplayObject) : Boolean {

      return displayObject is MyComponent;

    }

}

The registration

Having tooltip, adapter and selector, the registration is a single line of code:

_toolTipManager.registerToolTip(

  new MyToolTipSelector(),

  new MyToolTipAdapter(),

  new MyToolTip()

);

Here is our step 2 code with tooltip adapter, selector and registration. The tooltip did not change from step1.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorialStep2.swf" width="460" height="360" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step2/ToolTipTutorialStep2.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step2/BoxToolTipAdapter.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/BoxToolTipSelector.as" /]

The tooltips are now already working but could be improved a bit to not exceed the boundaries and to slightly extend into (overlap) the owner object.

Customizing the tooltip placement

There are different tooltip placement rules we may set up in our tooltip adapter. The appropriate adapter hook is onToolTip().

Anchors

Aligns owner and tooltip object. By default the owner anchor is PlacementAnchor.TOP_RIGHT and the tooltip anchor is PlacementAnchor.BOTTOM_LEFT. To modify the default anchors to show the tooltips centered below their owner we modify our tooltip adapter like this:

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step3/TestBoxToolTipAdapter.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorialStep3.swf" width="460" height="360" /]

Offset

Shifts the tooltip from the default placement by the value specified by the offset point object.

Bounds

If specified, all tooltip positions will be auto corrected to keep the tooltip within the boundary rect.

Auto swap anchors

If bounds are given, the tooltip will be locked at the bounds in the case the tooltip would exceed the bounds. The tooltip adapter enables you to let the placement anchors swap automatically. A tooltip that would jut out the right side is then swapped to the left side of the owner object.

Auto swap anchors tolerance

This is a combination of auto swap and simple auto correction. A tolerance value starting from that the swap will be performed. If set to 10, the tooltip will be swapped not until it would exceed the bounds by the amount of 10 pixel.

We configure our tooltip adapter for the following placement rules:

Offet of (-10, 5)
Stop on bounds
Swap anchors horizontally with a tolerance of 25 pixel
Swap anchors vertically with a tolerance of 10 pixel

Additionally we set the autoHideAfter property to 2 seconds. After two seconds the tooltip will disappear automatically.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step3/BoxToolTipAdapter.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorialStep3b.swf" width="460" height="360" /]

Our tooltip is already quite comfortable. The next improvement is to animate the tooltip’s show and hide events.

Animating tooltip show and hide events

Animation is not actually subject of this tutorial. However, some notes here:

When you override the onShow() adapter hook you are in charge to set the tooltip position and invoke the startAutoHide() command on your own.

When you override the onRemove() adapter hook you are in charge to invoke the commitRemove() command on your own.

Reason for this reversion of control is that only you as the adapter developer know the point of time the commands for auto hide or remove are safe to execute.

Setting the tooltips position

By default, onShow() sets the correct tooltip position. You might add certain asynchronous transitions and set the position at a later time.

`startAutoHide()`

Starts the auto hide delay if the autoHideAfter property is set. This command is invoked by the base implementation of onShow(). You might add certain asynchronous transitions and start the auto hide delay after the tooltip is entirely shown.

`commitRemove()`

Removes the tooltip eventually. This command is invoked by the base implementation of onRemove(). You might add certain asynchronous transitions and remove the tooltip after the transitions have been finished.

The following adapter animates the tooltip’s show and hide events.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/step4/BoxToolTipAdapter.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorialStep4.swf" width="460" height="360" /]

Adavanced Tooltip

The last step of the tutorial is to update the tooltip to show a nose. The orientation and position of the nose depends on the used placement properties. By default the tooltip is shown top right of its owner. The nose here is bottom left. If the tooltip is swapped horizontally, the nose will be bottom right. Vertically: top-right or top-left. Another requirement is to respect a possible auto correct shift. If the tooltip is auto corrected at the right border and shifted by a value of 20px, the tooltip nose should also move by 20px to the right ;D

See the final code for such an advanced tooltip. It differs to our step 4 version only in the implementation of the drawing of the tooltip and the passing of used placement values to the tooltip.

override protected function onDraw(toolTip : DisplayObject, ownerAnchor : uint, toolTipAnchor : uint, hShift : int, vShift : int) : void {

      BoxToolTip(toolTip).setPlacementProperties(ownerAnchor, toolTipAnchor, hShift);

      BoxToolTip(toolTip).draw();

}

The final code and the compiled swf

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/tooltip/tooltiptutorial/ToolTipTutorial.swf" width="460" height="360" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/ToolTipTutorial.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/BoxToolTip.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/BoxToolTipAdapter.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/BoxToolTipSelector.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/Box.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/tooltip/tooltiptutorial/final/Globals.as" /]

Tutorial: Creating an alert box with the AS3Commons PopUpManager

Jens Struwe — Thu, 09 Jun 2011 15:27:05 +0000

About the PopUpManager class

The PopUpManager is included in the layers package of the AS3Commons UI project. The class lets you create, place or remove popups throughout an application. It is meant to be a pure ActionScript alternative to the well-known popup managers incorporated by Flex or the Flash component package.

About this tutorial

In this tutorial we are going to create a small application containing two buttons where each button triggers an alert box showing some text. The first button starts a simple message box that will vanish by a subsequent click anywhere into the application. The second button starts a modal dialog that must be confirmed.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorial.swf" width="500" height="300" /]

If you want to see the final code first, jump to the last section of this tutorial.

The tutorial explains:

Creating and managing an instance of PopUpManager
Creating and removing a popup
Placing a popup
Modal and modeless popups
Animating the popup’s show and hide events

Requirements

To run the code shown in this tutorial you need to install the following libraries.

AS3Commons UI 0.3 – Contains the PopUpManager and several layout algorithms
AS3Commons Collections 1.3.0 – Data structures required by AS3Commons UI
GTween 2.01 – Tweening library of choice
AS DataProvider Controls 0.4.0 – User interface components

All libraries are included in the ZIP download of the AS3Commons UI project.

Creating a generic alert component

In the first step of this tutorial we create a simple alert component. The component has a fix size of 300×160 px. It shows a headline and a message. It is possible to configure the alert box to show up to 3 buttons. Each button will dispatch its custom event type. The first button the type AlertBox.ALERT_YES, the second button the type AlertBox.ALERT_NO and the third button the type AlertBox.ALERT_CANCEL. To configure the buttons, the constructor accepts a buttons property (type Array) which contains names for all buttons that should be shown. The event will be forwarded to the callback also specified in a constructor argument. There is actually nothing special with the alert box.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step1/AlertBox.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step1/AlertTutorialStep1.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorialStep1.swf" width="330" height="220" /]

Let’s test another configuration with only one button, the third button that should dispatch the event AlertBox.ALERT_CANCEL. We change the buttons property from ["one", "two", "three"] to [null, null, "three"].

var alert : AlertBox = new AlertBox(

  "Popup",

  "This is a simple popup window with only one button. Click it.",

  [null, null, "three"],

  info

);

It works as expected:

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorialStep1b.swf" width="330" height="220" /]

In step 1 we have added the alert box right below the main application. In the next step we will use the PopUpManager to add the box to the display list.

Setup of `PopUpManager`

The PopUpManager expects a popup container display object within its constructor. We we will create the container at the very top of our application. There should be only one instance of PopUpManager for a single application. We hence store the PopUpManager instance in a local variable of the main application. Finally, we call PopUpManager.createPopUp(alert) instead of addChild(alert) to add the alert box to the display list.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step2/AlertTutorialStep2.as" /]

The resulting SWF is identical to the one of step 1.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorialStep2.swf" width="330" height="220" /]

We will now implement the code to remove the popup with a click of each of the buttons. To create a new popup, we will add an appropriate button to the main application.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step2/AlertTutorialStep2b.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorialStep2b.swf" width="330" height="220" /]

Different alerts

In step 3 we add a second button to the main application to be able to show either a modeless or a modal popup. The modeless popup only shows a cancel button. The popups are centered automatically.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step3/AlertTutorialStep3.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorialStep3.swf" width="500" height="300" /]

It is a good idea to not require the user to click the close button of a normal popup. Instead, the popup should also vanish with a click somewhere outside the popup. A clean implementation of such an mouse down outside listener is to let the alert track the mouse down event on demand and notify the main application if it should be closed. In result there will be only one modeless alert at the same time since clicking the add button will automatically remove the present alert box, if any.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step3/AlertBox.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step3/AlertTutorialStep3b.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorialStep3b.swf" width="500" height="300" /]

Adding transitions

We have almost finished our tutorial. In the step 4 we add some show and hide animation using a tweening library. Additionally, we will show a feedback for the case the yes or no button of the modal popup has been clicked. To do the latter, we simply create a new modeless popup showing the feedback right after the modal window has been closed.

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/step4/AlertTutorialStep4.as" /]

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorialStep4.swf" width="500" height="300" /]

Optimizations

We will finalize our tutorial with a few optimizations. The alert handling can be separated from the main class into a static Alert service. This service needs to know the PopUpManager instance which we will store now separately from the main application in a globally accessible variable. At last we add a custom modal overlay showing a grey area instead of the default white one.

The final code and the compiled swf

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/as3commons_ui/layer/popup/alerttutorial/AlertTutorial.swf" width="500" height="300" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/final/AlertTutorial.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/final/AlertBox.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/final/Alert.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/final/Globals.as" /]

[Example url="/var/www/jes/sibirjak_com_git/as3commons-ui/examples/layer/popup/alerttutorial/final/ModalOverlay.as" /]

Invalidation & LifeCycle

Jens Struwe — Wed, 01 Jun 2011 00:24:55 +0000

The version 0.2 of AS3Commons UI comes with a new package called Invalidation & LifeCycle. The package provides a clean and simple implementation of a component life cycle. See the Invalidation & LifeCycle documentation for more information on this package.

ASDPC on GitHub and Version 0.4.0

Jens Struwe — Fri, 20 May 2011 14:44:47 +0000

I’ve also moved the UI components to GitHub. The relocation comes with a new version. See the list of changes in the changelog provided.

GitHub: https://github.com/kakenbok/ActionScript-DataProvider-Controls
Changelog: https://github.com/kakenbok/ActionScript-DataProvider-Controls/blob/master/Changelog.txt

What’s new in A3Commons Collections 1.3.0

Jens Struwe — Sun, 15 May 2011 09:47:20 +0000

The release 1.3.0 of the collections framework contains several utilities and convenience methods. There are four new util classes and four new builder classes. Checkout the Git commit log for a detailed list of changes. The APIDoc is updated as well.

Get: Downloads
Follow: GitHub
Read: APIDoc
Test: Examples

New features

The main features added are:

Copy items from one collection to another
Clone collections
Populate a collection from native Flash objects
Fast populate a collection using variable argument lists

Examples

Copy items from one collection to another

[Example url="/var/www/jes/sibirjak_com_git/as3commons-collections/examples/ListsCopyExample.as" /]

Clone collections

[Example url="/var/www/jes/sibirjak_com_git/as3commons-collections/examples/MapsCloneExample.as" /]

Populate a collection from native Flash objects

[Example url="/var/www/jes/sibirjak_com_git/as3commons-collections/examples/MapsAddFromExample.as" /]

Fast populate a collection using variable argument lists

[Example url="/var/www/jes/sibirjak_com_git/as3commons-collections/examples/AddFromArgsExample.as" /]

AS3Commons Collections now on GitHub

Jens Struwe — Wed, 20 Apr 2011 10:46:24 +0000

I just have setup a GitHub repository for the AS3Commons Collections project. As of now you may fork, clone and download the sources there. The former SVN branch is still existant and updated from time to time in order keep the AS3Commons Maven repository up to date. Nevertheless, the most recent version of this project is always available on GitHub.

GitHub: https://github.com/AS3Commons/as3commons-collections

Contribution is highly welcome!

Announcement: Layouts

Jens Struwe — Fri, 18 Feb 2011 17:12:48 +0000

Note: Layouts already has been released. The code examples are not longer entirely valid. The API has been refined and improved. See the Layouts documentation for detailed information and more up to date examples.

Layouts is a small layout framework containing solely a horizontal and a vertical layout. Nevertheless, both are more than simple to handle and have a great number of properties to adjust. Besides the usual layout algorithms Layouts provides a fluent interface to create runtime layouts as easy as it could be. Coming soon. Here a showcase in advance.

HLayout

4 different setups for a horizontal layout. The example shows a number of the config properties of the HLayout.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/uitools/examples/layout/HLayoutExample.swf" width="530" height="290" /]

package layout.showcase {

  import com.sibirjak.ui.layout.HLayout;

  import com.sibirjak.ui.layout.shortcut.*;

  import flash.display.Sprite;

  import flash.geom.Rectangle;

  public class HLayoutExample extends Sprite {

    public function HLayoutExample() {

      // layout 1

      var layout : HLayout = hlayout(

        config(

          "x", 10, "y", 10,

          "hGap", 10, "vGap", 10,

          "maxContentWidth", 230

        ),

        getBoxes(16, false)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

      // layout 2

      layout = hlayout(

        config(

          "x", 10, "y", 150,

          "width", 230, "minHeight", 110,

          "hGap", 3, "vGap", 3,

          "vRowAlign", "justify",

          "hAlign", "justify", "vAlign", "justify"

        ),

        getBoxes(20, true)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

      // layout 3

      layout = hlayout(

        config(

          "x", 270, "y", 10,

          "width", 230, "minHeight", 110,

          "hGap", 5, "vGap", 5,

          "vRowAlign", "middle",

          "hAlign", "center", "vAlign", "middle" 

        ),

        getBoxes(12, true)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

      // layout 4

      layout = hlayout(

        config(

          "x", 270, "y", 150,

          "width", 230, "minHeight", 110,

          "hGap", 5, "vGap", 5,

          "maxItemsPerRow", 5,

          "vRowAlign", "bottom",

          "hAlign", "right", "vAlign", "bottom"

        ),

        getBoxes(12, true)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {

      var boxes : Array = new Array();

      for (var i : uint = 0; i < numBoxes; i++) {

        boxes.push(new Box(random));

      }

      return boxes;

    }

    private function drawRect(rect : Rectangle) : void {

      if (rect.width) rect.inflate(10, 10);

      with (graphics) {

        beginFill(0x333333);

        drawRect(rect.x, rect.y, rect.width, rect.height);

      }

    }

  }

}

VLayout

This is actually the mirrored HLayout example from above.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/uitools/examples/layout/VLayoutExample.swf" width="290" height="530" /]

package layout.showcase {

  import com.sibirjak.ui.layout.VLayout;

  import com.sibirjak.ui.layout.shortcut.*;

  import flash.display.Sprite;

  import flash.geom.Rectangle;

  public class VLayoutExample extends Sprite {

    public function VLayoutExample() {

      // layout 1

      var layout : VLayout = vlayout(

        config(

          "x", 10, "y", 10,

          "hGap", 10, "vGap", 10,

          "maxContentHeight", 230

        ),

        getBoxes(16, false)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

      // layout 2

      layout = vlayout(

        config(

          "x", 150, "y", 10,

          "height", 230, "minWidth", 110,

          "hGap", 3, "vGap", 3,

          "hColumnAlign", "justify",

          "hAlign", "justify", "vAlign", "justify"

        ),

        getBoxes(20, true)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

      // layout 3

      layout = vlayout(

        config(

          "x", 10, "y", 270,

          "height", 230, "minWidth", 110,

          "hGap", 5, "vGap", 5,

          "hColumnAlign", "center",

          "hAlign", "center", "vAlign", "middle" 

        ),

        getBoxes(12, true)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

      // layout 4

      layout = vlayout(

        config(

          "x", 150, "y", 270,

          "height", 230, "minWidth", 110,

          "hGap", 5, "vGap", 5,

          "maxItemsPerColumn", 5,

          "hColumnAlign", "right",

          "hAlign", "right", "vAlign", "bottom"

        ),

        getBoxes(12, true)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {

      var boxes : Array = new Array();

      for (var i : uint = 0; i < numBoxes; i++) {

        boxes.push(new Box(random));

      }

      return boxes;

    }

    private function drawRect(rect : Rectangle) : void {

      if (rect.width) rect.inflate(10, 10);

      with (graphics) {

        beginFill(0x333333);

        drawRect(rect.x, rect.y, rect.width, rect.height);

      }

    }

  }

}

Nested Layouts

Creating nested layouts with the fluent interface is fun.

package layout.showcase {

  import com.sibirjak.ui.layout.shortcut.*;

  import flash.display.Sprite;

  public class NestedLayoutExample extends Sprite {

    public function NestedLayoutExample() {

      hlayout(

        vlayout(

          new Box(), // 1

          new Box(), // 2

          hlayout(

            new Box(), // 3

            new Box() // 4

          )

        ),

        new Box(), // 5

        hlayout(

          vlayout(  

            new Box(), // 6

            new Box(), // 7

            new Box() // 8

          ),

          new Box() // 9

        ),

        new Box() // 10

      ).layout(this);

    }

  }

}

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/uitools/examples/layout/NestedLayoutExample.swf" width="200" height="110" /]

The same layout using the getter/setter API.

package layout.showcase {

  import com.sibirjak.ui.layout.*;

  import flash.display.Sprite;

  public class NestedLayoutOldSchoolExample extends Sprite {

    public function NestedLayoutOldSchoolExample() {

      var h1 : HLayout = new HLayout();

      var v1 : VLayout = new VLayout();

      v1.add(

        new Box(), // 1

        new Box() // 2

      );

      var h2 : HLayout = new HLayout();

      h2.add(

        new Box(), // 3

        new Box() // 4

      );

      v1.add(h2);

      h1.add(

        v1,

        new Box() // 5

      );

      var h3 : HLayout = new HLayout();

      var v2 : VLayout = new VLayout();

      v2.add(

        new Box(), // 6

        new Box(), // 7

        new Box() // 8

      );

      h3.add(

        v2,

        new Box() // 9

      );

      h1.add(

        h3,

        new Box() // 10

      );

      h1.layout(this);

      return;

    }

  }

}

Excluding from Layouts

Items may be excluded from being considered in layout algorithms. They still are member of their layout but do not consume space. The example shows additionally ways to identify and retrieve items from a layout.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/uitools/examples/layout/ExcludeFromLayoutTest.swf" width="310" height="290" /]

Click a box to exclude it from or to include it in the layout.

package layout.showcase {

  import com.sibirjak.ui.layout.*;

  import com.sibirjak.ui.layout.shortcut.*;

  import flash.display.Sprite;

  import flash.events.MouseEvent;

  import flash.geom.Rectangle;

  public class ExcludeFromLayoutTest extends Sprite {

    private var _layout : VLayout;

    private var _top : VLayout;

    private var _bottom : HLayout;

    public function ExcludeFromLayoutTest() {

      _layout = vlayout(

        config("x", 10, "y", 10, "vGap", 30),

        meta("top"),

        vlayout(

          config("vGap", 10),

          h1, h1

        ),

        meta("bottom"),

        hlayout(

          config("maxItemsPerRow", 9)

        )

      );

      _top =_layout.getItemById("top");

      _bottom =_layout.getItemById("bottom");

      layout();

      addEventListener(MouseEvent.CLICK, clickHandler);

    }

    private function get h1() : HLayout {

      return hlayout(

        config("hGap", 10),

        h2, h2, h2, h2

      );

    }

    private function get h2() : HLayout {

      return hlayout(

        config("maxItemsPerRow", 2),

        new Box(), new Box(), new Box(), new Box()

      );

    }

    private function clickHandler(event : MouseEvent) : void {

      var box : Box = event.target as Box;

      if (box.data != "removed") {

        _top.excludeFromLayout(box, false);

        _bottom.add(box);

        box.data = "removed";

      } else {

        _bottom.remove(box);

        _top.includeInLayout(box);

        box.data = null;

      }

      layout();

    }

    private function layout() : void {

      _layout.layout(this);

      graphics.clear();

      drawRect(_top.visibleArea);

      drawRect(_bottom.visibleArea);

    }

    private function drawRect(rect : Rectangle) : void {

      if (rect.width) rect.inflate(10, 10);

      with (graphics) {

        beginFill(0x333333);

        drawRect(rect.x, rect.y, rect.width, rect.height);

      }

    }

  }

}

Retrieving Layout Information

After being layouted, a layout provides three versions of size information. They might be used to do some drawing depending on the final display object positions. The layout area (grey) starts from the top left point of the layouted display container and includes all space of the layout or any sublayout. The content area (light grey) is the box within the actual items are aligned. The visible area (white) of a layout begins with the first visible display object and ends with the last.

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/uitools/examples/layout/LayoutInformationExample.swf" width="310" height="210" /]

package layout.showcase {

  import com.sibirjak.ui.layout.HLayout;

  import com.sibirjak.ui.layout.shortcut.*;

  import flash.display.Sprite;

  import flash.geom.Rectangle;

  public class LayoutInformationExample extends Sprite {

    public function LayoutInformationExample() {

      x = y = 10;

      var layout : HLayout = hlayout(

        config(

          "x", 40, "y", 40,

          "width", 230, "minHeight", 130,

          "maxItemsPerRow", 5,

          "hGap", 5, "vGap", 5,

          "vRowAlign", "middle",

          "hAlign", "center", "vAlign", "middle" 

        ),

        getBoxes(12, true)

      );

      layout.layout(this);

      drawRect(layout.layoutArea, 0x999999);

      drawRect(layout.contentArea, 0xCCCCCC);

      drawRect(layout.visibleArea, 0xFFFFFF);

    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {

      var boxes : Array = new Array();

      for (var i : uint = 0; i < numBoxes; i++) {

        boxes.push(new Box(random));

      }

      return boxes;

    }

    private function drawRect(rect : Rectangle, color : uint) : void {

      rect.inflate(10, 10);

      with (graphics) {

        beginFill(color);

        drawRect(rect.x, rect.y, rect.width, rect.height);

      }

    }

  }

}

Old School API

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/uitools/examples/layout/OldSchoolAPIExample.swf" width="510" height="190" /]

package layout.showcase {

  import com.sibirjak.ui.layout.HLayout;

  import com.sibirjak.ui.layout.shortcut.*;

  import flash.display.Sprite;

  import flash.geom.Rectangle;

  public class OldSchoolAPIExample extends Sprite {

    public function OldSchoolAPIExample() {

      // layout 1

      var layout : HLayout = new HLayout();

      layout.x = 10;

      layout.y = 10;

      layout.minWidth = 220;

      layout.maxContentWidth = 180;

      layout.minHeight = 150;

      layout.hGap = 5;

      layout.vGap = 5;

      layout.vRowAlign = "justify";

      layout.hAlign = "right";

      layout.add(getBoxes(16, true));

      layout.layout(this);

      drawRect(layout.contentArea);

      // layout 2

      layout = hlayout(

        config(

          "x", 260, "y", 10,

          "minWidth", 220, "maxContentWidth", 180,

          "minHeight", 150,

          "hGap", 5, "vGap", 5,

          "vRowAlign", "justify",

          "hAlign", "right"

        ),

        getBoxes(16, true)

      );

      layout.layout(this);

      drawRect(layout.contentArea);

    }

    private function getBoxes(numBoxes : uint, random : Boolean) : Array {

      var boxes : Array = new Array();

      for (var i : uint = 0; i < numBoxes; i++) {

        boxes.push(new Box(random));

      }

      return boxes;

    }

    private function drawRect(rect : Rectangle) : void {

      if (rect.width) rect.inflate(10, 10);

      with (graphics) {

        beginFill(0x333333);

        drawRect(rect.x, rect.y, rect.width, rect.height);

      }

    }

  }

}

Styling text fields in Flash with the Jakute CSS framework

Jens Struwe — Sat, 05 Feb 2011 00:54:45 +0000

I just have added a new Jakute Styling Engine example: Styling text fields with CSS. The example shows pretty compact the possibilities of the framework and is a good starting point to get involved.

There are three Flash TextField objects added to the stage without any configuration.

[Example url="/var/www/jes/sibirjak_com_git/Jakute-Styling-Engine/examples/features/textfield/TextFieldStyles.as" /]

A (so called) type adapter realizes the communication between a particular text field and Jakute. There is some state handling built in.

[Example url="/var/www/jes/sibirjak_com_git/Jakute-Styling-Engine/examples/features/textfield/TextFieldAdapter.as" /]

An external CSS style sheet assigns different formattings and behaviors to the text fields.

[Example url="/var/www/jes/sibirjak_com_git/Jakute-Styling-Engine/examples/features/textfield/TextFieldStylesCSS.as" /]

The compiled movie:

[SWFExample example="http://sibirjak.com/osflash/wp-content/uploads/jakute/examples/features/textfield/TextFieldStyles.swf" width="320" height="120" /]

Please checkout the documentation on further information on style management in Flash with Jakute Styling Engine.

Fun with focus, tabbing and IE

Jens Struwe — Fri, 04 Feb 2011 17:14:15 +0000

If you ever have tried to create a circular tab loop with native ActionScript you apparently forgot to provide your insights the community. Anyway, I couldn’t find any related, since the web searches coughed up everything to Flash and Flex but not AS.

Well, what is this article about? Implementing a tab loop seems to be pretty easy. We make our compoents to be tab-enabled and are done. Unfortunately, it isn’t that simple. There is a trap we may fall into with the Internet Explorer’s default swf parameter seamlessTabbing. The parameter is described in the Flash Player 7 release notes. It is set to true by default and makes sure that a flash movie appears in the regular tab order of the browser window. If we hit TAB in a swf application, the focus moves either to the next focusable element within the swf or to the next browser element such as a button, link or even the URL bar.

It is actually pretty unclear, under which conditions the focus leaves the movie. To understand the problem, I have written a small test application. In this article I will explain what the keyboard focus in Flash depends on.

The test application

This is a PHP page with a form containing some configuration variables for the embedded movie. The movie appears three times in this page to be able to test the focus of multiple Flash objects. Above and below the movies are HTML buttons that may be clicked to set the focus on and watch the tab loop by hitting TAB repeatedly.

The PHP and ActionScript sources are available on GitHub.

Number of boxes:	The number of boxes appearing in the test application.
Number of tab-enabled boxes:	The number of appearing boxes that have their tabEnabled property set to true.
Seamless tabbing:	SWF object paramter. In IE true by default. Does not have effect to Firefox.
Prevent focus change:	If set to true, KEY_FOCUS_CHANGE events are blocked using focusEvent.preventDefault().
Set default focus to stage:	If set to true, the test application will focus the stage in any case the focus of a focused object is lost.

You should test the different configuration parameters in at least Firefox and IE.

The test results

Firefox: Tab loop ignores Flash movies

Test: Click one of the buttons above the movies and hit TAB multiple times. Change properties and do it again.

Link: Test 1
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

Note: This is what we expect.

IE: Tab loop broken with movies without tab-enabled children

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 2
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

IE: Tab loop correct with movies that contain tab-enabled children

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 3
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

IE: Tab loop stops with the first movie when `seamlessTabbing=false`

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 4
Configuration: seamlessTabbing=false, preventDefault=false, focusToStage=false

Note: We would rather expect the loop to ignore the movies.

IE: Tab loop stops with the first movie when focus events blocked

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 5
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=false

Note: This is the same behavior as with seamlessTabbing=false.

IE: Focus moves out of movie even when focus events blocked

Test: Click the last tab-enabled child of a movie. Then click the movie’s stage or a not tab-enabled child. Hit TAB. The focus leaves the movie.

Link: Test 6
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=false

Note: The focus should actually not move out. Apparently the player stores the last focused item which tab-enabled property is set to true. When we then hit TAB and no item is currently in focus, the player checks, if the stored child has a successor that can be focused. If there is none, it releases the movie focus.

IE: Flash loses focus to the browser without any tab-enabled child

Test: Click into a movie. The movie activates. Hit TAB. The focus moves out.

Link: Test 7
Configuration: seamlessTabbing=true, preventDefault=*, focusToStage=*

Note: To keep the focus in the movie, we at least need one child with tabEnabled set to true.

IE: Focus stays in movie if default focus is set to the stage

Test: Click the last tab-enabled child of a movie. Then click the movie’s stage or a not tab-enabled child. Hit TAB. The focus stays in the movie.

Link: Test 8
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=true

Summary

Managing the application’s focus could be quite easy if we wouldn’t have to consider the seammless tabbing capabilities of Active-X players. When we develop third party solutions, we simply cannot rely on a property that is set to the embedding HTML container.

Workaround 1

To circumvent the problem we might cancel the KEY_FOCUS_CHANGE event. However, even this does not cover all possible situations. A workaround seems to be to set the stage’s focus to the stage itself in the case the focus is not gained by any child object. Anyway, we need to set at least one child to be tab enabled.

Workaround 2

Another workaround involves 2 tab-enabled Sprite instances that never receive focus and do not contain visible content. Internally, the Flash Player would treat them as possible focus targets and therefore wouldn’t release the movie’s focus.

Note, in both cases we need to default prevent the standard focus change events and implement our own focus management.

Russischer Bär

PopUpManager, ToolTipManager

PopUpManager

ToolTipManager

Placement

Tutorial: Creating tooltips with the AS3Commons ToolTipManager

About the ToolTipManager class

About this tutorial

Requirements

Owner and tooltip size

External libraries

Creating a simple moveable box and a basic tooltip

Setup of ToolTipManager

Triggering the tooltip from the box

Register the tooltip

The ToolTipAdapter hooks

onToolTip()

onContent()

onDraw()

onRemove()

Simple tooltip adapter

The tooltip selector

The registration

Customizing the tooltip placement

Anchors

Offset

Bounds

Auto swap anchors

Auto swap anchors tolerance

Animating tooltip show and hide events

Setting the tooltips position

startAutoHide()

commitRemove()

Adavanced Tooltip

The final code and the compiled swf

Tutorial: Creating an alert box with the AS3Commons PopUpManager

About the PopUpManager class

About this tutorial

Requirements

Creating a generic alert component

Setup of PopUpManager

Different alerts

Adding transitions

Optimizations

The final code and the compiled swf

Invalidation & LifeCycle

ASDPC on GitHub and Version 0.4.0

What’s new in A3Commons Collections 1.3.0

New features

Examples

Copy items from one collection to another

Clone collections

Populate a collection from native Flash objects

Fast populate a collection using variable argument lists

AS3Commons Collections now on GitHub

Announcement: Layouts

HLayout

VLayout

Nested Layouts

Excluding from Layouts

Retrieving Layout Information

Old School API

Styling text fields in Flash with the Jakute CSS framework

Fun with focus, tabbing and IE

The test application

The test results

Firefox: Tab loop ignores Flash movies

IE: Tab loop broken with movies without tab-enabled children

IE: Tab loop correct with movies that contain tab-enabled children

IE: Tab loop stops with the first movie when seamlessTabbing=false

IE: Tab loop stops with the first movie when focus events blocked

IE: Focus moves out of movie even when focus events blocked

IE: Flash loses focus to the browser without any tab-enabled child

IE: Focus stays in movie if default focus is set to the stage

Summary

Workaround 1

Workaround 2

Setup of `ToolTipManager`

The `ToolTipAdapter` hooks

`startAutoHide()`

`commitRemove()`

Setup of `PopUpManager`

IE: Tab loop stops with the first movie when `seamlessTabbing=false`