Hi everyone,

Before going on holiday, here is a BaseUI major release

Demo, source and code are at the end of the post or in the BaseUI main Page.

It means code written for the previous might not work for this version (even is there isn’t any major change in the structure, some internal code has been changed). If you want to update your code with this version, unless you were using the version 1, it won’t take a long time to adapt it.

I won’t explain in details the basics of BaseUI, you’ll find complete explanations in the tutorials in the BaseUI main page.

Before we could say that BaseUI was an assets manager, now it is becoming a real layout manager.

The two main classes BaseUI and ElementUI allow you to handle assets positioning by using properties on your DisplayObject like top, bottom, width, percentage width, horizontal center and so on, to make them working with the resize event (when the browser is resized by the user). It makes you able to handle liquid layouts, but also works with fixed layouts.

In the first version, BaseUI has been built mainly to work on the stage. It is working now from the version 2 with any reference, stage or another DisplayObject (see properties like onstage and reference).

As I’m also a Flex user and I’ve started to build layout for Flash taking example of the Flex framework.

In this version you’ll find a canvas, a horizontal box, a vertical box and a tile. Those new classes will be found in a layout package: CanvasUI, HBoxUI, VBoxUI and TileUI. All kind of components you can find in the Flex framework, even the name is very close so you don’t get lost with alien class name. Let’s keep things simple.

Before we start on the new classes, let’s see what the changes in BaseUI and ElementUI are. Well, almost nothing changed in appearance. Bugs have been solved and few methods and properties added.

BaseUI

Method: contains
Return true of false if the BaseUI instance already contains the DisplayObject, like you can find in a DisplayObjectContainer such as Sprite or MovieClip.

Property: autoRefresh (default true)
This is a global setting, meaning all the ElementUI created by adding DisplayObject to the BaseUI instance will get the same setting, it can be overridden in each ElementUI instance. By default, when you set a property on an ElementUI instance, the size and positions of the DisplayObject are automatically calculated and “refreshed”. Using autoRefresh set to false, you’ll have to refresh yourself the element by using the refresh methods. This applies only for setting properties, the elements will still be automatically “refreshed” when the Event.RESIZE is triggered. This property is useful if you have a lot of DisplayObject and you don’t want to execute some useless code.

ElementUI

Property: autoRefresh (default true)
See BaseUI autoRefresh description above.

Properties: forceReferenceHeight and forceReferenceWidth
BaseUI is using width and height to set the position of the DisplayObject, sometimes the size can be disturbed by mask or components. They are some properties to help you handle these problems, for example: useInitialSize or bypassSize. I’ve added these two properties and they are the strongest reference that will be used for calculate a new position.

Other layouts will be built, at least a Grid and another Canvas to handle overlapping. I'm basically waiting the official Flash Player 10 release as it has a nice text layout manager!

I’ll write a complete tutorial in the future, let’s see the layouts classes in details.

HBoxUI, VBoxUI and TileUI are subclasses of CanvasUI that is a subclass of MovieClip.

A canvas is containing:
- a Wrapper to handle the size of the canvas
- a Sprite container containing the children added in the canvas
- a Mask to hide the content that is outside of the canvas (optional)
- a Scrollpane component to handle scrollbars if the content is bigger than the canvas (optional)

CanvasUI

The main meaning of a canvas is having an area you can resize without having the content resized. As in Flex, the canvas is an absolute layout and children can overlap. It will be possible to handle some behaviors impossible without. It is also the easiest way to have a centered fixed area in the browser and easily handle ElementUI inside.

To create a canvas:

A canvas constructor can take 4 optional parameters: width, height, layoutScroll, layoutMask. By default, CanvasUI build a mask to show only the content within the size specified and creates scrollbars (scrollpane instance) if the content is bigger than the size specified. If you don’t need the mask or the scrollbar, just set them to false when you create the instance. If you set the layoutScroll to false, you don’t need a scrollpane component in the flash library (or SWC for Flex SDK user), it will not be imported or created. For example:

A canvas has a background color and alpha (default is 0), you can set those values if you want to see your canvas:

You can use all the ElementUI properties, for example: top, bottom, width, ratio, etc… straight on the canvas. The only difference, unlike ElementUI, the width and height percentage is set with others properties (percentWidth and percentHeight). For example:

A canvas has an internal BaseUI instance (for wrapper, mask and scrollpane) and another for the children. The internal BaseUI instance has the property autoRefresh set to false to keep good performance. It means when you are done setting the properties for the canvas, you must refresh it (this is only for the canvas, you don’t need to do that after adding children):

You can add children as you would do with a Sprite or other DisplayObjectContainer using the addChild method. You can also use addChildUI to add a child and an ElementUI instance will be created. You can also set ElementUI properties on the children, for example:

You have some methods to get or remove the ElementUI (see documentation):

