qnx.fuse.ui.layouts.rowLayout.RowLayout

RowLayout

Properties | Methods | Examples


Packageqnx.fuse.ui.layouts.rowLayout
Classpublic final class RowLayout
InheritanceRowLayout Inheritance LayoutBase Inheritance flash.events.EventDispatcher

The RowLayout class aligns controls horizontally or vertically depending on the type specified. It supports wrapping, margins and spacing.

The following listing produces a simple RowLayout instance that organizes three LabelButton instances on the stage:

     var row:RowLayout = new RowLayout();
     row.spacing = 3;
     row.marginTop = 3;
     row.marginRight = 3;
     row.marginBottom = 3;
     row.marginLeft = 3;
     
     var button:LabelButton = new LabelButton();
     button.label = "ButtonA";
     row.addControl(button);
     
     button = new LabelButton();
     button.label = "ButtonB";
     
     row.addControl(button);
     
     button = new LabelButton();
     button.label = "ButtonC";
     
     row.addControl(button);
     


Class information:
PlayBook Tablet OS Version:   1.0.6

View the examples

See also

GridLayout
StackLayout
RowLayoutType
RowData



Public Properties

 PropertyDefined By
  debugId : String
Convenience function for identifying this instance using a String.
RowLayout
  justify : Boolean = false
Specifies whether controls should be justified to consume all available space provided to the layout.
RowLayout
  makeCellsEqualSize : Boolean = false
Specifies whether cells will be equal in size.
RowLayout
  paddingBottom : int
Specifies the amount of empty space on the bottom-most edge of the layout.
RowLayout
  paddingLeft : int
Specifies the amount of empty space on the left-most edge of the layout.
RowLayout
  paddingRight : int
Specifies the amount of empty space on the right-most edge of the layout.
RowLayout
  paddingTop : int
Specifies the amount of empty space on the top-most edge of the layout.
RowLayout
  spacing : int
Specifies the amount of empty space between each cell in the layout.
RowLayout
 Inheritedtarget : IContainer
Returns the target container.
LayoutBase
  type : String
Indicates whether the controls are laid out horizontally in rows, or vertically in columns.
RowLayout
  wrap : Boolean = true
Indicates whether controls will be wrapped to the next row - if there is sufficient space available.
RowLayout

Public Methods

 MethodDefined By
  
Constructs a new RowLayout instance.
RowLayout
  
Creates a clone of this RowLayout instance.
RowLayout
  
[override] Returns a bitwise combination of SizeOptions GROWTH | SHRINK constants, indicating whether this control wants to grow or shrink in the given dimension. The flags have the following meaning: SizeOptions.GROW_HORIZONTAL - indicates that if the control were made wider than its preferred width, it would be able to utilize the extra space. SizeOptions.SHRINK_HORIZONTAL - indicates that if the control were made norrower than its preferred width, it would still be usable. SizeOptions.GROW_VERTICAL - indicates that if the control were made taller than its preferred height, it would be able to utilize the extra space. SizeOptions.SHRINK_VERTICAL - indicates that if the control were made shorter than its preferred height, it would still be usable. For example, a wrapping text label would return its unwrapped dimensions as its preferred size.
RowLayout
 Inherited
layoutChanged(resizeChild:DisplayObject = null):Boolean
Notifies the layout that something has changed in the container or in one of its children.
LayoutBase
  
measure(availableX:Number, availableY:Number):LayoutMeasurement
[override] Returns the preferred size of the control, given one or both dimensions that have been chosen by its parent.
RowLayout
  
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
[override] Requests that a layout operation be performed immediately.
RowLayout

Property Detail

debugId


debugId:String

Convenience function for identifying this instance using a String.


Implementation

public function get debugId():String
public function set debugId(value:String):void

justify


public var justify:Boolean = false

Specifies whether controls should be justified to consume all available space provided to the layout.

The default value is false.

makeCellsEqualSize


public var makeCellsEqualSize:Boolean = false

Specifies whether cells will be equal in size.

paddingBottom


public var paddingBottom:int

Specifies the amount of empty space on the bottom-most edge of the layout.

The default value is 0.

paddingLeft


public var paddingLeft:int

Specifies the amount of empty space on the left-most edge of the layout.

The default value is 0.

paddingRight


public var paddingRight:int

Specifies the amount of empty space on the right-most edge of the layout.

The default value is 0.

paddingTop


public var paddingTop:int

Specifies the amount of empty space on the top-most edge of the layout.

The default value is 0.

spacing


public var spacing:int

Specifies the amount of empty space between each cell in the layout.

