qnx.fuse.ui.layouts.stackLayout.StackLayout

StackLayout

Properties | Methods | Examples


Packageqnx.fuse.ui.layouts.stackLayout
Classpublic final class StackLayout
InheritanceStackLayout Inheritance LayoutBase Inheritance flash.events.EventDispatcher

The StackLayout class organizes controls in an overlapping stack, where the stack is defined by the z-order of the control.

Class information:
BlackBerry 10 Version:   10.0.0

View the examples

See also

GridLayout
RowLayout



Public Properties

 PropertyDefined By
  debugId : String
Unused by the layout.
StackLayout
  horizontalPadding : Number
[write-only] Sets the horizontal padding (in pixels).
StackLayout
  padding : Number
[write-only] Sets the horizontal and vertical padding (in pixels).
StackLayout
  paddingBottom : Number = 0
Specifies the amount of empty space at the bottom of the layout (in pixels).
StackLayout
  paddingLeft : Number = 0
Specifies the amount of empty space on the leftmost edge of the layout (in pixels).
StackLayout
  paddingRight : Number = 0
Specifies the amount of empty space on the rightmost edge of the layout (in pixels).
StackLayout
  paddingTop : Number = 0
Specifies the amount of empty space at the top edge of the layout (in pixels).
StackLayout
 Inheritedtarget : IContainer
Gets of sets the IContainer instance, to which this layout instance is associated.
LayoutBase
  verticalPadding : Number
[write-only] Sets the vertical padding (in pixels).
StackLayout

Public Methods

 MethodDefined By
  
Creates a StackLayout instance.
StackLayout
  
Creates a clone of this StackLayout instance.
StackLayout
  
[override] Returns a bitwise combination of SizeOptions GROWTH | SHRINK constants, indicating whether this control wants to grow or shrink in the given dimension.
StackLayout
 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.
StackLayout
  
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
[override] Requests that a layout operation be performed immediately.
StackLayout

Property Detail

debugId


public var debugId:String

Unused by the layout. Used to easily identify StackLayout instances in the debugger.

horizontalPadding


horizontalPadding:Number  [write-only]

Sets the horizontal padding (in pixels).


Implementation

public function set horizontalPadding(value:Number):void

padding


padding:Number  [write-only]

Sets the horizontal and vertical padding (in pixels).


Implementation

public function set padding(value:Number):void

paddingBottom


public var paddingBottom:Number = 0

Specifies the amount of empty space at the bottom of the layout (in pixels).

The default value is 0.

paddingLeft


public var paddingLeft:Number = 0

Specifies the amount of empty space on the leftmost edge of the layout (in pixels).

The default value is 0.

paddingRight


public var paddingRight:Number = 0

Specifies the amount of empty space on the rightmost edge of the layout (in pixels).

The default value is 0.

paddingTop


public var paddingTop:Number = 0

Specifies the amount of empty space at the top edge of the layout (in pixels).

The default value is 0.

verticalPadding


verticalPadding:Number  [write-only]

Sets the vertical padding (in pixels).


Implementation

public function set verticalPadding(value:Number):void

Constructor Detail

StackLayout()


public function StackLayout()

Creates a StackLayout instance.

Method Detail

clone()


public function clone():StackLayout

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

