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
Posts: 109
Registered: ‎12-04-2008
My Device: Playbook, Torch 9800, Storm 9530, Tour 9630
My Carrier: Telus
Accepted Solution

Custom SkinState?

[ Edited ]

I'm fairly new to AS3, skinning and qnx development. Is it possible to create a custom SkinState and then set that state on a button?

Here's a scenario: I have a series of 5 buttons all using a custom skin. The skin has states for typical up, down, selected and disabled. When the user chooses one of the buttons, I would like to be able to set the button state to something called 'incorrect' that has a different background color that any of the other states.

Is this possible?

 

TIA

B

 

[Edit: Or perhaps in my ignorance, I'm going about this all wrong. Is there a better way to achieve this? thx]

PlayBook Apps: Sudoku Pro
Smartphone Apps: Compass | MultiClock
Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Custom SkinState?

I notice that the Button class has a property called _state.  If you extend the Button class, you could add a function to change that _state to CustomState.INCORRECT (basically just a string).  Then in the skin, try adding another state called CustomState.INCORRECT with its own color.

 

I think this might work. 

Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Custom SkinState?

Another way to achieve this is simply to create a new skin called CustomSkin.Incorrect and change the button's skin at runtime.

 

i.e. - if (buttonIsIncorrect){ button.setSkin(CustomSkin.Incorrect);}

Developer
Posts: 109
Registered: ‎12-04-2008
My Device: Playbook, Torch 9800, Storm 9530, Tour 9630
My Carrier: Telus

Re: Custom SkinState?

Thank you for the reply. I think this might work. It would have all the same default states as the original CustomSkin but with a different background...? Is that what you mean?

PlayBook Apps: Sudoku Pro
Smartphone Apps: Compass | MultiClock
Highlighted
Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Custom SkinState?

Yes that's right. Duplicate your original CustomSkin and change the background color.
Developer
Posts: 109
Registered: ‎12-04-2008
My Device: Playbook, Torch 9800, Storm 9530, Tour 9630
My Carrier: Telus

Re: Custom SkinState?

Seems to work quite well. Thanks for your help with this. Smiley Happy

 

package com.blueinc
{
import flash.display.Sprite;

import qnx.ui.skins.SkinStates;
import qnx.ui.skins.UISkin;


public class IncorrectButtonSkin16 extends UISkin {
	/**@private**/
	protected var upSkin:Sprite;
	/**@private**/
	protected var selectedSkin:Sprite;
	/**@private**/
	protected var disabledSkin:Sprite;
	/**@private**/
	protected var downSkin:Sprite;

	/**@private**/
	protected var _incorrectBackground:Sprite;

	private var COLOUR_GREY:uint = 0xc9c9c9;
	private var COLOUR_LIGHT_GREY:uint = 0xeaeaea;
	private var COLOUR_PALE_GREEN:uint = 0xbfc9b5; // a bit lighter 0xe0ecd3;// a bit darker: 0xbfc9b5
	private var COLOUR_DEFAULT_BLUE:uint = 0x2c7ac3;
	private var COLOUR_ORANGE:uint = 0xf8cf6e;

	private var buttonSize:Number = 31;

	/**
	*Create a custom button skin
	*/
	public function IncorrectButtonSkin16() 
	{
		super( );
		_incorrectBackground = new Sprite();

	}

	override protected function initializeStates():void 
	{
		upSkin = new Sprite();
		upSkin.graphics.beginFill(COLOUR_LIGHT_GREY);
		upSkin.graphics.drawRect(0,0,buttonSize,buttonSize);
		upSkin.graphics.endFill();

		downSkin = new Sprite();
		downSkin.graphics.beginFill(COLOUR_DEFAULT_BLUE);
		downSkin.graphics.drawRect(0,0,buttonSize,buttonSize);
		downSkin.graphics.endFill();

		disabledSkin = new Sprite();
		disabledSkin.graphics.beginFill(COLOUR_PALE_GREEN);
		disabledSkin.graphics.drawRect(0,0,buttonSize,buttonSize);
		disabledSkin.graphics.endFill();

		selectedSkin = new Sprite();
		selectedSkin.graphics.beginFill(COLOUR_PALE_GREEN);
		selectedSkin.graphics.drawRect(0,0,buttonSize,buttonSize);
		selectedSkin.graphics.endFill();


		setSkinState( SkinStates.UP, upSkin );
		setSkinState( SkinStates.SELECTED,selectedSkin );
		setSkinState( SkinStates.DISABLED, disabledSkin );
		setSkinState( SkinStates.DOWN, downSkin );

		showSkin( upSkin );

	}

	/**
	* overrides provided by Ryan Stewart here:
	* http://blog.digitalbackcountry.com/2011/01/creating-custom-list-skins-for-the-blackberry-playbook/
	* 
	*/
	override protected function setState(state:String):void
	{
		super.setState(state);

		_incorrectBackground.graphics.clear();
		_incorrectBackground.graphics.beginFill(COLOUR_ORANGE);
		_incorrectBackground.graphics.drawRect(0,0,buttonSize,buttonSize);
		_incorrectBackground.graphics.endFill();
	}

	override protected function onAdded():void
	{
		super.onAdded();
		addChild(_incorrectBackground);
	}

	override protected function onRemoved():void
	{
		super.onRemoved();
		removeChild(_incorrectBackground);
	}
}
}

 and in the code:

public function setIncorrect(wrong:Boolean):void{
	if (wrong){
		setSkin(IncorrectButtonSkin16);
	}else{
		setSkin(CustomBlueincButtonSkin16);
	}
}

 and

...
if(showIncorrectCells){
  if (isIncorrect){
	btn.setIncorrect(true);
  }else{
	btn.setIncorrect(false);
} 

 

cheers...Brian

PlayBook Apps: Sudoku Pro
Smartphone Apps: Compass | MultiClock
Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Custom SkinState?

A kudo?
Developer
Posts: 109
Registered: ‎12-04-2008
My Device: Playbook, Torch 9800, Storm 9530, Tour 9630
My Carrier: Telus

Re: Custom SkinState?

Absolutely Smiley Happy

PlayBook Apps: Sudoku Pro
Smartphone Apps: Compass | MultiClock