qnx.fuse.ui.layouts.gridLayout.GridLayout

GridLayout

Properties | Methods | Examples


Packageqnx.fuse.ui.layouts.gridLayout
Classpublic final class GridLayout
InheritanceGridLayout Inheritance LayoutBase Inheritance flash.events.EventDispatcher

The GridLayout class arranges controls into rows and columns of cells. This is the most common type of layout for arranging non-overlapping controls, and can be used to create resizable rows or columns of controls. The number of columns is controlled by the numColumns attribute, and the number of rows is determined by the number of columns and the number of child elements. Setting numColumns to 0 is the same as setting it to the number of children, and will cause the layout to create everything in one row.

Layout algorithm:

The layout will try to give each control its preferred size if possible. If there is extra space, it will distribute the extra pixels among any growing rows or columns. If there is not enough space, it will remove the needed pixels from any shrinking rows or columns. If there are no growing or shrinking columns available, the layout will fall back to a default behavior controlled by the hAlign or vAlign property.

By default, each cell contains one control, but it is possible to configure controls to span multiple cells. Controls are assigned to cells in English reading order (left-to-right, top-to-bottom). Controls that don't span multiple cells are always placed in the next available cell. Controls that span multiple cells are placed in the next available grouping of cells that will fit the control.

A row or column is considered growing or shrinking by default if it contains at least one growing or shrinking control respectively. In the event that a growing or shrinking control spans multiple rows or columns, the GridLayout will choose to grow or shrink one of those columns if none grows/shrinks already. If the default growth/shrink behavior is not deemed appropriate for a given layout, the defaults can be overridden directly by calling setRowData() or setColumnData().

The preferred size for a row or column is the maximum of the preferred sizes of its controls. In the event that a control spans multiple cells, the layout will allocate the space for that control over the cells it spans in a manner than gives the control its preferred size while minimizing the overall size of the layout. If the default preferred size is deemed inappropriate for a given layout, the preferred size of each row or column may be controlled directly by calling setRowData() or setColumnData().

Layout Data:

Controls that belong to a GridLayout may have an optional GridData object attached to their layoutData. No other type of layoutData is permitted for controls within a GridLayout, and attaching other types of layout data to elements in a GridLayout will cause an error. If no layout data is attached to a control, this is treated equivalent to having a GridData instantiated with its default constructor. The same GridData instance may be attached to multiple controls and may be shared between multiple GridLayouts.

The GridData for each control controls any per-control settings. Anything specified in the GridData will override any defaults supplied by the control itself. Anything specified in the layout's setRowData() or setColumnData() will override any settings on the GridData.



Class information:
PlayBook Tablet OS Version:   1.0.6

View the examples

See also

RowLayout
StackLayout



Public Properties

 PropertyDefined By
  debugId : String
Gets or sets an ID that is used to easily identify GridLayout instances in the debugger.
GridLayout
  hAlign : String
Gets or sets the horizontal alignment of the GridLayout.
GridLayout
  horizontalPadding : Number
[write-only] Sets the left and right padding to the given value.
GridLayout
  hSpacing : Number
Specifies the horizontal space between columns.
GridLayout
  numColumns : int
Specifies the number of cell columns in the layout.
GridLayout
  padding : Number
[write-only] Sets the top, bottom, left, and right padding to the given value.
GridLayout
  paddingBottom : Number
Specifies the amount of empty space at the bottom of the layout.
GridLayout
  paddingLeft : Number
Specifies the amount of empty space on the left-most edge of the layout.
GridLayout
  paddingRight : Number
Specifies the amount of empty space on the right-most edge of the layout.
GridLayout
  paddingTop : Number
Specifies the amount of empty space at the top edge of the layout.
GridLayout
  spacing : Number
[write-only] Sets hSpacing and vSpacing to the given value.
GridLayout
 Inheritedtarget : IContainer
Returns the target container.
LayoutBase
  vAlign : String
