Adobe AIR Development

[shethab]

I would like to do two things:

1) set the background of a container as a solid color

2) set the background of a container as a png image

How is this done? I am going crazy over this. In android and and regular bb development its is so simple.

Please help.

[JRab · Accepted solution]

hey shethab,

dont sweat it we've all be there! here's how you set the background color of your application. Where there are two ways:

First set the meta data to a solid background color like this:

package
{
	import flash.display.Sprite;
	
	[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
	public class MyApplication extends Sprite
	
		public function MyApplication()
		{
			(...)
			
		}
	}
}

The background is in the same format as HTML coloring. The second way is by creating a shape object as large as the screen and adding it as the first child to your program like so:

package
{
	import flash.display.Shape;
	import flash.display.Sprite;

	[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
	public class MyApplication extends Sprite
	{	
		public function MyApplication()
		{
			
			var appBackgroundColor:Shape = new Shape();
			
			appBackgroundColor.graphics.beginFill(0xFF0000);
			appBackgroundColor.graphics.drawRect(0,0,1024,600);
			appBackgroundColor.graphics.endFill();
			
			addChild(appBackgroundColor);


			(...)
		}
	}
}

To add an image is like the second step only using the Image class like this:

package
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.filesystem.File;
	
	import qnx.ui.display.Image;

	
	[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
	public class MyApplication extends Sprite
	{	
		public function MyApplication()
		{
			
			var appBackgroundImage:Image = new Image();
			
			appBackgroundImage.setImage(File.applicationDirectory.resolvePath('path/to/image.png').url);
			appBackgroundImage.setSize(1024,600);
			appBackgroundImage.setPosition(0,0);
			
			addChild(appBackgroundImage);

			(...)
			
		}
	}
}

hope that helps! good luck!

[JRab]

hey,

sorry i missed the part about being specific to containers. if you need it to apply to containers, follow the latter two steps. that code goes into your container as a child object. i beleive you also have to set the contained property of the object to Containment.BACKGROUND so it goes behind all other objects. containers are a tough area to swim through so if you need further assitance just ask. good luck!

[shethab]

That did the trick! Major thanks!

[durvasa]

i have a question about containers and setting its background color.

Using the example in the container class API and the code which JRab was nice enough to share, the following code creates 2 containers - the main container, and a subcontainer at the top of the frame. 

The subcontainer takes up 5% of the main container.  Inside the subcontainer, the program draws a black rectangle.  I want this rectangle to take up the entire top subcontainer (the rectangle should be the same size as the subcontainer).  Without knowing the exact vector positions of the subcontainer, is there a way to go about setting the width and the height of the rectangle?  Or do we have to give exact numbers? 

thanks for your help in advance!!

// create main container //
myMain = new Container();
myMain.margins = Vector.<Number>([10,10,10,10]);
myMain.flow = ContainerFlow.HORIZONTAL;
myMain.debugColor = 0xFFCC00;
addChild(myMain);
						
// create subcontainer as the top frame //
mySubTop = new Container();
mySubTop.margins = Vector.<Number>([5,5,5,5]);            
mySubTop.debugColor = 0x33FF33;
mySubTop.size = 5;
mySubTop.sizeUnit = SizeUnit.PERCENT;
mySubTop.flow = ContainerFlow.HORIZONTAL;
mySubTop.align = ContainerAlign.FAR;
mySubTop.containment = Containment.DOCK_TOP; 
						
// create and give color to the top container// 
var appBackgroundColor:Shape = new Shape();
appBackgroundColor.graphics.beginFill(0x000000);
appBackgroundColor.graphics.drawRect(10,10,?????,????);
appBackgroundColor.graphics.endFill();
						
mySubTop.addChild(appBackgroundColor);

[JRab]

hey durvasa,

welcome to the forums! im not near my dev environment but here's an idea you can try and see if it works. try to use the height and width of the container its in. so change this line:

appBackgroundColor.graphics.drawRect(10,10,?????,????);

to this:

appBackgroundColor.graphics.drawRect(10,10,mySubTop.width,mySubTop.height);

hope that helps. good luck!

[RottenOgre]

What JRab said.

You would also have to set X and Y to 0, if I'm not mistaken, because that's 10 and 10 relative to the parent, which from the sounds of it, isn't what you want.

[durvasa]

JRab,

thanks again for your help

I tried your suggestion.  But after making the changes, I cant see any rectangle at all when I compiled and ran it.  Here's the exact code, just in case you want to see it:

// create main container //
myMain = new Container();
myMain.margins = Vector.<Number>([10,10,10,10]);
myMain.flow = ContainerFlow.HORIZONTAL;
myMain.debugColor = 0xFFCC00;
addChild(myMain);
						
// create subcontainer as the top frame //
mySubTop = new Container();
mySubTop.margins = Vector.<Number>([5,5,5,5]);            
mySubTop.debugColor = 0x33FF33;
mySubTop.size = 5;
mySubTop.sizeUnit = SizeUnit.PERCENT;
mySubTop.flow = ContainerFlow.HORIZONTAL;
mySubTop.align = ContainerAlign.FAR;
mySubTop.containment = Containment.DOCK_TOP; 
						
// create and give color to the top container// 
var appBackgroundColor:Shape = new Shape();
appBackgroundColor.graphics.beginFill(0x000000);
appBackgroundColor.graphics.drawRect(0,0,mySubTop.width,mySubTop.height);
appBackgroundColor.graphics.endFill();
						
mySubTop.addChild(appBackgroundColor);

[JRab]

hey druvasa,

remember to add the sub container to your main container like so:

myMain.addChild(mySubTop);

let me know how it turns out. good luck!

[jzou]

appBackgroundImage.setImage(File.applicationDirectory.resolvePath('path/to/image.png').url);

HI

Where should I put my picture for this to work?

Thanks