The default value is 0.

type


public var type:String

Indicates whether the controls are laid out horizontally in rows, or vertically in columns. Supported values are:

  • RowLayoutType.HORIZONTAL
  • RowLayoutType.VERTICAL

The default value is RowLayoutType.HORIZONTAL.

See also

RowLayoutType

wrap


public var wrap:Boolean = true

Indicates whether controls will be wrapped to the next row - if there is sufficient space available.

The default value is true.

Constructor Detail

RowLayout()


public function RowLayout()

Constructs a new RowLayout instance.

Method Detail

clone()


public function clone():RowLayout

Creates a clone of this RowLayout instance. The new instance contains the same data.

Returns

RowLayout — The cloned RowLayout instance.

getSizeOptions()


override public function getSizeOptions():int

Returns a bitwise combination of SizeOptions GROWTH | SHRINK constants, indicating whether this control wants to grow or shrink in the given dimension.

The flags have the following meaning:

  • SizeOptions.GROW_HORIZONTAL - indicates that if the control were made wider than its preferred width, it would be able to utilize the extra space.
  • SizeOptions.SHRINK_HORIZONTAL - indicates that if the control were made norrower than its preferred width, it would still be usable.
  • SizeOptions.GROW_VERTICAL - indicates that if the control were made taller than its preferred height, it would be able to utilize the extra space.
  • SizeOptions.SHRINK_VERTICAL - indicates that if the control were made shorter than its preferred height, it would still be usable.

For example, a wrapping text label would return its unwrapped dimensions as its preferred size. It would return SizeOptions.SHRINK_HORIZONTAL as its only growth flag since its parent can compress it horizontally. Compressing the label horizontally will cause it to grow vertically, but since the vertical growth is initiated by the label itself and not its parent, it should not return the SizeOptions.GROW_VERTICAL flag.

A single-line, editable text box would return both the SizeOptions.GROW_HORIZONTAL flag and the SizeOptions.SHRINK_HORIZONTAL flag, since the text box would still be usable with any horizontal size. It would not return any vertical flags since a one-line text box would always be exactly the height of one line of text.

Returns

int

measure()


override public function measure(availableX:Number, availableY:Number):LayoutMeasurement

Returns the preferred size of the control, given one or both dimensions that have been chosen by its parent. The preferred size may be totally different than the control's actual size. This is an indication of what size the control "wants" to be. The parent layout is still free to ignore this and set the control to a different size.

If both dimensions are DefaultSize then the control will return whatever size it feels it looks best at. If exactly one dimension is DefaultSize then the other dimension is constrained. The caller is essentially asking the control: "If I were to make you exactly this wide, how tall would you want to be?". The control is required to return any constrained dimension verbatim, so if neither dimension is set to DefaultSize, this method must return the point (availableX, availableY).

Implementations of this method must not modify the control in any way or cause any events to be dispatched. If the implementation of this method will perform any expensive calculations, it should make use of a SizeCache or other caching strategy to ensure that the average cost of this function is reasonable.

If the result of this method changes for any given input, the control will fire a ControlEvent.CONSTRAINTS_CHANGED event.

A controls will often return the most extreme size as their preferred size, since doing so allows it to return a more specific resize flag. For example, if a wrapping text control returns its unwrapped (widest possible) size as its preferred size, it would only need to specify the SizeOptions.SHRINK_HORIZONTAL resize flag. This tells its parent "I can be made up to this wide and no wider". The wrapping text control can also choose a preferred wrapping point and return that as its preferred width. However, since such a control would support other widths that are both larger and smaller than its preferred size, it would have to specify both the SizeOptions.GROW_HORIZONTAL and SizeOptions.SHRINK_HORIZONTAL flags and would not be able to communicate its maximum size to its parent. In such cases, it is generally better to report the unwrapped size as the preferred size and override the preferred size in the layout if it is not appropriate.

Parameters

availableX:Number — The horizontal space available in the parent, or DefaultSize if the horizontal dimension is unconstrained.
availableY:Number — The vertical space available in the parent, or DefaultSize if the vertical dimension is unconstrained.

Returns

LayoutMeasurement — A LayoutMeasurement instance, indicating the preferred size of the control.

updateDisplayList()


override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

Requests that a layout operation be performed immediately.

Parameters

unscaledWidth:Number — The width of the layout.
unscaledHeight:Number — The height of the layout.

Examples

