ActionScript® 3.0 Reference for the Adobe® Flash® Platform
Home  |  Show Packages and Classes List |  Packages  |  Classes  |  What's New  |  Index  |  Appendixes
spark.layouts 

TileLayout  - AS3 Flex

Packagespark.layouts
Classpublic class TileLayout
InheritanceTileLayout Inheritance LayoutBase Inheritance OnDemandEventDispatcher Inheritance Object

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The TileLayout class arranges layout elements in columns and rows of equally-sized cells. The TileLayout class uses a number of properties that control orientation, count, size, gap and justification of the columns and the rows as well as element alignment within the cells.

Per-element supported constraints are percentWidth and percentHeight. Element's minimum and maximum sizes are always be respected and where possible, an element's size is limited to less then or equal of the cell size.

When not explicitly set, the columnWidth property is calculated as the maximum preferred bounds width of all elements and the columnHeight property is calculated as the maximum preferred bounds height of all elements.

When not explicitly set, the columnCount and rowCount properties are calculated from any explicit width and height settings for the layout target, and columnWidth and columnHeight. In case none is specified, the columnCount and rowCount values are picked so that the resulting pixel area is as square as possible.

The measured size is calculated from the columnCount, rowCount, columnWidth, rowHeight properties and the gap sizes.

The default measured size, when no properties were explicitly set, is as square as possible area and is large enough to fit all elements.

In other cases the measured size may not be big enough to fit all elements. For example, when both columnCount and rowCount are explicitly set to values such that columnCount * rowCount < element count.

The minimum measured size is calculated the same way as the measured size but it's guaranteed to encompass enough rows and columns along the minor axis to fit all elements.

MXML SyntaxexpandedHide MXML Syntax

The <s:TileLayout> tag inherits all of the tag attributes of its superclass and adds the following tag attributes:

  <s:TileLayout 
    Properties
    columnAlign="left"
    columnWidth="NaN"
    horizontalAlign="justify"
    horizontalGap="6"
    orientation="rows"
    requestedColumnCount="-1"
    requestedRowCount="-1"
    rowAlign="top"
    rowCount="-1"
    rowHeight="NaN"
    verticalAlign="justify"
    verticalGap="6"
  />
  

More examples

Learn more



Public Properties
 PropertyDefined By
 InheritedclipAndEnableScrolling : Boolean
If true, specifies to clip the children to the boundaries of the viewport.
LayoutBase
  columnAlign : String
Specifies how to justify the fully visible columns to the container width.
TileLayout
  columnCount : int
[read-only] Contain the actual column count.
TileLayout
  columnWidth : Number
Contain the actual column width, in pixels.
TileLayout
 Inheritedconstructor : Object
A reference to the class object or constructor function for a given object instance.
Object
 InheriteddropIndicator : DisplayObject
The DisplayObject that this layout uses for the drop indicator during a drag-and-drop operation.
LayoutBase
  horizontalAlign : String
Specifies how to align the elements within the cells in the horizontal direction.
TileLayout
  horizontalGap : Number
Horizontal space between columns, in pixels.
TileLayout
 InheritedhorizontalScrollPosition : Number
The x coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component.
LayoutBase
  orientation : String
Specifies whether elements are arranged row by row or column by column.
TileLayout
  paddingBottom : Number
Number of pixels between the container's bottom edge and the bottom edge of the last layout element.
TileLayout
  paddingLeft : Number
The minimum number of pixels between the container's left edge and the left edge of the layout element.
TileLayout
  paddingRight : Number
The minimum number of pixels between the container's right edge and the right edge of the layout element.
TileLayout
  paddingTop : Number
Number of pixels between the container's top edge and the top edge of the first layout element.
TileLayout
  requestedColumnCount : int
Number of columns to be displayed.
TileLayout
  requestedRowCount : int
Number of rows to be displayed.
TileLayout
  rowAlign : String
Specifies how to justify the fully visible rows to the container height.
TileLayout
  rowCount : int
[read-only] The row count.
TileLayout
  rowHeight : Number
The row height, in pixels.
TileLayout
 Inheritedtarget : GroupBase
The GroupBase container whose elements are measured, sized and positioned by this layout.
LayoutBase
 InheritedtypicalLayoutElement : ILayoutElement
Used by layouts when fixed row/column sizes are requested but a specific size isn't specified.
LayoutBase
 InheriteduseVirtualLayout : Boolean
