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
Developer
dbigham
Posts: 466
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

RadioButton Redraw Problem

Hi,

 

I'm making use of the RadioButton, but when I put it inside of a UIComponent which is then inside of a ScrollPane, it seems to redraw incorrectly / unselect itself if you click elsewhere on the screen.

 

Sample code:

 

 

package 
{
import flash.display.Sprite;
import qnx.ui.buttons.RadioButton;
import qnx.ui.buttons.RadioButtonGroup;
import qnx.ui.listClasses.ScrollPane;
import qnx.ui.core.UIComponent;
[SWF(width="1024", height="600", backgroundColor="#FFFFFF", frameRate="30")]
public class Problem extends Sprite
{
public function Problem()
{
var scroller:smileyfrustrated:crollPane = new ScrollPane();
scroller.x = 0;
scroller.y = 0;
scroller.width = stage.stageWidth;
scroller.height = stage.stageHeight;
addChild(scroller);
var container:UIComponent = new UIComponent();
var groupName:smileyfrustrated:tring = String(RadioButtonGroup.getUniqueId());
var button:RadioButton = new RadioButton();
button.height = 50;
button.width = 50;
button.x = 0;
button.y = 0;
button.label = "A";
button.groupname = groupName;
container.addChild(button);
var button2:RadioButton = new RadioButton();
button2.height = 50;
button2.width = 50;
button2.x = 50;
button2.y = 0;
button2.label = "B";
button2.groupname = groupName;
container.addChild(button2);
container.height = button.height;
container.width = button.width * 2;
scroller.addScrollContent(container);
}
}
}
Steps to reproduce:
1. Load the application.
2. Click the "A" button.
3. Click somewhere in the whitespace of the application.
Notice that the RadioButton becomes unselected.
If you instead add the RadioButtons onto the application's main Sprite, this doesn't happen.
Thanks,
Daniel

 

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

Re: RadioButton Redraw Problem

[ Edited ]

hey,

 

