AbstractAsulObject

From MegaZine3
Jump to: navigation, search

Base class for all ASUL elements.

An ASUL element is one that can be completely described via some xml data, and offers a constructor that takes such XML data, constructing itself based on that data.

Children will be notified when the size of their parent changes, which allows them to perform layouting or other actions. This only works if an asul object is a direct child of the resizing object. Any normal display objects will break the chain.

Contents

[edit] Attributes

anchors

This attribute can be used for layouting elements. This attribute takes a list of four comma separated expressions, which can be either floating point numbers in a range of [0, 1], or mathematical terms, which will be evaluated whenever the parent's size changes. For those terms there are two variables available: pw, the parent's width, and ph, the parent's height. So, the basic format is x1, y1, x2, y2, where the different values may either be 0-1 or a term. Examples:

Furthermore, for the x and y coordinates, there are two additional parameters available: w and h, the object's width and height, respectively, before the size change handling. This means they are primarily useful when the width / height are of a fixed value. In such cases something like this is possible: pw-w,ph-h, which puts the object in the lower right corner of the parent.

Example 

<box anchors="0, 20, pw-20, ph" background="color(0x990000)"/>
Results in the following:

background

Can be used to define a background graphic for the element. There are three supported types of background graphics, which must be given in the typical definition format: type(arguments). Types are:

color

A uniform color. Can be defined in either ARGB or RGB format. Value must be given in any a number format parsable by Flash, but is recommended to use hexadecimal format: 0xRRGGBB or 0xAARRGGBB. Defaults to a transparent background (which cannot be achieved using 0x00000000 by the way, so just leave it blank for a transparent background).

A few examples:

gradient

A color gradient, fading between two colors. Three gradient types are available: radial, linear-horziontal and linear-vertical. In radial mode, the first given color is the inner one, for linear-horizontal it's the left one and for linear-vertical the top one. The format is:

gradient(type, color1, color2, ratio1, ratio2)

The colors can be given in either RGB or ARGB format. They default to 0xFF00FF for color1, and 0x000000 for color2. The ratios can be a number in an interval of [0, 1], and should be in given in increasing order, i.e. ratio1 < ratio1. The default to 0 for ratio1 and 1 for ratio2. For the different types:

image

Can be used to specify an image as a background graphic. The url will be sent through the absolute path resolver, if it is set. Else it will be relative to the outermost context (e.g. HTML page loading the flash element). Format is image(url), example:

[edit] Example 

<box anchors="0, 0, pw, ph" background="color(0x990000)">
    <box anchors="10, 10, pw-10, ph-10" background="gradient(linear-vertical,0x990000,0x330000)">
        <box anchors="10, 10, pw-10, ph-10" background="image(http://www.megazine3.de/wiki/mz3wiki.png)"/>
    </box>
</box>
Results in the following:

backgroundrepeat

Can be used to tile the background of an object that uses an image (and only those using an image background) to tile the image.

Example 

<box anchors="0, 0, pw, ph" background="image(http://www.megazine3.de/wiki/mz3wiki.png)" backgroundrepeat="true"/>
Results in the following:

blendmode

Can be used to define the blend mode of an object. The modes are as defined in the BlendMode class. Use the constant values here, e.g. overlay or add.

Example 

<box anchors="0, 0, pw, ph" background="color(0x990000)">
    <box anchors="10, 10, pw-10, ph-10" background="gradient(linear-vertical,0xFFFFFF,0x000000)" blendmode="overlay"/>
</box>
Results in the following:

clipchildren

Whether to clip child elements of this object. If enabled, content that exceeds the size (bounds) of this object will be cut off and not rendered.

height

The (initial) height of this object.

hideifempty

Whether to automatically set an elements visibility to false if its size becomes zero in either direction (width or height). This can be handy for elements that have a padding, but should be hidden if they are actually empty.

maxheight

The maximum height of the component.

maxwidth

The maximum width of the component.

minheight

The minimum height of the component.

minwidth

The minimum width of the component.

name

The name of this element. This can be used to either get children using the deepGetChildByName() function in own code, to retrieve a reference to the element, or to define specific element children, that have predefined behavior (implemented in subclasses). Such specific names should always begin and end with a '$' character (e.g. $my_usable_child$. If classes specify such children can be looked up in their documentation.

padding

A comma separated list of up to four numbers, which represent the left, top, right and bottom padding of this element, respectively. The displayed width and height remains the same, regardless of the set padding, but the available space for child elements will change, accordingly.

Example 

<box anchors="0, 0, pw, ph" background="color(0x990000)" padding="5,10,15,20">
    <box anchors="0, 0, pw, ph" background="color(0xCC6666)"/>
</box>
Results in the following:

resize

Whether this object should adjust its size to match its childrens' overall bounds. This can be useful for container objects.

Example 

<box anchors="(pw-w)/2, (ph-h)/2" background="color(0x990000)" resize="true">
    <box width="20" height="20" background="color(0xCC6666)"/>
</box>
Results in the following:

rotation

The rotation of this object. Note that unlike normal Flash display objects, the object is not rotated around its top left corner (or anchor, if set in the IDE), but around its center, and kept aligned to its x and y position (i.e. x and y attributes stay the same when rotation changes, whereas width and height do not).

The rotation is given in degrees (not radians).

Example 

<box width="50" height="50" background="color(0x990000)" rotation="45"/>
Results in the following:

scale9grid

Allows defining a scale9grid for the loaded background image. This makes it a lot easier to create backgrounds with custom borders.

The given value must be a comma separated list of four numeric values. The values must be in the range of [0, backgroundImageWidth] for the first and third number, and [0, backgroundImageHeight] for the second and fourth number. The numbers represent:

For more information on scale9grid, see Adobe's documentation. Note that unlike the original scale9grid of flash, this one also works on bitmap data (JPGs, PNGs, etc), thanks to the ScaleBitmap class from [1].

Example

The above one is without using a scale grid, the lower one is using a scale grid. 

<box anchors="0,0,pw,100" background="image(http://www.megazine3.de/wiki/images/b/b4/Rounded.png)"/>
<box anchors="0,120,pw,ph" background="image(http://www.megazine3.de/wiki/images/b/b4/Rounded.png)" scale9grid="12,12,13,13"/>
Results in the following:

style

The style class from an ASUL file's style block to apply to this object. This is roughly equivalent to the 'class' attribute in HTML to apply CSS classes.

target

The target (called "window" in the Flash API) of a link set in the @url attribute.

url

Allows linking ASUL components. This uses Flash's navigateToURL() function.

Example 

<box anchors="0,0,pw,ph" background="color(0x990000)" url="http://www.example.com/"/>
Results in the following:

width

The (initial) width of this object.

x

The initial horizontal position of this element, relative to it's parent.

Example 

<box x="20" width="50" height="50" background="color(0x990000)"/>
Results in the following:

y

The initial vertical position of this element, relative to it's parent.

Example 

<box y="20" width="50" height="50" background="color(0x990000)"/>
Results in the following:
ASUL-related articles
Components Box · Button · ProgressBar · ScrollBar · ScrollPane · Text · ToggleButton · Window
Layouts Horizontal Flow Layout · Vertical Flow Layout
ASUL Articles ASUL Document · Editing the GUI · Layouting · ASUL scripting
Retrieved from "http://www.megazine3.de/doc/AbstractAsulObject"
Personal tools
Namespaces
Variants
Actions
Navigation
documentation
miscellaneous
Toolbox