Adobe AIR Development

[polovi]

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

[dmalik · Accepted solution]

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

[polovi]

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?

[dmalik]

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