Adobe AIR Development

[blueinc]

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]

[EraserX]

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. 

[EraserX]

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

[blueinc]

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?

[EraserX · Accepted solution]

Yes that's right. Duplicate your original CustomSkin and change the background color.

[blueinc]

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

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

[EraserX]

A kudo?

[blueinc]

Absolutely