If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

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
New Developer
shethab
Posts: 47
Registered: ‎10-22-2009
My Device: Not Specified
Accepted Solution

how to set background for container

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.

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: how to set background for container

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!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: how to set background for container

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!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
shethab
Posts: 47
Registered: ‎10-22-2009
My Device: Not Specified

Re: how to set background for container

That did the trick! Major thanks!

Please use plain text.
Contributor
durvasa
Posts: 14
Registered: ‎12-18-2010
My Device: Not Specified

Re: how to set background for container

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);

 

 

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: how to set background for container

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!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
Developer
RottenOgre
Posts: 274
Registered: ‎11-01-2010
My Device: PlayBook?
My Carrier: WiFi

Re: how to set background for container

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.

Please use plain text.
Contributor
durvasa
Posts: 14
Registered: ‎12-18-2010
My Device: Not Specified

Re: how to set background for container

JRab,

 

thanks again for your help :smileyhappy:

 

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);

 

 

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: how to set background for container

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!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
jzou
Posts: 60
Registered: ‎12-21-2008
My Device: Not Specified

Re: how to set background for container

 

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

 

 

HI

Where should I put my picture for this to work?

 

Thanks

Please use plain text.