CanvasUI is a mix between inheritance and polymorphism to make behaviors working properly. Most of the MovieClip methods and properties are accessible from the canvas instance. You might find some missing or not working properly, testing all methods and properties between DisplayObjectContainer and MovieClip is a hudge work as some are applied on the wrapper, others on the canvas and others on the container. If you’ve got a problem, you can access to the internal elements through properties (see the documentation).

HBoxUI, VboxUI and TileUI

These layouts are subclassing the CanvasUI and you’re not free to set the position of the children, they are calculated internally. You’ll find some properties common in the Flex layouts.

HBox horizontally lays out its children one by one, you have access to properties like horizontalGap, alignChildren, verticalCenterChildren and padding. Here is an example:

VBox vertically lays out its children one by one, you have access to properties like verticalGap, alignChildren, horizontalCenterChildren and padding. Here is an example:

TileUI lays out its children in a grid of equal-sized cells. You can set additional properties like horizontalGap, verticalGap, direction and padding. Here is an example:

Demo Tween

It is not working smoothly in some browsers (Firefox seems the slowest one), but you can easily tween a new position and size after a resize event. ElementUI is using an Event before applying the new values to the DisplayObject. You can add a listener, stop the propagation and handle yourself the movements. The demo link is at the end of the post or in the source.

I’ve included the demos in the source, Flex SDK users and Linux users will find a SWC of the Scrollpane classes and skin.

Hope you like it and find it useful.

Demo BaseUI
Demo CanvasUI
Demo HBoxUI
Demo VBoxUI
Demo TileUI
Demo Tween

BaseUI main page

Source

Documentation

BaseUI will help you to manage your assets (a logo, footer, a menu, etc) in the browser, in a liquid layout or a fixed area.

BaseUI is managing a list of DisplayObject like Sprite, MovieClip, TextField, Bitmap, etc. You will be able to use properties like top, bottom, left, right, horizontalCenter, verticalCenter, width and height even with percentage, some ratio mode for backgrounds and other specific properties.

Here is the BaseUI main page to see the demo, the documentation and download the source.

BaseUI instance

BaseUI is not a Singleton, you can create as many instance as you wish.
Usually, I'm creating a main BaseUI instance in the main class, the entry point, to manage most of my elements. Example in the main class (which is extending Sprite or MovieClip):

BaseUI will refresh the position and size of your DisplayObject when the Event.RESIZE will trigger.

You can now add some DisplayObject to your list; it will return an instance of the ElementUI class:

The public methods of the BaseUI class are:

The public properties:

BaseUI manages 2 lists: a list of DisplayObject and a list of DisplayObject added to the display list. Only the second one will be "refreshed".

BaseUI will trigger 2 events, when you add a DisplayObject to the BaseUI instance and when you remove it:

Reference to the ElementUI

Before we start to change the size and position of an element, you have to understand on which DisplayObject you align or resize to.

An ElementUI instance has a property onStage, the default is true. It means if you add a 10 pixels top property, it will be 10 pixels from the top of the stage.

When I build a site, I'm using an element (like a logo, a menu, a page, a footer or whatever) like I would do in Photoshop, on a layer that is taking the whole area. That's why the onStage is set to true by default, you can change it like this:

By doing this, you tell the Element to react, not with the stage anymore but with the parent DisplayObject. We will call it the DisplayObject reference, so the stage or the parent.

You have to be careful using an onStage property set to false, because it means the DisplayObject reference need to have a size to behave as expected.
For example, in a site, your main area is an invisible rectangle 800x600 (a container) that is always centered in the DisplayObject reference (the stage in my example). You can set the ElementUI onStage property of the DisplayObject in the container to false to make the elements behave as expected.

It means the invisible container will have to have a width and height. Here is a hack to do that:

I draw an invisible rectangle (the alpha is set to 0) in my container to be sure the DisplayObject reference (the container) of my ElementUI has a size, and then make the ElementUI inside behave as expected.

ElementUI properties

When you get the instance of the ElementUI class, you can use its properties, here are some examples:

To align a Sprite 10px from the bottom and right border:

To center a Sprite:

To have a Sprite fitting the browser:

You can also set (or get) all the properties in one time, like this:

BaseUI is flexible and will accept Number as well as String for the following properties:
x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter

is the same as

For the width and the height, you can also use percentage values:

In the ElementUI class, they are cases when a property shouldn’t be used, for example if you set a left and right value, the width property is not used anymore. When you do so, the class will memorize the width value in case it will be "turned on" by another property. For example, if you set horizontalCenter to 0, left and right will be memorized and turn on to NaN, the width value will be restored.

Everything is done automatically by the ElementUI class, you don’t have anything to do, see the demo for a better understanding.

You can refer to the documentation for a full list of the properties.

Refresh method

In some case you will have to manually refresh the element, for example if you change the width and the Event.RESIZE won’t be triggered.

You can refresh the element like that:

This will work only if the alpha of the DisplayObject is superior to 0 and the visible property is set to true. Otherwise, you will have to force the refresh:

The ElementUI class dispatches an updated event when the Element has been refreshed, you can listen to it like that:

