spark.layouts.TileLayout - Adobe® Flex® 4 Language Reference (Flex 4)

Package	spark.layouts
Class	public class TileLayout
Inheritance	TileLayout LayoutBase OnDemandEventDispatcher 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 Syntax expanded

Hide 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"
  />

Public Properties

Hide Inherited Public Properties

Show Inherited Public Properties

	Property		Defined By
		clipAndEnableScrolling : 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
		constructor : Object A reference to the class object or constructor function for a given object instance.	Object
		dropIndicator : 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
		horizontalScrollPosition : 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
		prototype : Object [static] A reference to the prototype object of a class or function object.	Object
		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
		target : GroupBase The GroupBase container whose elements are measured, sized and positioned by this layout.	LayoutBase
		typicalLayoutElement : ILayoutElement Used by layouts when fixed row/column sizes are requested but a specific size isn't specified.	LayoutBase
		useVirtualLayout : 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
		verticalScrollPosition : 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

Hide Inherited Public Methods

Show Inherited Public Methods

	Method		Defined By
		TileLayout() Constructor.	TileLayout
		addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void	OnDemandEventDispatcher
		calculateDropLocation(dragEvent:DragEvent):DropLocation Calculates the drop location in the data provider of the drop target for the specified dragEvent.	LayoutBase
		clearVirtualLayoutCache():void When useVirtualLayout is true, this method can be used by the layout target to clear cached layout information when the target changes.	LayoutBase
		dispatchEvent(event:Event):Boolean	OnDemandEventDispatcher
		elementAdded(index:int):void Called by the target after a layout element has been added and before the target's size and display list are validated.	LayoutBase
		elementRemoved(index:int):void 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
		getElementBounds(index:int):Rectangle 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
		getHorizontalScrollPositionDelta(navigationUnit:uint):Number Returns the change to the horizontal scroll position to handle different scrolling options.	LayoutBase
		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
		getScrollPositionDeltaToElement(index:int):Point Computes the verticalScrollPosition and horizontalScrollPosition deltas needed to scroll the element at the specified index into view.	LayoutBase
		getVerticalScrollPositionDelta(navigationUnit:uint):Number Returns the change to the horizontal scroll position to handle different scrolling options.	LayoutBase
		hasEventListener(type:String):Boolean	OnDemandEventDispatcher
		hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined.	Object
		hideDropIndicator():void Hides the previously shown drop indicator, created by the showDropIndicator() method, removes it from the display list and also stops the drag scrolling.	LayoutBase
		isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.	Object
		measure():void Measures the target's default size based on its content, and optionally measures the target's default minimum size.	LayoutBase
		propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable.	Object
		removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void	OnDemandEventDispatcher
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations.	Object
		showDropIndicator(dropLocation:DropLocation):void Sizes, positions and parents the drop indicator based on the specified drop location.	LayoutBase
		toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions.	Object
		toString():String Returns the string representation of the specified object.	Object
		updateDisplayList(width:Number, height:Number):void Sizes and positions the target's elements.	LayoutBase
		updateScrollRect(w:Number, h:Number):void Called by the target at the end of its updateDisplayList to have the layout update its scrollRect.	LayoutBase
		valueOf():Object Returns the primitive value of the specified object.	Object
		willTrigger(type:String):Boolean	OnDemandEventDispatcher

Protected Methods

Show Inherited Protected Methods

	Method		Defined By
		calculateDragScrollDelta(dropLocation:DropLocation, elapsedTime:Number):Point Calculates how much to scroll for the specified dropLocation during a drag and drop gesture.	LayoutBase
		calculateDropIndex(x:Number, y:Number):int [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
		calculateDropIndicatorBounds(dropLocation:DropLocation):Rectangle [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
		getElementBoundsAboveScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is above the scrollRect's top edge.	LayoutBase
		getElementBoundsBelowScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is below the scrollRect's bottom edge.	LayoutBase
		getElementBoundsLeftOfScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is to the left of the scrollRect's left edge.	LayoutBase
		getElementBoundsRightOfScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is to the right of the scrollRect's right edge.	LayoutBase
		getScrollRect():Rectangle Returns the bounds of the target's scroll rectangle in layout coordinates.	LayoutBase
		scrollPositionChanged():void 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

See also

horizontalGap
columnWidth
rowAlign

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

See also

rowCount
columnAlign

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

See also

rowHeight
columnAlign

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

See also

verticalGap
columnAlign

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

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

See also

columnCount
columnAlign

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

See also

rowCount
rowAlign

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 increases it.

The default value is RowAlign.TOP.

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

See also

verticalGap
rowHeight
columnAlign

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

See also

requestedRowCount
columnCount

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

See also

columnWidth
rowAlign

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

See also

horizontalGap
rowAlign

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.