A container can hold any number of children.
LayoutBase
  verticalAlign : String
Specifies how to align the elements within the cells in the vertical direction.
TileLayout
  verticalGap : Number
Vertical space between rows, in pixels.
TileLayout
 InheritedverticalScrollPosition : Number
The y coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component.
LayoutBase
Public Methods
 MethodDefined By
  
Constructor.
TileLayout
 Inherited
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.
OnDemandEventDispatcher
 Inherited
Calculates the drop location in the data provider of the drop target for the specified dragEvent.
LayoutBase
 Inherited
When useVirtualLayout is true, this method can be used by the layout target to clear cached layout information when the target changes.
LayoutBase
 Inherited
Dispatches an event into the event flow.
OnDemandEventDispatcher
 Inherited
Called by the target after a layout element has been added and before the target's size and display list are validated.
LayoutBase
 Inherited
This method must is called by the target after a layout element has been removed and before the target's size and display list are validated.
LayoutBase
 Inherited
Returns the specified element's layout bounds as a Rectangle or null if the index is invalid, the corresponding element is null, includeInLayout=false, or if this layout's target property is null.
LayoutBase
 Inherited
Returns the change to the horizontal scroll position to handle different scrolling options.
LayoutBase
 Inherited
getNavigationDestinationIndex(currentIndex:int, navigationUnit:uint, arrowKeysWrapFocus:Boolean):int
Delegation method that determines which item to navigate to based on the current item in focus and user input in terms of NavigationUnit.
LayoutBase
 Inherited
Computes the verticalScrollPosition and horizontalScrollPosition deltas needed to scroll the element at the specified index into view.
LayoutBase
 Inherited
Returns the change to the vertical scroll position to handle different scrolling options.
LayoutBase
 Inherited
Checks whether the EventDispatcher object has any listeners registered for a specific type of event.
OnDemandEventDispatcher
 Inherited
Indicates whether an object has a specified property defined.
Object
 Inherited
Hides the previously shown drop indicator, created by the showDropIndicator() method, removes it from the display list and also stops the drag scrolling.
LayoutBase
 Inherited
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
 Inherited
Measures the target's default size based on its content, and optionally measures the target's default minimum size.
LayoutBase
 Inherited
Indicates whether the specified property exists and is enumerable.
Object
 Inherited
removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void
Removes a listener from the EventDispatcher object.
OnDemandEventDispatcher
 Inherited
Sets the availability of a dynamic property for loop operations.
Object
 Inherited
Sizes, positions and parents the drop indicator based on the specified drop location.
LayoutBase
 Inherited
Returns the string representation of this object, formatted according to locale-specific conventions.
Object
 Inherited
Returns the string representation of the specified object.
Object
 Inherited
Sizes and positions the target's elements.
LayoutBase
 Inherited
Called by the target at the end of its updateDisplayList to have the layout update its scrollRect.
LayoutBase
 Inherited
Returns the primitive value of the specified object.
Object
 Inherited
Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type.
OnDemandEventDispatcher
Protected Methods
 MethodDefined By
 Inherited
Calculates how much to scroll for the specified dropLocation during a drag and drop gesture.
LayoutBase
  
[override] Returns the index where a new item should be inserted if the user releases the mouse at the specified coordinates while completing a drag and drop gesture.
TileLayout
  
[override] Calculates the bounds for the drop indicator that provides visual feedback to the user of where the items will be inserted at the end of a drag and drop gesture.
TileLayout
 Inherited
Returns the bounds of the first layout element that either spans or is above the scrollRect's top edge.
LayoutBase
 Inherited
Returns the bounds of the first layout element that either spans or is below the scrollRect's bottom edge.
LayoutBase
 Inherited
Returns the bounds of the first layout element that either spans or is to the left of the scrollRect's left edge.
LayoutBase
 Inherited
Returns the bounds of the first layout element that either spans or is to the right of the scrollRect's right edge.
LayoutBase
 Inherited
Returns the bounds of the target's scroll rectangle in layout coordinates.
LayoutBase
 Inherited
Called when the verticalScrollPosition or horizontalScrollPosition properties change.
LayoutBase
Property Detail

columnAlign