To refresh all the elements of the BaseUI class, use:

Ratio property

As in the precedent version, you can set the ratio property, I guess mainly for a background:

See the demo for the different behaviors.

To turn it off, just pass an empty String or whatever you want:

Some properties are bypassed when a ratio has been set as it doesn’t make sense, like width and height. Some others like top, bottom, left and right are still working.

In ratio set to RATIO_OUT, you can use the properties alignX and alignY:

Known issue: if you set the ratio to RATIO_IN or RATIO_OUT with the property onstage set to false, it won’t work properly. Probably a further development will allow it.

Initial Size

When a DisplayObject is added in the BaseUI instance, an ElementUI is created and at this moment, the Element instance is recording the size of the DisplayObject. This is the initialWidth and initialHeight of the DisplayObject

This size is used to calculate the ratio of the DisplayObject for example.

An ElementUI instance has a property useInitialSize set by default to false, you can change it to true when you want the behavior of the ElementUI working with the initial size. It is useful for example when you have a mask in a Sprite that is disturbing the width and height of this Sprite.

Bypass Size

In some case, your DisplayObject will be animated making its size impossible to use. To prevent unexpected behaviors you can set the bypassSize property to false. Only the properties for position will be used.

Keep on screen

By default the property keepOnScreen is set to true (added in 2.0.4). This prevent the top-left corner of the DisplayObject to go off the screen.

I had to get an AIR application without the OS window, let's say windowless or chromeless.

I needed to be able, with my own graphics, to minimize, restore, maximize, close, close in the system tray or dock, fullscreen and resize.

You can find several tutorials on Internet (with which I got inspired) but I put all these functionalities in one small example as it is convenient.

You need to set 2 parameters out of the code, in the XML description file:

I won’t explain the code, I guess it is easy enough to find out. You can comment if something is not clear for you.

Here is the code of the main mxml file:

You can download the source or install the AIR application:

In order to view this page
You must enable Javascript
And download the Flash Player

I made some experiments on how to easily access to data in a Flash site. It is probably a mix with good and bad ways but I think it is worth having a look.

What I’ve done here is get data with syntax that is similar to what you get using E4X in AS3. For example with XML and E4X you can use syntax like that:

xml..item[2].author.name.text();

I’m not saying that this experiment is a good practice but I want to show you what you can do by extending the Array class and extending the Proxy class in AS3. The Proxy class is the replacement of the __resolve we were using in AS2.

Let’s say we have a website that will load data from a database at the start, for example using AMFPHP or whatever, and we are going to fill this data at run-time.

In my example I have a kind of tree with countries > cities > people.

I would like to be able to loop easily through the data, as well as getting them with a friendly/readable syntax if needed.

In my example, I have a Singleton class that contains all the data. I don’t load the data in my example, I statically fill the class. I will access to the data like that:

Content.data

This will return me a array of data, which will contains an array of countries, each instance of the country array will contains an array of cities, which will contains an array of people, etc…

So I’d like to access to my data like this:

To browse the countries:
Content.data[0]
Content.data[1]

To browse the cities in the countries:
Content.data[0][0]
Content.data[0][1]

To browse the people in the cities:
Content.data[0][0][0]
Content.data[0][0][1]

That’s nice to loop through with a “for each” or whatever. An Array is a pretty nice tool to store data as you get some functions to manage it like push, splice, reverse, etc.

But these arrays have a problem, what if I need to get more info on my countries, like the weather, an ID or the surface of the country? I would like access to more data like that:

Content.data[0].name
Content.data[0].id

This is possible with an Array as it is one of the few classes in AS3 that are dynamic. It means you can set any property at run time. For example MovieClip is dynamic and Sprite is not, try to add properties at run-time on these classes to see the result. Some people are saying that is it a good and bad things. It is easy to use but you don’t know what kind of properties will be added in your Array at run-time.

So you don’t want that, and better, you want to control what kind of data they are going to put in your Array. We will get that by extending the Array class.

There’s a nice explanation here to extends an Array, as well as control the data type your custom Array class will accept.

So far it is not bad, we can easily access to our data, we can have properties on these arrays and finally we know that we will have the right type of content inside.

The other thing I want is access to my data with a nice E4X-like:

Content.data.France.name
Content.data.France.Paris.name

Easy, we just need a property France on this array and it is done. Well, the thing is we don’t know yet what this array will be filled with, so we are talking about dynamic properties. These dynamic properties will have to be added to the array when we create it because we said we want to control and we don’t want people adding their own properties.

How do we do that?

We’re going to use the Proxy class that make able us able to handle dynamic properties and dynamic calling.

We will have a class that will be an array (what you get when you call Content.data), a class for the countries, a class for the cities and a class for the people. The people class won’t be an array.

So we have the classes DataArray, CountryArray and CityArray that are extending the Array class. We will also have a Proxy class (a class that is extending the Proxy one) for each of the Array. I choose to a Proxy class for each Array class as it is easier to understand.

Let’s see a bit of code.

The Singleton Content class