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 Contributor
CanadianMike
Posts: 7
Registered: ‎02-25-2011
My Device: Not Specified
Accepted Solution

Extending UIComponent - FocusEvent Behaviour

Goal: Extended UIComponent into a custom control and identify when it receives and loses focus.  The control content changes depending on if it has focus or not.

 

Trouble: With the following code, when the label within the control is clicked, The control recieves focus, and correctly changes its displayed content.  However, when the second label is clicked, both labels become visible.

 

Question:  Is there an alternate way to design a custom control, and dynamically vary its content based on its focus status?

 

 

public class CCustomControl extends UIComponent
{
	private var cntMain1:Container;
	private var cntMain2:Container;
	
	public function CCustomControl()
	{	
		//*******************************
		cntMain1 = new Container();
		cntMain1.flow = ContainerFlow.VERTICAL;
		cntMain1.debugColor = 0x0000FF;
		cntMain1.setSize(300, 200);
		cntMain1.visible = true;
		
		var lblBeer:Label = new Label;
		lblBeer.text = "Beer is Good";
		lblBeer.autoSize = TextFieldAutoSize.CENTER;
		lblBeer.setSize(lblBeer.textField.width, lblBeer.textField.height);
		
		//*********************************
		cntMain2 = new Container();
		cntMain2.flow = ContainerFlow.VERTICAL;
		cntMain2.debugColor = 0x0FF00;
		cntMain2.setSize(300,200);
		cntMain2.visible = false;
		
		var lblSyrup:Label = new Label;
		lblSyrup.text = "Maple Syrup is Great";
		lblSyrup.autoSize = TextFieldAutoSize.CENTER;
		lblSyrup.setSize(lblSyrup.textField.width, lblSyrup.textField.height);
		
		//*********************************
		
		cntMain1.addChild(lblBeer);
		cntMain2.addChild(lblSyrup);
		this.addChild(cntMain1);
		this.addChild(cntMain2);
		
		this.addEventListener(FocusEvent.FOCUS_IN, GotFocus);
		this.addEventListener(FocusEvent.FOCUS_OUT, LostFocus);
		
		super();
	}
	
	private function GotFocus(e:FocusEvent):void{
		trace(TextField(e.target).text + " Got Clicked");
		cntMain1.visible = false;
		cntMain2.visible = true;
	}
	
	private function LostFocus(e:FocusEvent):void {
		trace(TextField(e.target).text + " Lost Focus");
		cntMain1.visible = true;
		cntMain2.visible = false;
	}
}

 

public class ContainerTest extends Sprite
{
	public function ContainerTest()
	{
		var uiControl:CCustomControl = new CCustomControl();
		this.addChild(uiControl);
	}	
}

 

 

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

Re: Extending UIComponent - FocusEvent Behaviour

[ Edited ]

hey,

 

first of all, great thread format. Everything is super clear, formatted and layed out - so kudos to that! :smileyhappy:

 

as for your problem, from the looks of it you are adding both of the listeners to the UIComponent. so whats happening is that both the events are being triggered when u do an action. so to counter act that, you can change your focus functions to this:

 

 

private function GotFocus(e:FocusEvent):void{
trace(TextField(e.target).text + " Got Clicked");
cntMain1.visible = !cntMain1.visible;
cntMain2.visible = !cntMain2.visible;
}

private function LostFocus(e:FocusEvent):void {
trace(TextField(e.target).text + " Lost Focus");
cntMain1.visible = !cntMain1.visible;
cntMain2.visible = !cntMain2.visible;
}

 

This will effectively change the visibility to opposite of what it was and be more consistent. hope that clears things up. i am a little confused as to the purpose, but from what i see i think thats what u want to do. test it out and hope it works out for you. 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 Contributor
CanadianMike
Posts: 7
Registered: ‎02-25-2011
My Device: Not Specified

Re: Extending UIComponent - FocusEvent Behavior

JRab, Thank You.  That resolved the issue of displaying both labels at the same time.

 

Is there a way to assign focus programatically?

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

Re: Extending UIComponent - FocusEvent Behavior

hey,

 

glad it worked out for yah. to set the focus programatically, use this:

 

 

stage.focus = lblBeer;

 

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.