property
columnAlign:String

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Specifies how to justify the fully visible columns to the container width. ActionScript values can be ColumnAlign.LEFT, ColumnAlign.JUSTIFY_USING_GAP and ColumnAlign.JUSTIFY_USING_WIDTH. MXML values can be "left", "justifyUsingGap" and "justifyUsingWidth".

When set to ColumnAlign.LEFT it turns column justification off. There may be partially visible columns or whitespace between the last column and the right edge of the container. This is the default value.

When set to ColumnAlign.JUSTIFY_USING_GAP the horizontalGap actual value increases so that the last fully visible column right edge aligns with the container's right edge. In case there is only a single fully visible column, the horizontalGap actual value increases so that it pushes any partially visible column beyond the right edge of the container. Note that explicitly setting the horizontalGap property does not turn off justification. It only determines the initial gap value. Justification may increases it.

When set to ColumnAlign.JUSTIFY_USING_WIDTH the columnWidth actual value increases so that the last fully visible column right edge aligns with the container's right edge. Note that explicitly setting the columnWidth property does not turn off justification. It only determines the initial column width value. Justification may increases it.

The default value is ColumnAlign.LEFT.



Implementation
    public function get columnAlign():String
    public function set columnAlign(value:String):void

Related API Elements

columnCount

property 
columnCount:int  [read-only]

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Contain the actual column count.

The default value is -1.

This property can be used as the source for data binding. When this property is modified, it dispatches the propertyChange event.



Implementation
    public function get columnCount():int

Related API Elements

columnWidth

property 
columnWidth:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Contain the actual column width, in pixels.

If not explicitly set, the column width is determined from the width of the widest element.

If the columnAlign property is set to "justifyUsingWidth", the column width grows to the container width to justify the fully-visible columns.

The default value is NaN.

This property can be used as the source for data binding. When this property is modified, it dispatches the propertyChange event.



Implementation
    public function get columnWidth():Number
    public function set columnWidth(value:Number):void

Related API Elements

horizontalAlign

property 
horizontalAlign:String

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Specifies how to align the elements within the cells in the horizontal direction. Supported values are HorizontalAlign.LEFT, HorizontalAlign.CENTER, HorizontalAlign.RIGHT, HorizontalAlign.JUSTIFY.

When set to HorizontalAlign.JUSTIFY the width of each element is set to the columnWidth.

The default value is HorizontalAlign.JUSTIFY.



Implementation
    public function get horizontalAlign():String
    public function set horizontalAlign(value:String):void

horizontalGap

property 
horizontalGap:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Horizontal space between columns, in pixels.

The default value is 6.

This property can be used as the source for data binding. When this property is modified, it dispatches the propertyChange event.



Implementation
    public function get horizontalGap():Number
    public function set horizontalGap(value:Number):void

Related API Elements

orientation

property 
orientation:String

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Specifies whether elements are arranged row by row or column by column. ActionScript values can be TileOrientation.ROWS and TileOrientation.COLUMNS. MXML values can be "rows" and "columns".

The default value is TileOrientation.ROWS.



Implementation
    public function get orientation():String
    public function set orientation(value:String):void

paddingBottom

property 
paddingBottom:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Number of pixels between the container's bottom edge and the bottom edge of the last layout element.

The default value is 0.



Implementation
    public function get paddingBottom():Number
    public function set paddingBottom(value:Number):void

paddingLeft

property 
paddingLeft:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The minimum number of pixels between the container's left edge and the left edge of the layout element.

The default value is 0.



Implementation
    public function get paddingLeft():Number
    public function set paddingLeft(value:Number):void

paddingRight

property 
paddingRight:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The minimum number of pixels between the container's right edge and the right edge of the layout element.

The default value is 0.



Implementation
    public function get paddingRight():Number
    public function set paddingRight(value:Number):void

paddingTop

property 
paddingTop:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Number of pixels between the container's top edge and the top edge of the first layout element.

The default value is 0.



Implementation
    public function get paddingTop():Number
    public function set paddingTop(value:Number):void

requestedColumnCount

property 
requestedColumnCount:int

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Number of columns to be displayed.

Set to -1 to allow the TileLayout to determine the column count automatically.

If the orientation property is set to TileOrientation.ROWS, then setting this property has no effect In this case, the rowCount is explicitly set, and the container width is explicitly set.

The default value is -1.



Implementation
    public function get requestedColumnCount():int
    public function set requestedColumnCount(value:int):void