i can confirm with the following test run that the bug exists. Ill keep you posted if i can find a fix:

 

 

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	import qnx.ui.buttons.RadioButton;
	import qnx.ui.buttons.RadioButtonGroup;
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerAlign;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.core.Containment;
	import qnx.ui.core.SizeUnit;
	import qnx.ui.core.Spacer;
	import qnx.ui.listClasses.ScrollPane;
	
	[SWF(width="1024",height="600",backgroundColor="#CCCCCC",frameRate="30")]
	public class RadioButtonTest extends Sprite
	{
		public function RadioButtonTest()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			var scroller:ScrollPane = new ScrollPane();
			scroller.width = 1024;
			scroller.height = 600;
			scroller.y = 0;
			
			var myContainer:Container = new Container();
			myContainer.margins = Vector.<Number>([0,0,0,0]);
			myContainer.flow =  ContainerFlow.HORIZONTAL;
			myContainer.debugColor = 0xFFFF00;
			myContainer.align = ContainerAlign.NEAR;
			myContainer.padding = 10;
			
			var radioGroup:RadioButtonGroup = (RadioButtonGroup.getGroup("myGroup"+RadioButtonGroup.getUniqueId()));
			
			var rb1:RadioButton = new RadioButton();
			rb1.label = "Meal option 1";
			rb1.groupname = radioGroup.name;
			rb1.size = 200;
			rb1.containment = Containment.CONTAINED;
			rb1.sizeUnit = SizeUnit.PIXELS;
			
			var rb2:RadioButton = new RadioButton();
			rb2.label = "Meal option 2";
			rb2.groupname = radioGroup.name;
			rb2.size = 200;
			rb2.containment = Containment.CONTAINED;
			rb2.sizeUnit = SizeUnit.PIXELS;
			
			var rb3:RadioButton = new RadioButton();
			rb3.label = "Meal option 3";
			rb3.groupname = radioGroup.name;
			rb3.size = 200;
			rb3.containment = Containment.CONTAINED;
			rb3.sizeUnit = SizeUnit.PIXELS;

			radioGroup.addEventListener(Event.CHANGE, showChange);
			
			myContainer.addChild( rb1 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			myContainer.addChild( rb2 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			myContainer.addChild( rb3 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			
			scroller.addScrollContent(myContainer);
			
			addChild(scroller);
			
			myContainer.setSize(1024,600);

		}
		private function showChange(e:Event):void
		{
			trace("Changed.");
		}
	}
}

 

good find. good luck!

 

Edit: Also note that when it does look as though the button was "deselected" its still selected. Its just not visually correct anymore.

 

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: RadioButton Redraw Problem

Update #2:

 

I can also confirm that if you do remove the scrollpane object and just straight add the container the bug does not occur as shown by the following code:

 

 

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	import qnx.ui.buttons.RadioButton;
	import qnx.ui.buttons.RadioButtonGroup;
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerAlign;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.core.Containment;
	import qnx.ui.core.SizeUnit;
	import qnx.ui.core.Spacer;
	import qnx.ui.events.ScrollEvent;
	import qnx.ui.listClasses.ScrollPane;
	
	[SWF(width="1024",height="600",backgroundColor="#CCCCCC",frameRate="30")]
	public class RadioButtonTest extends Sprite
	{
		public function RadioButtonTest()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			var scroller:ScrollPane = new ScrollPane();
			scroller.width = 1024;
			scroller.height = 600;
			scroller.y = 0;
			
			var myContainer:Container = new Container();
			myContainer.margins = Vector.<Number>([0,0,0,0]);
			myContainer.flow =  ContainerFlow.HORIZONTAL;
			myContainer.debugColor = 0xFFFF00;
			myContainer.align = ContainerAlign.NEAR;
			myContainer.padding = 10;
			
			var radioGroup:RadioButtonGroup = (RadioButtonGroup.getGroup("myGroup"+RadioButtonGroup.getUniqueId()));
			
			var rb1:RadioButton = new RadioButton();
			rb1.label = "Meal option 1";
			rb1.groupname = radioGroup.name;
			rb1.size = 200;
			rb1.containment = Containment.CONTAINED;
			rb1.sizeUnit = SizeUnit.PIXELS;
			
			var rb2:RadioButton = new RadioButton();
			rb2.label = "Meal option 2";
			rb2.groupname = radioGroup.name;
			rb2.size = 200;
			rb2.containment = Containment.CONTAINED;
			rb2.sizeUnit = SizeUnit.PIXELS;
			
			var rb3:RadioButton = new RadioButton();
			rb3.label = "Meal option 3";
			rb3.groupname = radioGroup.name;
			rb3.size = 200;
			rb3.containment = Containment.CONTAINED;
			rb3.sizeUnit = SizeUnit.PIXELS;
			
			myContainer.addChild( rb1 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			myContainer.addChild( rb2 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			myContainer.addChild( rb3 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			
			//scroller.addScrollContent(myContainer);
			
			//addChild(scroller);
			
			addChild(myContainer);
			
			myContainer.setSize(1024,600);

		}
	}
}

 

So there's something going on with the scrollpane object.

 

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: RadioButton Redraw Problem

[ Edited ]

Update #3:

 

Ok so i got it working. Kind of. So from the looks of it if a user clicks anywhere there is "whitespace" then it "loses focus" on the radio button. So what i did was draw a background fill in the scroll and it seemed to clear up the problem. So now if the user clicks anywhere it will keep the selected button visually selected. here's the code:

 

 

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import qnx.ui.buttons.RadioButton;
	import qnx.ui.buttons.RadioButtonGroup;
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerAlign;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.core.Containment;
	import qnx.ui.core.SizeUnit;
	import qnx.ui.core.Spacer;
	import qnx.ui.events.ScrollEvent;
	import qnx.ui.listClasses.ScrollPane;
	
	[SWF(width="1024",height="600",backgroundColor="#CCCCCC",frameRate="30")]
	public class RadioButtonTest extends Sprite
	{
		public function RadioButtonTest()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			var scroller:ScrollPane = new ScrollPane();
			scroller.graphics.beginFill(0xFF0000);
			scroller.graphics.drawRect(0,0,1024,600);
			scroller.graphics.endFill();
			
			var myContainer:Container = new Container();
			myContainer.margins = Vector.<Number>([0,0,0,0]);
			myContainer.flow =  ContainerFlow.HORIZONTAL;
			myContainer.align = ContainerAlign.NEAR;
			myContainer.padding = 10;
			
			var radioGroup:RadioButtonGroup = (RadioButtonGroup.getGroup("myGroup"+RadioButtonGroup.getUniqueId()));
			
			var rb1:RadioButton = new RadioButton();
			rb1.label = "Meal option 1";
			rb1.groupname = radioGroup.name;
			rb1.size = 200;
			rb1.containment = Containment.CONTAINED;
			rb1.sizeUnit = SizeUnit.PIXELS;
			
			var rb2:RadioButton = new RadioButton();
			rb2.label = "Meal option 2";
			rb2.groupname = radioGroup.name;
			rb2.size = 200;
			rb2.containment = Containment.CONTAINED;
			rb2.sizeUnit = SizeUnit.PIXELS;
			
			var rb3:RadioButton = new RadioButton();
			rb3.label = "Meal option 3";
			rb3.groupname = radioGroup.name;
			rb3.size = 200;
			rb3.containment = Containment.CONTAINED;
			rb3.sizeUnit = SizeUnit.PIXELS;
			
			myContainer.addChild( rb1 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			myContainer.addChild( rb2 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			myContainer.addChild( rb3 );
			myContainer.addChild(new Spacer(3, SizeUnit.PIXELS));
			
			scroller.addScrollContent(myContainer);
			
			addChild(scroller);
			
			myContainer.setSize(1024,600);
			scroller.setSize(1024,600);

		}
	}
}

 

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
dbigham
Posts: 466
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: RadioButton Redraw Problem

Hi JRab,

 

Thanks very much for looking at this and coming up with a partial solution... this bug was pretty much a "show stopper" bug for me but with this workaround it's livable.

 

The remaining problem is that I have other buttons on the screen that are not inside of the ScrollPane, and if any of them are clicked, the same behavior occurs. I guess I should submit a ticket for this bug.

 

When playing with this I have discovered a second bug, which is that if you have a group of radio buttons and you mouse down on one but then drag your mouse outside of the button's area, it initially "deselects" properly, but when you release the mouse button, it goes back to a selected state. (But doesn't trigger the click event)  That bug however is pretty tame and I doubt it would come up in practice very often.

 

Too bad there isn't a compensation program for people who find bugs :smileyhappy:

 

Thanks again...

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

Re: RadioButton Redraw Problem

hey,

 

haha if only bug hunters were compensated... i think we'd be rich :smileyvery-happy:

 

as for the click event not registering, i think if you listen to the change event from the radio button it will give you more accurate results than a click would. so if you want you can recheck that one by listening to the Event.CHANGE event and see if the same thing happens. 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
dbigham
Posts: 466
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA
Please use plain text.