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
Contributor
Posts: 14
Registered: ‎03-03-2009
My Device: Not Specified
Accepted Solution

Button Focus area overlaying buttons below it

I'm sure this is something I'm doing accidentally but when I try and display a collection of vertical buttons similar to the HelloWorld app in the getting started guide anything but the first button has a really large focus area that will overlay the buttons below it, making selection a challenge.  I verified this by tabbing through and observing the yellow rectangle.  My code is below but its just a variation of the sample code:

 

 

 

public function AIRHelloWorld()
		{
			var helloButton:LabelButton = new LabelButton();
			helloButton.label = "Hello World!";
			helloButton.addEventListener(MouseEvent.CLICK, showAlertDialog);
			helloButton.x = (stage.stageWidth - helloButton.width);
			helloButton.y = (stage.stageHeight - helloButton.height)/2;
			
			var myFormat:TextFormat = new TextFormat();
			myFormat.color = 0xAA0000;
			myFormat.size = 24;
			myFormat.italic = true;
			myFormat.align = "right";
			var text:TextField = new TextField();
			text.text = "Close Me";
			text.setTextFormat(myFormat);
			var closeButton:Button = new Button();
			closeButton.addChild(text);
			closeButton.addEventListener(MouseEvent.CLICK, closeWindow);
			closeButton.x = (stage.stageWidth - closeButton.width);
			closeButton.y = (helloButton.y - helloButton.height);

			addChild(helloButton);
			addChild(closeButton);
			stage.nativeWindow.visible = true;
			stage.nativeWindow.title = "Some App";
						
		}

 

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Button Focus area overlaying buttons below it

[ Edited ]

hey heavyg,

 

i dont know if this is related but did you set the meta data for the application? something like this:

 

 

 

	
	// The following metadata specifies the size and properties of the canvas that
	// this application should occupy on the BlackBerry PlayBook screen.
	[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class AIRHelloWorld extends Sprite
	{
		public function AIRHelloWorld()
		{

 let me know. 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
Contributor
Posts: 14
Registered: ‎03-03-2009
My Device: Not Specified

Re: Button Focus area overlaying buttons below it

Hi,

Yes that meta data is set, I just snipped the section of main code that initializes everything as in the sample.

As a follow up I also re-ran the orginal sample, same issue.  So either the sample is wrong too or there is an issue with the API.  I'm getting around it by just spacing my buttons out but thats less than ideal.

Thanks!

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Button Focus area overlaying buttons below it

[ Edited ]

hey heavyg,

 

i found the issue. in the code instead of using the LabelButton class you were using the ActionScript default Button class. RIM created the API's and even redid some of the basic components such as the Button class to optimize functionality with the Tablet OS. So were using the non-touch optimized class of the of the button. So i recommend if there is a QNX alternative class for a component (such as Button) use the QNX version because it will have already been optimized for use in the tablet. Whereas using default components will give bugs like these.

 

here is your original code but with two things edited. Mainly i replaced the Button object with the LabelButton object and the close text is now a part of the LabelButton object instead of a child. The changes are in bold:

 

 

public function AIRHelloWorld()
{
var helloButton:LabelButton = new LabelButton();
helloButton.label = "Hello World!";
helloButton.addEventListener(MouseEvent.CLICK, showAlertDialog);
helloButton.x = (stage.stageWidth - helloButton.width);
helloButton.y = (stage.stageHeight - helloButton.height)/2;

var myFormat:TextFormat = new TextFormat();
myFormat.color = 0xAA0000;
myFormat.size = 24;
myFormat.italic = true;
myFormat.align = "right";
var text:TextField = new TextField();
text.text = "Close Me";
text.setTextFormat(myFormat);
var closeButton:LabelButton = new LabelButton();
closeButton.label = "Close Me";
closeButton.addEventListener(MouseEvent.CLICK, closeWindow);
closeButton.x = (stage.stageWidth - closeButton.width);
closeButton.y = (helloButton.y - helloButton.height);

addChild(helloButton);
addChild(closeButton);
stage.nativeWindow.visible = true;
stage.nativeWindow.title = "Some App";

}

 

hope that clears things up. 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
Highlighted
Contributor
Posts: 14
Registered: ‎03-03-2009
My Device: Not Specified

Re: Button Focus area overlaying buttons below it

That was it!

Thanks!