The following example uses Containers and a RowLayout to create a basic calendar data layout.
package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.text.TextFormat;
    
    import qnx.fuse.ui.core.Container;
    import qnx.fuse.ui.layouts.Align;
    import qnx.fuse.ui.layouts.gridLayout.GridData;
    import qnx.fuse.ui.layouts.gridLayout.GridLayout;
    import qnx.fuse.ui.layouts.gridLayout.GridRowData;
    import qnx.fuse.ui.layouts.rowLayout.RowData;
    import qnx.fuse.ui.layouts.rowLayout.RowLayout;
    import qnx.fuse.ui.listClasses.ListSelectionMode;
    import qnx.fuse.ui.listClasses.SectionList;
    import qnx.fuse.ui.text.Label;
    import qnx.ui.data.DataProvider;
    import qnx.ui.data.SectionDataProvider;
    
    public class RowSample extends Sprite
    {
        
        private var topContainer:Container;
        private var mainContainer:Container;
        private var myRow:RowLayout;
        private var myRowD:RowData;
        
        public function RowSample()
        {
            super();
            
            // support autoOrients
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            addEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
            initializeUI();
        }
        
        private function handleAddedToStage(e:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
            // stage is avail, we can now listen for events
            stage.addEventListener( Event.RESIZE, onResize );
            // force a resize call
            onResize(new Event(Event.RESIZE));
        }
        
        private function initializeUI():void
        {
            
            topContainer = new Container();
            topContainer.setActualSize(stage.stageWidth, stage.stageHeight);
            this.addChild(topContainer);
            
            var topGrid:GridLayout = new GridLayout();
            topContainer.layout = topGrid;
            topGrid.numColumns = 2;
            var arrMonth:Array=[];
            arrMonth.push({label: "January"});
            arrMonth.push({label: "February"});
            arrMonth.push({label: "March"});
            arrMonth.push({label: "April"});
            arrMonth.push({label: "May"});
            arrMonth.push({label: "June"});
            arrMonth.push({label: "July"});
            arrMonth.push({label: "August"});
            arrMonth.push({label: "September"});
            arrMonth.push({label: "October"});
            arrMonth.push({label: "November"});
            arrMonth.push({label: "December"});
            
            var monthDP:DataProvider=new DataProvider(arrMonth);            
            var arrYear:Array=[];            
            var mySDP:SectionDataProvider = new SectionDataProvider();
            
            for (var l:int=2000; l<2011; l++) {
                
                var section:Object = new Object();
                section.label = [l];
                mySDP.addItem( section );
                
                for( var j:int = 0; j < arrMonth.length; j++ )
                {
                    mySDP.addChildToItem( {label: arrMonth[j].label}, section );  
                }
                
            }            
            
            var mySectionList:SectionList = new SectionList(); 
            mySectionList.selectionMode = ListSelectionMode.SINGLE;
            mySectionList.headerHeight = 48;    
            mySectionList.dataProvider = mySDP;
            this.addChild(mySectionList);
            
            var myGridData:GridData = new GridData();
            myGridData.preferredWidth = 150;
            myGridData.vAlign = Align.FILL;            
            
            mySectionList.layoutData = myGridData;            
            topContainer.addChild(mySectionList);    
            
            var myGridRowData:GridRowData = new GridRowData();
            myGridRowData.grow = GridRowData.FORCE_ON;
            topGrid.setColumnData(1, myGridRowData);        
            
            mainContainer = new Container();
            
            myRow = new RowLayout();
            mainContainer.layout = myRow;            
            myRow.spacing = 5;
            myRow.paddingTop = 30;
            myRow.paddingBottom = 30;
            myRow.paddingLeft = 30;
            myRow.paddingRight = 30;
            myRow.makeCellsEqualSize = true;
            
            myRowD = new RowData();
            myRowD.hAlign = Align.END;
            
            for (var i:int=1; i<32; i++) {
                var lbl:Label = new Label();            
                lbl.name = "lbl"+i;    
                
                var format : TextFormat = new TextFormat();
                format.font = "Arial";
                format.size = 72;
                lbl.format = format;
                lbl.text =  String(i);
                lbl.layoutData = myRowD;
                mainContainer.addChild(lbl);
                
            }
            
            
            topContainer.addChild(mainContainer);
                        
        }
        
        
        private function onResize(event:Event):void
        {
            trace("ContainerTest.onResize()");
            trace(topContainer.width);
            trace(topContainer.height);
            
            
            if (stage.stageWidth > stage.stageHeight) {    
                topContainer.setActualSize(stage.stageWidth, stage.stageHeight);                        
            }else{
                topContainer.setActualSize(stage.stageWidth, stage.stageHeight);                
            }
            
            
        }
        
    }
}