Related API Elements

requestedRowCount

property 
requestedRowCount:int

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Number of rows to be displayed.

Set to -1 to remove explicit override and allow the TileLayout to determine the row count automatically.

If the orientation property is set to TileOrientation.COLUMNS, setting this property has no effect. in this case, columnCount is explicitly set, and the container height is explicitly set.

The default value is -1.



Implementation
    public function get requestedRowCount():int
    public function set requestedRowCount(value:int):void

Related API Elements

rowAlign

property 
rowAlign:String

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Specifies how to justify the fully visible rows to the container height. ActionScript values can be RowAlign.TOP, RowAlign.JUSTIFY_USING_GAP and RowAlign.JUSTIFY_USING_HEIGHT. MXML values can be "top", "justifyUsingGap" and "justifyUsingHeight".

When set to RowAlign.TOP it turns column justification off. There might be partially visible rows or whitespace between the last row and the bottom edge of the container. This is the default value.

When set to RowAlign.JUSTIFY_USING_GAP the verticalGap actual value increases so that the last fully visible row bottom edge aligns with the container's bottom edge. In case there is only a single fully visible row, the value of verticalGap increases so that it pushes any partially visible row beyond the bottom edge of the container. Note that explicitly setting the verticalGap does not turn off justification, but just determines the initial gap value. Justification can then increases it.

When set to RowAlign.JUSTIFY_USING_HEIGHT the rowHeight actual value increases so that the last fully visible row bottom edge aligns with the container's bottom edge. Note that explicitly setting the rowHeight does not turn off justification, but determines the initial row height value. Justification can then increase it.

The default value is RowAlign.TOP.



Implementation
    public function get rowAlign():String
    public function set rowAlign(value:String):void

Related API Elements

rowCount

property 
rowCount:int  [read-only]

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The row count.

The default value is -1.

This property can be used as the source for data binding. When this property is modified, it dispatches the propertyChange event.



Implementation
    public function get rowCount():int

Related API Elements

rowHeight

property 
rowHeight:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The row height, in pixels.

If not explicitly set, the row height is determined from the maximum of elements' height.

If rowAlign is set to "justifyUsingHeight", the actual row height increases to justify the fully-visible rows to the container height.

The default value is NaN.

This property can be used as the source for data binding. When this property is modified, it dispatches the propertyChange event.



Implementation
    public function get rowHeight():Number
    public function set rowHeight(value:Number):void

Related API Elements

verticalAlign

property 
verticalAlign:String

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Specifies how to align the elements within the cells in the vertical direction. Supported values are VerticalAlign.TOP, VerticalAlign.MIDDLE, VerticalAlign.BOTTOM, VerticalAlign.JUSTIFY.

When set to VerticalAlign.JUSTIFY, the height of each element is set to rowHeight.

The default value is VerticalAlign.JUSTIFY.



Implementation
    public function get verticalAlign():String
    public function set verticalAlign(value:String):void

verticalGap

property 
verticalGap:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Vertical space between rows, in pixels.

The default value is 6.

This property can be used as the source for data binding. When this property is modified, it dispatches the propertyChange event.



Implementation
    public function get verticalGap():Number
    public function set verticalGap(value:Number):void

Related API Elements

Constructor Detail

TileLayout

()Constructor
public function TileLayout()

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Constructor.

Method Detail

calculateDropIndex

()method
override protected function calculateDropIndex(x:Number, y:Number):int

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Returns the index where a new item should be inserted if the user releases the mouse at the specified coordinates while completing a drag and drop gesture. Called by the calculatedDropLocation() method.

Parameters

x:Number — The x coordinate of the drag and drop gesture, in local coordinates.
 
y:Number — The y coordinate of the drag and drop gesture, in the drop target's local coordinates.

Returns
int — The drop index or -1 if the drop operation is not available at the specified coordinates.

calculateDropIndicatorBounds

()method 
override protected function calculateDropIndicatorBounds(dropLocation:DropLocation):Rectangle

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Calculates the bounds for the drop indicator that provides visual feedback to the user of where the items will be inserted at the end of a drag and drop gesture. Called by the showDropIndicator() method.

Parameters

dropLocation:DropLocation — A valid DropLocation object previously returned by the calculateDropLocation() method.

Returns
Rectangle — The bounds for the drop indicator or null.