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
Highlighted
Contributor
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook
My Carrier: O2 CZ
Accepted Solution

Best practise for Landscape/Portrait multi page application

Hi,
I am looking for some information about right way to develop auto orientating application in pure actionscript with new qnx.fuse components, but there is not one good example in real code. Every time I tried to make fluid resizable layout a get only deformated components in portrait or landscape mode.

 

I have simple application with main point and 3 views:

 

public class Main extends NavigatorSprite 
{ 
	public function Main() 
	{ 
		addEventListener(Event.ADDED_TO_STAGE, init); 
		
		stage.nativeWindow.visible = true; 
		stage.scaleMode = StageScaleMode.NO_SCALE; 
		stage.align = StageAlign.TOP_LEFT; 
		stage.nativeWindow.activate(); 
	} 
	private function init(e:Event):void 
	{ 
		removeEventListener(Event.ADDED_TO_STAGE, init);
		navigator.pushView(View1); 
	} 
}

public class View1 extends ViewSprite
{
	
	private var container:Container;
	private var button_two:LabelButton;
	private var button_three:LabelButton;
	
	public function View1
	{
		addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event):void 
	{ 
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		container = new Container();
		var layout:RowLayout = new RowLayout();
		container.layout = layout;
		
		button_two = new LabelButton();
		button_two.label = "to page 2";
		button_two.width = 150;
		button_two.height = 45;
		button_two.addEventListener(MouseEvent.CLICK, handleTwoClicked);
		container.addChild(button_two);
		
		button_three = new LabelButton();
		button_three.label = "to page 3";
		button_three.width = 150;
		button_three.height = 45;
		button_three.addEventListener(MouseEvent.CLICK, handleThreeClicked);
		container.addChild(button_three);
		
		addChild(container);
	} 
	
	private function handleTwoClicked(e:Event):void
	{
		navigator.pushView(View2);
	}
	
	private function handleThreeClicked(e:Event):void
	{
		navigator.pushView(View3);
	}
}

public class View2 extends ViewSprite
{
	
	private var container:Container;
	private var back:BackButton;
	
	public function View2
	{
		addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event):void 
	{ 
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		container = new Container();
		var layout:RowLayout = new RowLayout();
		container.layout = layout;
		
		back = new BackButton();
		back.label = "Back";
		back.width = 100;
		back.height = 45;
		back.addEventListener(MouseEvent.CLICK, goBack);
		container.addChild(back);
		
		addChild(container);
	} 
	
	private function goBack(e:Event):void
	{
		navigator.popView();
	}
}

public class View3 extends ViewSprite
{
	
	private var container:Container;
	private var back:BackButton;
	
	public function View3
	{
		addEventListener(Event.ADDED_TO_STAGE, init);
	}
	
	private function init(e:Event):void 
	{ 
		removeEventListener(Event.ADDED_TO_STAGE, init);
		
		container = new Container();
		var layout:RowLayout = new RowLayout();
		container.layout = layout;
		
		back = new BackButton();
		back.label = "Back";
		back.width = 100;
		back.height = 45;
		back.addEventListener(MouseEvent.CLICK, goBack);
		container.addChild(back);
		
		addChild(container);
	} 
	
	private function goBack(e:Event):void
	{
		navigator.popView();
	}
}



Is there for example some good practise how to modify this code to have pages and components with the same sizes in portrait and landscape? On orientating buttons will have size always width 150 and height 45 and containers wil have stageWidth and stageHeight.

 

thanks if someone could help with this problem

Retired
Posts: 427
Registered: ‎02-22-2012
My Device: BlackBerry Z10, BlackBerry Dev Alpha C, BlackBerry PlayBook
My Carrier: Bell

Re: Best practise for Landscape/Portrait multi page application

Hi,

 

Try listening for a screen orientation shift with this code:

 

stage.addEventListener(Event.RESIZE, onResizeHandler, false, 0, true);

 You can than change the width/height of your components in the event based on the width/height of the stage. 

 

I will caution against specifying specific sizes if you want your code to work on BB10 devices. I recommend using %'s.

 

Regards,

Dustin

Follow me on Twitter: @dustinmalik
-----------------------------------------------------------------------------------------------------
Keep up to date on BlackBerry development: http://devblog.blackberry.com/
Contributor
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook
My Carrier: O2 CZ

Re: Best practise for Landscape/Portrait multi page application

is there in qnx.fuse.ui.core.Container somthing like SizeUnit.PERCENT in qnx.ui.core? Or how define width and height in percents depend on parent container?
Retired
Posts: 427
Registered: ‎02-22-2012
My Device: BlackBerry Z10, BlackBerry Dev Alpha C, BlackBerry PlayBook
My Carrier: Bell

Re: Best practise for Landscape/Portrait multi page application

Maybe try something like the following code:

 

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	import qnx.fuse.ui.core.Container;
	
	[SWF(width="1024", height="600", backgroundColor="#00FF00")]
	public class orientationSample extends Sprite
	{
		public var myContainer:Container = new Container();
		public var myBG:Sprite = new Sprite;
		
		public function orientationSample()
		{
			super();
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.addEventListener(Event.RESIZE, onResizeHandler, false, 0, true);

			myBG.graphics.beginFill(0x0000FF);
			myBG.graphics.drawRect(0,0,100,100);
			myBG.graphics.endFill();
			
			myContainer.background = myBG;
			myContainer.height = stage.stageHeight / 2;
			myContainer.width = stage.stageWidth;
			myContainer.y = stage.stageHeight/2-myContainer.height/2;
			
			stage.addChild(myContainer);

		}
		
		public function onResizeHandler(e:Event):void{
			myContainer.height = stage.stageHeight / 2;
			myContainer.width = stage.stageWidth;
			myContainer.y = stage.stageHeight/2-myContainer.height/2;
			
			if (stage.stageHeight > 600){
				//DO SOMETHING THAT IS SPECIFIC TO THIS SIZE
				//THIS WOULD BE SIMILAR TO HOW MEDIA QUERIES WORK IN CSS
			}
			else{
				//DO SOMETHING THAT IS SPECIFIC TO THIS SIZE
				//THIS WOULD BE SIMILAR TO HOW MEDIA QUERIES WORK IN CSS
			}
		}
	}
}

 Regards,
Dustin 

Follow me on Twitter: @dustinmalik
-----------------------------------------------------------------------------------------------------
Keep up to date on BlackBerry development: http://devblog.blackberry.com/