Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
Posts: 1,157
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Simple container layout example; must be missing something simple

[ Edited ]

 

I'm just getting around to using layouts and containers to try to make cross device versions of apps, and am stuck on a simple row layout example.  I'm most likely missing something obvious, and have just stared at it too long to be able to see it.  OTOH I don't know how widely the components are being used, and perhaps something basic is broken in the SDK.  I'm on the 3.2 Gold SDK.

 

In the below code, the action bar gets rendered at the top of the stage, vs. my expectation from setting the row data vAlign property to Align.END that the action bar should be rendered at the bottom of the stage.  I'm running this on the Z30 simulator and my trace statements for this code report as follows:

 

[trace] actionBar.y is: 0, actionBar.height is:116,
[trace] and stage.stageHeight is: 1280
[trace] stage dimensions are: 720 by 1280
[trace] display width is: 720
[trace] display height is: 1280
[trace] actionBarRowData.vAlign property is end
[trace] topContainer.width is: 720 and topContainer.height is: 1280

 

 

 

 

Code:

package com.example
{

    import qnx.fuse.ui.actionbar.ActionBar;
    import qnx.fuse.ui.core.Action;
	import qnx.fuse.ui.core.Container;
    import qnx.fuse.ui.events.ActionEvent;
	import qnx.display.Display;
	import qnx.fuse.ui.layouts.Align;
	import qnx.fuse.ui.layouts.rowLayout.RowData;
	import qnx.fuse.ui.layouts.rowLayout.RowLayout;
	import qnx.fuse.ui.layouts.rowLayout.RowLayoutType;
	
    import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
    import flash.events.Event;	

	[SWF(frameRate="60", backgroundColor="#22AA22")]	
    public class ActionBarTest extends Sprite
    {

		private var topContainer:Container;
		private var actionBar:ActionBar;
		private var topContainerLayout:RowLayout;
		private var actionBarRowData:RowData;
		
        public function ActionBarTest() {
			super();
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			addEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
        }
		
        private function handleAddedToStage(e:Event):void {
            initializeUI();
            removeEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
            stage.addEventListener( Event.RESIZE, onResize );
            onResize(new Event(Event.RESIZE));
        }		
		
        private function initializeUI() : void {

			topContainer = new Container();
			topContainer.setActualSize(stage.stageWidth, stage.stageHeight);
			this.addChild(topContainer);
			
			topContainerLayout = new RowLayout();
			topContainerLayout.type = RowLayoutType.VERTICAL;
			topContainer.layout = topContainerLayout;
			
			actionBar = new ActionBar();
			actionBar.width = stage.stageWidth;
			actionBarRowData = new RowData();
			actionBarRowData.vAlign = Align.END;
			actionBar.layoutData = actionBarRowData;
		
            actionBar.showTabsFirstOnBar( false );
            actionBar.addAction(new Action( "Share", "app:///assets/app_graphics/ic_share.png" ));
			
			//actionBar.y = stage.stageHeight - actionBar.height;
			
			topContainer.addChild(actionBar);
			
			trace("actionBar.y is: " + actionBar.y + ", actionBar.height is:" + actionBar.height + ",");
			trace("and stage.stageHeight is: " + stage.stageHeight);
			trace("stage dimensions are: " + stage.stageWidth + " by " + stage.stageHeight);
			trace("display width is: " + Display.display.getDisplayWidth(0));
			trace("display height is: " + Display.display.getDisplayHeight(0));
			trace("actionBarRowData.vAlign property is " + actionBarRowData.vAlign);
			trace("topContainer.width is: " + topContainer.width + " and topContainer.height is: " + topContainer.height);
        }
		
        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);                
            }
			trace("In onResize(), topContainer.width is: " + topContainer.width + " and topContainer.height is: " + topContainer.height);

        }		

    }
}

 

 

 

 

Developer
Posts: 1,157
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Simple container layout example; must be missing something simple

Screenshot:

 

BadLayoutScreenshot.png

Developer
Posts: 1,157
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Simple container layout example; must be missing something simple

[ Edited ]

BTW if you copy my code into a test project to run it, you don't necessarily need to have the share icon; you can replace this line:

 

actionBar.addAction(new Action( "Share", "app:///assets/app_graphics/ic_share.png" ));

 

with this:

 

actionBar2.addAction(new Action( "Share"));

 

and you'll just get an action bar with the word "Share" on it and no icon.

 

For folks who haven't grabbed them yet, you can get the BB10 icons here:

 

https://developer.blackberry.com/design/bb10/

 

(see the download button at the bottom right of the page, for "BlackBerry 10 Icons")

Developer
Posts: 1,157
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Simple container layout example; must be missing something simple

Plenty of view on this thread but no replies - anyone who's run my code example and gotten the same or different result, please chime in.  It's probably something simple that's gonna make me feel stupid but I'm ok with that - won't be the first or last time.

New Developer
Posts: 129
Registered: ‎11-21-2012
My Device: Z10
My Carrier: -

Re: Simple container layout example; must be missing something simple

I don't know much of native UI but I ran your code. Got the same result as you on a Z10, even when declaring "Align.FILL" or "Align.BEGIN". Maybe it has to do something with its parent?

Highlighted
Developer
Posts: 1,157
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Simple container layout example; must be missing something simple

Bump.

 

Julian?  Dustin?