Returns

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

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.

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 a Container and a Stacklayout instance to create a simple book layout.
package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    
    import qnx.fuse.ui.core.Container;
    import qnx.fuse.ui.events.ListEvent;
    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.rowLayout.RowData;
    import qnx.fuse.ui.layouts.rowLayout.RowLayout;
    import qnx.fuse.ui.layouts.stackLayout.StackData;
    import qnx.fuse.ui.layouts.stackLayout.StackLayout;
    import qnx.fuse.ui.listClasses.List;
    import qnx.fuse.ui.listClasses.ListSelectionMode;
    import qnx.fuse.ui.text.TextArea;
    import qnx.fuse.ui.text.TextFormat;
    import qnx.fuse.ui.skins.listClasses.CellRendererSkinBlack;
    import qnx.ui.data.DataProvider;
    
    public class StackSample extends Sprite
    {
        
        private var topContainer:Container;
        private var mainContainer:Container;
        private var myRow:RowLayout;
        private var myRowD:RowData;
        
        public function StackSample()
        {
            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 myGridData:GridData = new GridData();
            myGridData.preferredWidth = 150;
            myGridData.vAlign = Align.FILL;    
            
            var myStack:StackLayout = new StackLayout();
            myStack.padding = 25;
            
            
            var myTitleStackData:StackData = new StackData();
            myTitleStackData.hAlign = Align.CENTER;
            myTitleStackData.vAlign = Align.CENTER;
            
            
            var myStackData:StackData = new StackData();
            myStackData.hAlign = Align.FILL;
            myStackData.vAlign = Align.BEGIN;
            
            
            var format : TextFormat = new TextFormat();
            format.font = "Arial";
            format.size = 48;
            
            var arrChaps:Array=[];
            arrChaps.push({label: "Title"});
            arrChaps.push({label: "Preface"});
            arrChaps.push({label: "Chapter 1"});
            arrChaps.push({label: "Chapter 2"});
            arrChaps.push({label: "Chapter 3"});
            arrChaps.push({label: "Chapter 4"});
            
            var chapDP:DataProvider=new DataProvider(arrChaps);    
            
            var myList:List = new List();
            myList.layoutData = myGridData;
            myList.selectionMode = ListSelectionMode.SINGLE;
            myList.dataProvider = chapDP;
            myList.selectedIndex = 0;
            myList.addEventListener(ListEvent.ITEM_CLICKED, onListClick);
            topContainer.addChild(myList);
            
            mainContainer = new Container();
            
            var myTitle:TextArea = new TextArea();
            myTitle.text = "A simple StackLayout example";
            myTitle.layoutData = myTitleStackData;
            myTitle.alpha = 1;
            myTitle.enabled = false;
            myTitle.format = format;
            mainContainer.addChild(myTitle);
            
            var myText:TextArea = new TextArea();
            myText.text = "Mauris ut neque vitae ipsum ullamcorper semper. Nullam" +
                " ornare posuere lobortis. Sed eget risus est, eu sagittis nibh. Nunc" +
                " libero arcu, dictum id laoreet non, consequat vitae augue. Sed et torto" +
                "r id neque interdum elementum non at quam. Vestibulum ac magna pharetra" +
                " nibh faucibus imperdiet quis eget lorem. Duis sed mauris a quam pellentesque" +
                " lobortis in ac metus. Vestibulum ante ipsum primis in faucibus orci luctus" +
                " et ultrices posuere cubilia Curae; Nam id imperdiet ante. Praesent lacus quam," +
                " bibendum ac pulvinar a, fringilla quis enim. Aliquam ante ligula, sollicitudin" +
                " vitae egestas sed, cursus in nibh. Integer lobortis feugiat placerat. Suspendisse" +
                " ut arcu aliquam est hendrerit lacinia. Nulla sodales, diam non auctor mollis, nibh" +
                " erat aliquam diam, nec tristique orci metus eget elit. Suspendisse et neque neque," +
                " a elementum tellus. ";
            myText.layoutData = myStackData;
            myText.alpha = 0;
            myText.enabled = false;            
            
            var myText2:TextArea = new TextArea();
            myText2.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim " +
                "sapien non eros lacinia vestibulum. Quisque cursus dapibus mollis. Proin mollis feugiat metus," +
                " eget rutrum augue euismod vel. Vivamus at blandit justo. Lorem ipsum dolor sit amet, consectetur " +
                "adipiscing elit. Nullam dictum justo ut dui iaculis ullamcorper. Curabitur ac arcu vel elit dictum " +
                "auctor eget non justo. Nam id diam dictum elit rhoncus condimentum ut et risus. Fusce felis nibh," +
                " ultrices id sagittis sed, aliquam in nisl.";
            myText2.layoutData = myStackData;
            myText2.alpha = 0;
            myText2.enabled = false;
            
            var myText3:TextArea = new TextArea();
            myText3.text = "Donec tempus viverra nisi at molestie. Sed tincidunt blandit risus, posuere elementum" +
                " quam fermentum eget. Morbi vitae libero at erat fermentum tempus. Duis scelerisque auctor neque, id" +
                " lacinia leo consequat sed. Nullam accumsan aliquam lacus sit amet elementum. Etiam consequat, mauris" +
                " non congue fermentum, arcu elit consectetur nunc, in vulputate risus ante non libero. Aenean id sapien" +
                " risus. Curabitur elit arcu, iaculis sit amet semper et, tincidunt vel metus. Vivamus tortor odio, " +
                "facilisis vel pharetra et, convallis dictum est. Praesent pretium mattis libero et placerat. Aenean" +
                " lobortis hendrerit odio, ut hendrerit justo condimentum a. Nam ornare, elit ac molestie accumsan," +
                " nunc nisl pulvinar risus, ut bibendum odio nisl vitae sem. Vestibulum ut justo vitae mauris ultrices" +
                " vulputate. Quisque viverra, ligula vel placerat sagittis, dolor nisi sodales tellus, sit amet mattis" +
                " justo metus eget nibh. ";
            myText3.layoutData = myStackData;
            myText3.alpha = 0;
            myText3.enabled = false;
            
            var myText4:TextArea = new TextArea();
            myText4.text = "Morbi vel odio sem, id iaculis eros. In hac habitasse platea dictumst. In egestas, " +
                "arcu et venenatis rutrum, lorem magna dignissim justo, in accumsan augue turpis ac purus. Curabitur" +
                " nulla purus, mollis in egestas vel, tempus nec turpis. Nulla imperdiet mi at nisi sollicitudin nec " +
                "sodales ligula ultricies. Curabitur non lacus urna. Curabitur aliquet turpis nec eros ultrices mattis." +
                " Aenean in elit a est tincidunt rhoncus. Fusce faucibus, augue nec blandit tincidunt, libero velit " +
                "fermentum eros, ut luctus metus lorem id ante. ";
            myText4.layoutData = myStackData;
            myText4.alpha = 0;
            myText4.enabled = false;
            
            var myText5:TextArea = new TextArea();
            myText5.text = "Sed rhoncus velit quis urna semper quis pellentesque odio viverra. Vestibulum vel " +
                "ligula et orci gravida mollis. Quisque sit amet orci sed urna imperdiet feugiat. Vivamus commodo " +
                "imperdiet massa, et scelerisque mi elementum ac. Vestibulum vitae felis at massa accumsan blandit. Donec " +
                "eget venenatis nibh. Nulla nisi lorem, mattis ac iaculis vitae, consequat vel massa. Cras magna neque, congue" +
                " eu tincidunt sed, consectetur at sapien. ";
            myText5.layoutData = myStackData;
            myText5.alpha = 0;
            myText5.enabled = false;
            
            
            mainContainer.addChild(myText);
            mainContainer.addChild(myText2);
            mainContainer.addChild(myText3);
            mainContainer.addChild(myText4);
            mainContainer.addChild(myText5);
            mainContainer.layout = myStack;
            
            topContainer.addChild(mainContainer);
            
            
            function onListClick(event:ListEvent):void {
                
                trace("Item clicked: " + event.data.label);
                
                zeroAll();
                switch (event.index) {
                    
                    case 0:
                        trace("Index clicked: " + event.index);
                        myTitle.alpha = 1;                            
                        break;
                    
                    case 1:
                        trace("Index clicked: " + event.index);
                        myText.alpha = 1;                            
                        break;
                    
                    case 2:
                        trace("Index clicked: " + event.index);
                        myText2.alpha = 1;                            
                        break;
                    
                    case 3:
                        trace("Index clicked: " + event.index);
                        myText3.alpha = 1;                            
                        break;
                    
                    case 4:
                        trace("Index clicked: " + event.index);
                        myText4.alpha = 1;                            
                        break;
                    
                    case 5:
                        trace("Index clicked: " + event.index);
                        myText5.alpha = 1;                            
                        break;
                }
            }
            
            function zeroAll():void {
                
                trace("zeroing all textfield alphas");
                for (var i:int=0; i<mainContainer.numChildren; i++){
                    mainContainer.getChildAt(i).alpha = 0;
                }    
                
            }        
        }
        
        
        
        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);                
            }
            
            
        }
        
    }
}
     




comments powered by Disqus