Adobe AIR Development

[tensioncore]

Hey everyone, so I'm working on my app, which is going to be an interface to my business project (more advanced URL shortening service; which you are all more than welcome to use and submit bugs for: http://tncr.ws)

Anyways, I would like to make this app feel like a native BB app, and have the bar across the top like seen in some of the sample apps, but am coding my app entirely in ActionScript, and not using XMXL at all, so I'm not entirely sure how to display the top bar.

Any help would be greatly appreciated!

[JRab]

hey tensioncore,

welcome to the forums! there are a few ways of going about it. you can start about by setting up sprites and set absolute values for their x and y coordinates. Although this way is pretty straight forward you may run into problems when the size of the screen changes or if the device's orientation changes. because of this RIM recommends us to use their Container class. doing so we can do more of a "dynamic" layout. some people like it and some people not so much because of its shortcomings in regards to its positioning. its still a work in progress. on the note of RIM's recommendation we were told to not include "Title Bars" in our applications. i agree and disagree with that recommendation but i feel its up to the developer to choose whats right and wrong and for them to make the final decision. if it fits dont get rid of it but if you can live without it find a better way.

that being said, here is a sample code of placing a "title bar" on your application using containers. not that the border colors are only there fo debugging purposes. the notation and code may be a little confusing at first but you get used to it:

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerAlign;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.core.Containment;
	import qnx.ui.core.SizeMode;
	import qnx.ui.core.SizeUnit;
	import qnx.ui.text.Label;
	
	[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
	public class ContainerTest extends Sprite
	{
		/*
		 * Declare your containers
		*/
		
		private var myMain:Container;
		private var myTopBar:Container;
		private var myBodyBar:Container;
		
		/*
		* Declare your other variables, in our case we are using
		* a label property and a formatting class
		*/
		
		private var myText:Label;
		private var myFormat:TextFormat;
		
		public function ContainerTest()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//Add our main container that will house all of our containers
			
			myMain = new Container();
			myMain.margins = Vector.<Number>([0,0,0,0]);
			myMain.flow = ContainerFlow.VERTICAL;
			myMain.debugColor = 0x000000;
			myMain.align = ContainerAlign.NEAR;
			myMain.padding = 0;
			
			addChild(myMain);
			
			// create subcontainer on the top screen
			
			myTopBar = new Container();
			myTopBar.margins = Vector.<Number>([0,0,0,0]);            
			myTopBar.size = 5;
			myTopBar.debugColor = 0xFF0000;
			myTopBar.sizeUnit = SizeUnit.PERCENT;
			myTopBar.flow = ContainerFlow.HORIZONTAL;
			myTopBar.align = ContainerAlign.MID;
			myTopBar.containment = Containment.DOCK_TOP;
			
			//add the title bar container to the main containers
			
			myMain.addChild(myTopBar);
			
			/*
			* Add your next container. this one takes up 95 percent of the space
			* and would hold most of your content
			*/
			
			myBodyBar = new Container();
			myBodyBar.margins = Vector.<Number>([10,10,10,10]);            
			myBodyBar.size = 95;
			myBodyBar.debugColor = 0xFFFF00;
			myBodyBar.sizeUnit = SizeUnit.PERCENT;
			myBodyBar.flow = ContainerFlow.HORIZONTAL;
			myBodyBar.align = ContainerAlign.NEAR;
			myBodyBar.containment = Containment.DOCK_TOP;
			
			//add the body container to your main container
			
			myMain.addChild(myBodyBar);
				
			/*
			* Begin creating and formatting the text that will show up in the title bar
			*/
	
			myFormat = new TextFormat();
			myFormat.size = 20;
			myFormat.color = 0x000000;
			
			myText = new Label();
			myText.text = "Title Bar Text";
			myText.format = myFormat;
			myText.autoSize = TextFieldAutoSize.CENTER;
			myText.containment = Containment.DOCK_BOTTOM;
			
			/*
			* Add the text to your top title bar
			*/
			
			myTopBar.addChild(myText);
			
			//Set to full screen
			myMain.setSize(stage.stageWidth, stage.stageHeight);

			
			
		}
	}
}

for a further look into containers, you can navigate to this page from the ASDocs:

http://www.blackberry.com/developers/docs/airapi/1.0.0/qnx/ui/core/Container.html

hope that helps. Good luck!

[tensioncore]

Thanks for the Great reply! +rep I definitely see the ideas in the code you exampled, I'm getting nothing when I build it, however its a great starting place to understand the containers concept of UI layout! I like it! I'll definitely be able to build from it. Thanks! I'll experiment with the ideas from that code and post my findings!

[tensioncore]

I've had some issues trying Containers, however I find containers to be a splitting image of Tables in HTML, if only they were as simple, and I'm not saying they are complicated, it's just they seem to be a lot more coding and work than it's worth. So I'm just going to stick to using ActionScript's drawing features, it seems to be working and maybe I'll get closer to what I'm looking for with fewer lines of code.

[JRab]

hey,

i absolutely agree that it it is a lot more code heavy to use containers than to use absolute value positioning. the trade off for a lighter code and ease of the whole process is though not having a "dynamic" positioning system. using absolute x's and y's is great to start out with but as u get more use to the whole language you will most likey sway over to a more dynamic approach because of the benefits. hopefully by then containers will be further along and lighter. good luck!

[tensioncore]

Alright, so next question... I understand how you can retrieve images using URLloader, but can the same be applied for images that are local?

for example:
var myImage:Loader = new Loader();
myImage.load(new URLRequest('src/myImage.png'));
addChild(myImage);

....src/myImage.pngbeing the image I've added to the project.

Now something else I'm curious about, is; is it crucial to add an event listener to load the image once the whole project has loaded? or is it fine just to addChild right away?

[JRab · Accepted solution]

hey tensioncore,

it would probably be a better and an easier idea to use the QNX Image class located in the qnx.ui.display.Image class. you can find the documentation for it here:

http://www.blackberry.com/developers/docs/airapi/1.0.0/qnx/ui/display/Image.html

here's an example:

import qnx.ui.display.Image;
import flash.filesystem.File;

(...)

var myImage:Image = new Image();
myImage.setImage('file://' + File.applicationDirectory.nativePath + '/images/filename.jpg');

addChild(myImage);

also note that the path to image is relative to your base directory under the src folder. so in my example the image would be located under the images folder in your src folder. hope that helps!

also a friendly reminder when asking a new question unrelated to the original topic you should post it as a new topic so others can search for your question and find the answer to it easily. dont wanna sound like a forum cop haha

in any case dont let me deter you from asking more questions thats what we're here for ! good luck!

Edit: Sorry i forgot to mention the addEventListener portion of your question. It's not crucial from my testing since it is loaded so fast. I usually do an addChild() right after and it loads up fine. But to be on the safe side in the cases of a longer processing time due to a larger load on the system for whatever reason you should perform an addEventListener. good luck again!

Edit #2: The setImage() method only accepts URL's and not just the path itself. Updated the code with the fix. sorry for any confusion.

[tensioncore]

Thanks for the help, and well I guess I was thinking it was in the same subject as my original question, but I guess you didn't know that, haha because I was only thinking it. Your replies are great and helpful.

[JRab]

hey tensioncore,

if staying on topic was your intention i apologize. you can ignore my attempt at forum policing - clearly im quite bad at it hah. and im glad you found it helpful! if you have any more questions dont be shy. Good luck with your apps!