Gets or sets the vertical alignment of the GridLayout.
GridLayout
  verticalPadding : Number
[write-only] Sets the top and bottom padding to the given value.
GridLayout
  vSpacing : Number
Specifies the vertical space between rows.
GridLayout

Public Methods

 MethodDefined By
  
GridLayout(numColumns:int = 1)
Creates a new GridLayout instance with the given number of columns.
GridLayout
  
clearOptions(options:int):void
Clears any layout options from the GridLayout.
GridLayout
  
Creates a clone of this GridLayout instance.
GridLayout
  
[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.
GridLayout
 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.
GridLayout
  
setColumnData(index:int, data:GridRowData):void
Sets the column data for the given column.
GridLayout
  
setOptions(options:int):void
Indicates that the GridLayout should always return the given SizeOptions, regardless of the contents of the layout.
GridLayout
  
setRowData(index:int, data:GridRowData):void
Sets the row data for the given row.
GridLayout
  
setSpacing(spacing:Number):void
Sets hSpacing and vSpacing to the given value.
GridLayout
  
setTopLevelAlign(hAlign:String, vAlign:String):void
Sets the alignment that will be used for the boundary of the layout itself, if the layout contains no appropriately resizable rows or columns, and if the layout is given extra space.
GridLayout
  
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
[override] Requests that a layout operation be performed immediately.
GridLayout
  
useDefaultOptions(options:int):void
Indicates that the GridLayout should compute the given size options automatically based on the contents of the layout.
GridLayout

Property Detail

debugId


debugId:String

Gets or sets an ID that is used to easily identify GridLayout instances in the debugger.

This has no effect on the layout.


Implementation

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

hAlign


hAlign:String

Gets or sets the horizontal alignment of the GridLayout.

If the layout cannot resize its contents to match the horizontal space available to it, this setting controls how the layout behaves. In other words, the setting does nothing if the layout is able to resize using the usual size options.

Must be one of:

  • Align.BEGIN
  • Align.CENTER
  • Align.END
  • Align.FILL

The default alignment (Align.BEGIN) indicates that GridLayout should keep widgets on the left side of its boundary. If there is too much space, empty space will be added on the right side of the layout. If there is not enough space, the rightmost widgets will be clipped first. Non-resizable columns will not be forced to resize.

With Align.CENTER alignment, the entire grid will be centered horizontally. If there is too much space, empty space will be added on both sides of the layout. If there is not enough space, widgets on both sides of the layout will be clipped. Non-resizable columns will not be forced to resize.

With Align.END alignment, the widgets will always be aligned with the right side of the layout's boundary. If there is too much space, empty space will be added on the left. If there is not enough space, the leftmost widgets will be clipped. Non-resizable columns will not be forced to resize.

With Align.FILL alignment, the widgets will be forced to fill the available space. No whitespace will be inserted and no widgets will be clipped, but if there are no resizable columns in the layout, all columns will be forced to resize.


Implementation

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

See also

layouts.Align
vAlign

horizontalPadding


horizontalPadding:Number  [write-only]

Sets the left and right padding to the given value.


Implementation

public function set horizontalPadding(value:Number):void

hSpacing


public var hSpacing:Number

Specifies the horizontal space between columns.

The default value is 0.

numColumns


public var numColumns:int

Specifies the number of cell columns in the layout. If set to 0 then the layout will position all the controls in a single row.

The default value is 0.

padding


padding:Number  [write-only]

Sets the top, bottom, left, and right padding to the given value.


Implementation

public function set padding(value:Number):void

paddingBottom


public var paddingBottom:Number

Specifies the amount of empty space at the bottom of the layout.

The default value is 0.

paddingLeft


public var paddingLeft:Number

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

The default value is 0.

paddingRight


public var paddingRight:Number

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

The default value is 0.

paddingTop


public var paddingTop:Number

Specifies the amount of empty space at the top edge of the layout.

The default value is 0.

spacing


spacing:Number  [write-only]

Sets hSpacing and vSpacing to the given value.


Implementation

public function set spacing(value:Number):void

vAlign


vAlign:String

Gets or sets the vertical alignment of the GridLayout.

Must be one of:

  • Align.BEGIN
  • Align.CENTER
  • Align.END
  • Align.FILL

If the layout cannot resize its contents to match the vertical space available to it, then this setting will define the behavior of the layout. Note that the setting does nothing if the layout is able to resize itself using the usual size options.

The default alignment (Align.BEGIN) indicates that GridLayout should keep widgets on the left side of its boundary. If there is too much space, empty space will be added on the top of the layout. If there is not enough space, the bottom-most widgets will be clipped first. Non-resizable rows will not be forced to resize.

With Align.CENTER alignment, the entire grid will be centered vertically. If there is too much space, empty space will be added on both sides of the layout. If there is not enough space, widgets on both sides of the layout will be clipped. Non-resizable rows will not be forced to resize.

With Align.END alignment, the widgets will always be aligned with the bottom of the layout's boundary. If there is too much space, empty space will be added on the top. If there is not enough space, the topmost widgets will be clipped first. Non-resizable rows will not be forced to resize.

With Align.FILL alignment, the widgets will be forced to fill the available vertical space. No whitespace will be inserted and no widgets will be clipped.If there are no resizable rows in the layout, all rows will be forced to resize.


Implementation

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

See also

hAlign

verticalPadding


verticalPadding:Number  [write-only]

Sets the top and bottom padding to the given value.


Implementation

public function set verticalPadding(value:Number):void

vSpacing


public var vSpacing:Number

Specifies the vertical space between rows.

The default value is 0.

Constructor Detail

GridLayout()


public function GridLayout(numColumns:int = 1)

Creates a new GridLayout instance with the given number of columns.

Parameters

numColumns:int (default = 1) — The number of columns, or 0 to put all the controls in a single row.

Method Detail

clearOptions()


public function clearOptions(options:int):void

Clears any layout options from the GridLayout.

Indicates that the GridLayout should never return any of the given SizeOptions, regardless of the contents of the layout. You can use this method to override the default behaviors of the layout and to control the growth options directly. For example, calling clearOptions(SizeOptions.SHRINK_VERTICAL) will cause GridLayout to report to its parent that it cannot be shrunk vertically, even if the layout detects that its children support shrinking.

Parameters

options:int — A bitwise combination of constants from SizeOptions that should never be returned from getSizeOptions.

clone()


public function clone():GridLayout

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

Returns

GridLayout — The cloned GridLayout 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.

setColumnData()


public function setColumnData(index:int, data:GridRowData):void

Sets the column data for the given column.

Columns are indexed from 0. Setting column data for a column number greater than the current number of columns in the layout is permitted, but will have no visible effect on the layout. Any settings in the GridRowData will override anything computed from the individual controls or their GridData.

The following example creates GridRowData instance and applies it to a column:

         myGRDL = new GridRowData();
         myGRDL.preferredSize = 200;            
         myGrid.setColumnData(1, myGRDL);
         

Parameters

index:int — The column number. The left-most column is column 0, and the column numbers are indexed from left to right. Negative indices are not permitted. You can assign a GridRowData instance to a column index that is greater than the current number of columns, but doing so will have no effect if the column is never used.
data:GridRowData — A GridRowData instance containing settings for the column.

setOptions()


public function setOptions(options:int):void

Indicates that the GridLayout should always return the given SizeOptions, regardless of the contents of the layout. You can use this method to override the default behaviors of the layout and to control the growth options directly. For example, calling setOptions(SizeOptions.GROW_HORIZONTAL) will cause the GridLayout to always report itself as horizontally resizable even if it contains no horizontally resizable contents.

Parameters

options:int — A bitwise combination of constants from SizeOptions that should always be returned from getSizeOptions.

setRowData()


public function setRowData(index:int, data:GridRowData):void

Sets the row data for the given row.

Rows are indexed from 0. Setting row data for a row number greater than the current number of rows in the layout is permitted, but will have no visible effect on the layout. Any settings in the GridRowData will override anything computed from the individual controls or their GridData.

Parameters

index:int — The row number. The top-most row is row 0, lower rows have ascending row numbers. Negative row numbers are not permitted. Data may be assigned to higher row numbers that do not currently exist.
data:GridRowData — A GridRowData instance containing settings for the row.

setSpacing()


public function setSpacing(spacing:Number):void

Sets hSpacing and vSpacing to the given value.

Parameters

spacing:Number — The new spacing value that should be used for both horizontal and vertical spacing.

setTopLevelAlign()


public function setTopLevelAlign(hAlign:String, vAlign:String):void

Sets the alignment that will be used for the boundary of the layout itself, if the layout contains no appropriately resizable rows or columns, and if the layout is given extra space.

Parameters

hAlign:String
vAlign:String

See also

The horizontal alignment.
The vertical alignment.

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.

useDefaultOptions()


public function useDefaultOptions(options:int):void

Indicates that the GridLayout should compute the given size options automatically based on the contents of the layout. This is the default for all options. This method can be used to undo a previous call to setOptions or clearOptions.

Parameters

options:int — A bitwise combination of constants from SizeOptions that should be computed automatically from now on.

Examples

The following example uses multiple Containers and multiple GridLayout instances to create a credit card information submission form. The size of the container changes as the device changes orientation.

package
{
    import flash.display.Sprite;
    import flash.display.StageOrientation;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    
    import qnx.fuse.ui.core.Container;
    import qnx.fuse.ui.core.IContainer;
    import qnx.fuse.ui.layouts.Align;
    import qnx.fuse.ui.layouts.gridLayout.GridData;
    import qnx.fuse.ui.layouts.gridLayout.GridLayout;
    import qnx.fuse.ui.listClasses.DropDown;
    import qnx.fuse.ui.listClasses.ScrollDirection;
    import qnx.fuse.ui.text.Label;
    import qnx.fuse.ui.text.TextInput;
    import qnx.fuse.ui.utils.DropDownUtils;
    import qnx.fuse.ui.utils.LayoutUtil;
    import qnx.ui.data.DataProvider;
    
    [SWF(height="600", width="1024", frameRate="30",
     backgroundColor="#FFFFFF")]
    public class CreditCardForm extends Sprite
    {
        
        public var container:Container;
        
        public function CreditCardForm(){
            
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            addEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
            createContainer();
            
        }
        
        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 createContainer():void
        {
            container = new Container();
            container.scrollDirection = ScrollDirection.VERTICAL;    
            container.height = stage.stageHeight;
            container.width = stage.stageWidth;
            
            var grid:GridLayout = new GridLayout();
            container.layout = grid;
            grid.spacing = 5;
            
            grid.padding = 10;
            grid.numColumns = 2;
            grid.debugId = "creditCardGrid";
            
            var titleData:GridData = new GridData();
            titleData.hSpan = 4; 
            titleData.hAlign = Align.FILL;
            titleData.vAlign = Align.END;
            
            var spacerData:GridData = new GridData();
            spacerData.hSpan = 4; 
            spacerData.preferredHeight = 20;
            
            var secPinData:GridData = new GridData();
            secPinData.hAlign = Align.BEGIN;
            secPinData.vAlign = Align.CENTER;
            secPinData.preferredWidth = 150;
            
            var textInputAlignData:GridData = new GridData();
            textInputAlignData.vAlign = Align.CENTER;
            textInputAlignData.hAlign = Align.FILL;
            textInputAlignData.preferredWidth = 200;
            
            var labelAlignData:GridData = new GridData();
            labelAlignData.hAlign = Align.END;
            labelAlignData.vAlign = Align.CENTER;
            
            var ccSpacer:Label = new Label();
            ccSpacer.layoutData = spacerData;
        
            var ccInfoLabel:Label = new Label();
            ccInfoLabel.text = "Credit Card Information";
            ccInfoLabel.layoutData = titleData;
            container.addChild(ccInfoLabel);
            
            var ccInfoFNameLabel:Label = new Label();
            ccInfoFNameLabel.text = "FIRST NAME";
            ccInfoFNameLabel.layoutData = labelAlignData;
            container.addChild(ccInfoFNameLabel);
            
            var ccInfoFNameInput:TextInput = new TextInput();
            ccInfoFNameInput.layoutData = textInputAlignData;
            container.addChild(ccInfoFNameInput);
            
            var ccInfoLNameLabel:Label = new Label();
            ccInfoLNameLabel.text = "LAST NAME";
            ccInfoLNameLabel.layoutData = labelAlignData;
            container.addChild(ccInfoLNameLabel);
            
            var ccInfoLNameInput:TextInput = new TextInput();
            ccInfoLNameInput.layoutData = textInputAlignData;
            container.addChild(ccInfoLNameInput);
            
            var ccInfoCCTypeLabel:Label = new Label();
            ccInfoCCTypeLabel.text = "CARD TYPE";
            ccInfoCCTypeLabel.layoutData = labelAlignData;
            container.addChild(ccInfoCCTypeLabel);
            
            var arrCards:Array=[];
            arrCards.push({label: "VISA"});
            arrCards.push({label: "MasterCard"});
            var ccInfoCCTypeDropDown:DropDown = new DropDown();        
            ccInfoCCTypeDropDown.prompt = "Select Card";
            ccInfoCCTypeDropDown.dataProvider = new DataProvider(arrCards);
            ccInfoCCTypeDropDown.measureContents = true;
            
            DropDownUtils.moveDropDownToTop(ccInfoCCTypeDropDown);
            ccInfoCCTypeDropDown.layoutData = textInputAlignData;
            container.addChild(ccInfoCCTypeDropDown);
            
            var ccInfoCardNumberLabel:Label = new Label();
            ccInfoCardNumberLabel.text = "CARD NUMBER";
            ccInfoCardNumberLabel.layoutData = labelAlignData;
            container.addChild(ccInfoCardNumberLabel);
            
            var ccInfoCardNumberInput:TextInput = new TextInput();
            ccInfoCardNumberInput.layoutData = textInputAlignData;
            container.addChild(ccInfoCardNumberInput);
            
            var ccInfoCCExp:Label = new Label();
            ccInfoCCExp.text = "EXPIRATION";
            ccInfoCCExp.layoutData = labelAlignData;
            container.addChild(ccInfoCCExp);
            
            {
                var expComp:Container = new Container();
                var expGrid:GridLayout = new GridLayout();
                expComp.layout = expGrid;
                expGrid.numColumns = 0;
                expGrid.spacing = 5;
                
                var expSubData:GridData = new GridData();
                //expSubData.preferredWidth = 150;                
                
                {
                    var arrMonths:Array=[];
                    arrMonths.push({label: "1"});
                    arrMonths.push({label: "2"});
                    var ccInfoCCMonthDropDown:DropDown = new DropDown();
                    ccInfoCCMonthDropDown.prompt = "Month";
                    ccInfoCCMonthDropDown.dataProvider = new DataProvider(arrMonths);
                    ccInfoCCMonthDropDown.measureContents = true;
                    
                    DropDownUtils.moveDropDownToTop(ccInfoCCMonthDropDown);
                    ccInfoCCMonthDropDown.layoutData = expSubData;
                    expComp.addChild(ccInfoCCMonthDropDown);
                }
                
                {
                    var arrYears:Array=[];
                    arrYears.push({label: "1999"});
                    arrYears.push({label: "2000"});
                    var ccInfoCCYearDropDown:DropDown = new DropDown();
                    ccInfoCCYearDropDown.prompt = "Year";
                    ccInfoCCYearDropDown.dataProvider = new DataProvider(arrYears);
                    ccInfoCCYearDropDown.measureContents = true;
                    
                    DropDownUtils.moveDropDownToTop(ccInfoCCYearDropDown);
                    ccInfoCCYearDropDown.layoutData = expSubData;
                    expComp.addChild(ccInfoCCYearDropDown);
                }
                
                container.addChild(expComp);
            }
            
            var ccInfoSecPinLabel:Label = new Label();
            ccInfoSecPinLabel.text = "SECURITY PIN";
            ccInfoSecPinLabel.layoutData = labelAlignData;
            container.addChild(ccInfoSecPinLabel);
            
            var ccInfoSecPinInput:TextInput = new TextInput();
            ccInfoSecPinInput.layoutData = secPinData;
            container.addChild(ccInfoSecPinInput);
            
            ccSpacer = new Label();
            ccSpacer.layoutData = spacerData;
            container.addChild(ccSpacer);            
            
            var ccAddrLabel:Label = new Label();
            ccAddrLabel.text = "Credit Card Billing Address";
            ccAddrLabel.layoutData = titleData;
            container.addChild(ccAddrLabel);
            
            var ccAddrStreetLabel:Label = new Label();
            ccAddrStreetLabel.text = "STREET ADDRESS";
            ccAddrStreetLabel.layoutData = labelAlignData;
            container.addChild(ccAddrStreetLabel);
            
            var ccAddrStreetInput:TextInput = new TextInput();
            ccAddrStreetInput.layoutData = textInputAlignData;
            container.addChild(ccAddrStreetInput);
            
            var ccAddrCityLabel:Label = new Label();
            ccAddrCityLabel.text = "CITY";
            ccAddrCityLabel.layoutData = labelAlignData;
            container.addChild(ccAddrCityLabel);
            
            var ccAddrCityInput:TextInput = new TextInput();
            ccAddrCityInput.layoutData = textInputAlignData;
            container.addChild(ccAddrCityInput);
            
            var ccAddrCountryLabel:Label = new Label();
            ccAddrCountryLabel.text = "COUNTRY";
            ccAddrCityLabel.layoutData = labelAlignData;
            container.addChild(ccAddrCountryLabel);
            
            var arrCountries:Array=[];
            arrCountries.push({label: "Canada"});
            arrCountries.push({label: "Madagascar"});
            var ccAddrCountriesDropDown:DropDown = new DropDown();
            ccAddrCountriesDropDown.prompt = "Canada";
            ccAddrCountriesDropDown.dataProvider = new DataProvider(arrCountries);
            
            DropDownUtils.moveDropDownToTop(ccAddrCountriesDropDown);
            ccAddrCountriesDropDown.layoutData = textInputAlignData;
            container.addChild(ccAddrCountriesDropDown);
            
            var ccAddrStreet2Label:Label = new Label();
            ccAddrStreet2Label.text = "POSTAL/ZIP CODE";
            ccAddrStreet2Label.layoutData = labelAlignData;
            container.addChild(ccAddrStreet2Label);
            
            var ccAddrStreet2Input:TextInput = new TextInput();
            ccAddrStreet2Input.layoutData = textInputAlignData;
            container.addChild(ccAddrStreet2Input);
            
            this.addChild(container);
            
            
        }
        
        private function onResize(event:Event):void
        {
            
            //portrait
            if ( stage.stageHeight > stage.stageWidth ) {    
                
                trace("portrait mode");
                container.width = stage.stageWidth;
                container.height = stage.stageHeight;
                
                              
                //landscape   
            }else{
                trace("landscape mode");                
                container.width = stage.stageWidth;
                container.height = stage.stageHeight;
                                
            }
            
        }
        
    }
}