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: 42
Registered: ‎01-05-2011
My Device: Not Specified
Accepted Solution

Skinning The Drop Down Button...NOT Cell Renderer....

I finally got around to skinning my QNX components, and as I suspected the drop down (which I left till last) is the only component to give me problems when it comes to skinning.

 

Has anyone successfully skinned the Drop Down Button with the arrow?

 

I've come close, but I get this weird behaviour, where when I click on the button while the drop down is expanded, I see the default Drop Down Button asset.

 

Here are screens:

 

Not clicking dd button:

dd1.png

 

Clicking dd button:

dd2.png

 

Here's my code:

 

 

brushDropDown=new CustomDropDown();
brushDropDown.setListSkin(CustomDropDownCellRenderer);
brushDropDown.setButtonSkin(CustomDropDownButtonSkin);
brushDropDown.setBackgroundSkin(DropDownBackgroundSkinBlack);	brushDropDown.setBackgroundSkin(DropDownBackgroundBarSkinBlack);




public class CustomDropDownButtonSkin extends DropDownButtonSkinWhite
	{
		
		/**@private**/
		protected var upSkin1:Sprite;
		/**@private**/
		protected var selectedSkin1:Sprite;
		/**@private**/
		protected var disabledSkin1:Sprite;
		/**@private**/
		protected var downSkin1:Sprite;

		public function CustomDropDownButtonSkin()
		{
			super();
		}
		
		override protected function init():void{
			
			super.init();
		
			upSkin1=new Sprite();
			upSkin1.graphics.beginFill(Colour.YELLOW);
			upSkin1.graphics.drawRect(0, 0, 170, 50);
			upSkin1.graphics.endFill();
			
			downSkin1=new Sprite();
			downSkin1.graphics.beginFill(0x333333);
			downSkin1.graphics.drawRect(0, 0, 170, 50);
			downSkin1.graphics.endFill();
			
			disabledSkin1=new Sprite();
			disabledSkin1.graphics.beginFill(0xCC0000);
			disabledSkin1.graphics.drawRect(0, 0, 170, 50);
			disabledSkin1.graphics.endFill();
			
			selectedSkin1=new Sprite();
			selectedSkin1.graphics.beginFill(Colour.ORANGE);
			selectedSkin1.graphics.drawRect(0, 0, 170, 50);
			selectedSkin1.graphics.endFill();
			
			setSkinState(SkinStates.UP, upSkin1);
			setSkinState(SkinStates.SELECTED, selectedSkin1);
			setSkinState(SkinStates.DISABLED, disabledSkin1);
			setSkinState(SkinStates.DOWN, downSkin1);
			showSkin(upSkin1);
		}
	}

 

 

I noticed that DropDownButtonSkinWhite (which my CustomButtonSkin is extending) already has a selected skin assigned to it that I can't override...I can make it visible false, which hides the default asset...but that doesn't help me...

 

 

Has anyone found a workaround for this? Thanks in advance....

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

Re: Skinning The Drop Down Button...NOT Cell Renderer....

hey,

 

skinning is rough - we're basically going in blind lol. here are the states in the drop down that you need to cover including the ones you already have:

 

 

setSkinState(SkinStates.UP, upSkin1);
setSkinState(SkinStates.DOWN, downSkin1);
setSkinState(SkinStates.SELECTED, selectedSkin1);
setSkinState(SkinStates.DOWN_SELECTED, selectedSkin1);
setSkinState(SkinStates.DISABLED, disabledSkin1);

 

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: 42
Registered: ‎01-05-2011
My Device: Not Specified

Re: Skinning The Drop Down Button...NOT Cell Renderer....

Ok JRab. You have to admit I was close! Thanks for your help yet again....

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

Re: Skinning The Drop Down Button...NOT Cell Renderer....

off by just a line - id say you nailed it Smiley Happy

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: 42
Registered: ‎01-05-2011
My Device: Not Specified

Re: Skinning The Drop Down Button...NOT Cell Renderer....

After updating to 0.94....My fully skinned DropDown is throwing errs

 

TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at qnx.ui.skins::UISkin/get edgeMetrics()[E:\hudson\workspace\SWF_deckard_sdk\src\screen\src\qnx\ui\skins\UISkin.as:89]
    at qnx.ui.listClasses:Smiley Very HappyropDown/drawBackgroundCover()[E:\hudson\workspace\SWF_deckard_sdk\src\screen\src\qnx\ui\listClasses\DropDown.as:427]
    at qnx.ui.listClasses:Smiley Very HappyropDown/updateLayout()[E:\hudson\workspace\SWF_deckard_sdk\src\screen\src\qnx\ui\listClasses\DropDown.as:592]
    at qnx.ui.listClasses:Smiley Very HappyropDown/draw()[E:\hudson\workspace\SWF_deckard_sdk\src\screen\src\qnx\ui\listClasses\DropDown.as:558]
    at qnx.ui.core::UIComponent/fireCallLaterMethods()[E:\hudson\workspace\SWF_deckard_sdk\src\screen\src\qnx\ui\core\UIComponent.as:304]
    at qnx.ui.core::UIComponent/callLaterHandler()[E:\hudson\workspace\SWF_deckard_sdk\src\screen\src\qnx\ui\core\UIComponent.as:296]

 

 

I tried refactoring my code thinking the init was getting called too soon...but I get the same error. Here's my code:

 

 

 

brushDropDown=new CustomDropDown();
brushDropDown.setListSkin(CustomDropDownCellRenderer);
brushDropDown.setButtonSkin(CustomDropDownButtonSkin);
brushDropDown.setBackgroundSkin(DropDownBackgroundSkinBlack);
brushDropDown.setBackgroundSkin(DropDownBackgroundBarSkinBlack);


public class CustomDropDownButtonSkin extends DropDownButtonSkinWhite { /**@private**/ protected var upSkin1:Sprite; /**@private**/ protected var selectedSkin1:Sprite; /**@private**/ protected var disabledSkin1:Sprite; /**@private**/ protected var downSkin1:Sprite; protected var downSelectedSkin1:Sprite; public function CustomDropDownButtonSkin() { super(); } override protected function initializeStates():void { var iconDown1:Sprite = new _DropDownArrowDown1; var iconDown2:Sprite = new _DropDownArrowDown1; var iconDown3:Sprite = new _DropDownArrowDown1; var iconUp1:Sprite = new _DropDownArrowUp1; var iconUp2:Sprite = new _DropDownArrowUp1; iconDown1.x = 160; iconDown2.x = 160; iconDown3.x = 160; iconUp1.x = 160; iconUp2.x = 160; iconDown1.y = (50 - iconDown1.height)*.5; iconDown2.y = (50 - iconDown1.height)*.5; iconDown3.y = (50 - iconDown1.height)*.5; iconUp1.y = (50 - iconDown1.height)*.5; iconUp2.y = (50 - iconDown1.height)*.5; upSkin1=new Sprite(); upSkin1.graphics.beginFill(Colour.YELLOW); upSkin1.graphics.drawRoundRect(0, 0, 200, 50,5,5); upSkin1.graphics.endFill(); upSkin1.addChild(iconDown1); downSkin1=new Sprite(); downSkin1.graphics.beginFill(0x333333); downSkin1.graphics.drawRoundRect(0, 0, 200, 50,5,5); downSkin1.graphics.endFill(); downSkin1.addChild(iconDown3); downSelectedSkin1=new Sprite(); downSelectedSkin1.graphics.beginFill(0x333333); downSelectedSkin1.graphics.drawRoundRect(0, 0, 200, 50,5,5); downSelectedSkin1.graphics.endFill(); downSelectedSkin1.addChild(iconUp1); selectedSkin1=new Sprite(); selectedSkin1.graphics.beginFill(Colour.RED); selectedSkin1.graphics.drawRoundRect(0, 0, 200, 50,5,5); selectedSkin1.graphics.endFill(); selectedSkin1.addChild(iconUp2); setSkinState(SkinStates.UP, upSkin1); setSkinState(SkinStates.SELECTED, selectedSkin1); setSkinState(SkinStates.DISABLED, disabledSkin1); setSkinState(SkinStates.DOWN, downSkin1); setSkinState(SkinStates.DOWN_SELECTED, selectedSkin1); showSkin(upSkin1); } } }

 

 

If I comment out setSkinState(SkinStates.UP, upSkin1)...my app compiles without errs and I can see the DropDown...but if I toggle visibility on the DropDown between false and true above error is thrown....Weird huh?

 

This DropDown was working fine before the SDK update.

 

Anyone have any ideas? Has there been an API change?

 

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

Re: Skinning The Drop Down Button...NOT Cell Renderer....

hey,

 

yeah they changed it up a bit. they are slicing their images based on the scale9grid. below is a work around that should work. i didnt take into account however your arrows (dont have those to work with). try running the below code as is and see if anything changes:

 

 

package
{
import flash.display.Sprite;

import qnx.dialog.PromptDialog;
import qnx.ui.skins.SkinStates;
import qnx.ui.skins.buttons.DropDownButtonSkinWhite;

public class CustomDropDownButtonSkin extends DropDownButtonSkinWhite
{

/**@private**/
protected var upSkin1:Sprite;
/**@private**/
protected var selectedSkin1:Sprite;
/**@private**/
protected var disabledSkin1:Sprite;
/**@private**/
protected var downSkin1:Sprite;

public function CustomDropDownButtonSkin()
{
super();
}

override protected function initializeStates():void{

super.initializeStates();

upSkin1=new Sprite();
upSkin1.graphics.beginFill(0xFFFF00);
upSkin1.graphics.drawRect(0, 0, upSkin.width, upSkin.height);
upSkin1.graphics.endFill();

upSkin1.scale9Grid = upSkin.scale9Grid;

downSkin1=new Sprite();
downSkin1.graphics.beginFill(0x333333);
downSkin1.graphics.drawRect(0, 0, downSkin.width, downSkin.height);
downSkin1.graphics.endFill();

downSkin1.scale9Grid = downSkin.scale9Grid;

disabledSkin1=new Sprite();
disabledSkin1.graphics.beginFill(0xCC0000);
disabledSkin1.graphics.drawRect(0, 0, disabledSkin.width, disabledSkin.height);
disabledSkin1.graphics.endFill();

disabledSkin1.scale9Grid = disabledSkin.scale9Grid;

selectedSkin1=new Sprite();
selectedSkin1.graphics.beginFill(0xFFFF00);
selectedSkin1.graphics.drawRect(0, 0, selectedSkin.width, selectedSkin.height);
selectedSkin1.graphics.endFill();

selectedSkin1.scale9Grid = selectedSkin.scale9Grid;

setSkinState(SkinStates.UP, upSkin1);
setSkinState(SkinStates.DOWN, downSkin1);
setSkinState(SkinStates.SELECTED, selectedSkin1);
setSkinState(SkinStates.DOWN_SELECTED, selectedSkin1);
setSkinState(SkinStates.DISABLED, disabledSkin1);

showSkin(upSkin1);

}
}
}

 

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
BlackBerry Development Advisor
Posts: 172
Registered: ‎10-25-2010
My Device: Not Specified

Re: Skinning The Drop Down Button...NOT Cell Renderer....

Hey Sunil,

 

I am pretty sure it is the following line.

 


brushDropDown.setBackgroundSkin(DropDownBackgroundBarSkinBlack);

 

You don't need to call this as it is already setting the backround in the line above.

 

Hope that helps.

Contributor
Posts: 42
Registered: ‎01-05-2011
My Device: Not Specified

Re: Skinning The Drop Down Button...NOT Cell Renderer....

Ok I got it work.

 

Thanks to JRab and Julian for the assist. I was getting null errs when trying to apply the scale9Grid of the default shapes to my custom shapes.

 

The solution was using my own rect and using that for a scale9Grid reference.

 

 

Here are my code blocks for the Custom DropDownButton:

 

 

brushDropDown=new CustomDropDown();
brushDropDown.setListSkin(CustomDropDownCellRenderer);
brushDropDown.setButtonSkin(CustomDropDownButtonSkin);
brushDropDown.setBackgroundSkin(DropDownBackgroundSkinBlack);



//this is my custom button skin class

public class CustomDropDownButtonSkin extends DropDownButtonSkinWhite
	{

		/**@private**/
		protected var upSkin1:Sprite;
		/**@private**/
		protected var selectedSkin1:Sprite;
		/**@private**/
		protected var disabledSkin1:Sprite;
		/**@private**/
		protected var downSkin1:Sprite;

		protected var downSelectedSkin1:Sprite;

		public function CustomDropDownButtonSkin()
		{
			super();
		}

		override protected function initializeStates():void
		{
			var iconDown1:Sprite=new _DropDownArrowDown1;
			var iconDown2:Sprite=new _DropDownArrowDown1;
			var iconDown3:Sprite=new _DropDownArrowDown1;

			var iconUp1:Sprite=new _DropDownArrowUp1;
			var iconUp2:Sprite=new _DropDownArrowUp1;
			iconDown1.x=160;
			iconDown2.x=160;
			iconDown3.x=160;

			iconUp1.x=160;
			iconUp2.x=160;

			iconDown1.y=(50 - iconDown1.height) * .5;
			iconDown2.y=(50 - iconDown1.height) * .5;
			iconDown3.y=(50 - iconDown1.height) * .5;

			iconUp1.y=(50 - iconDown1.height) * .5;
			iconUp2.y=(50 - iconDown1.height) * .5;


			upSkin1=new Sprite();
			upSkin1.graphics.beginFill(Colour.YELLOW);
			upSkin1.graphics.drawRoundRect(0, 0, 200, 50, 5, 5);
			upSkin1.graphics.endFill();
			upSkin1.addChild(iconDown1);

			var grid:Rectangle=new Rectangle(5, 5, 190,40);
			
			upSkin1.scale9Grid=grid;

			downSkin1=new Sprite();
			downSkin1.graphics.beginFill(0x333333);
			downSkin1.graphics.drawRoundRect(0, 0, 200, 50, 5, 5);
			downSkin1.graphics.endFill();
			downSkin1.addChild(iconDown3);

			downSkin1.scale9Grid=grid;

			downSelectedSkin1=new Sprite();
			downSelectedSkin1.graphics.beginFill(0x333333);
			downSelectedSkin1.graphics.drawRoundRect(0, 0, 200, 50, 5, 5);
			downSelectedSkin1.graphics.endFill();
			downSelectedSkin1.addChild(iconUp1);

			downSelectedSkin1.scale9Grid=grid;

			selectedSkin1=new Sprite();
			selectedSkin1.graphics.beginFill(Colour.RED);
			selectedSkin1.graphics.drawRoundRect(0, 0, 200, 50, 5, 5);
			selectedSkin1.graphics.endFill();
			selectedSkin1.addChild(iconUp2);

			selectedSkin1.scale9Grid=grid;

			setSkinState(SkinStates.UP, upSkin1);
			setSkinState(SkinStates.SELECTED, selectedSkin1);
			setSkinState(SkinStates.DISABLED, disabledSkin1);
			setSkinState(SkinStates.DOWN, downSkin1);
			setSkinState(SkinStates.DOWN_SELECTED, selectedSkin1);
			showSkin(upSkin1);

		}
	}
}

 

 

 

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

Re: Skinning The Drop Down Button...NOT Cell Renderer....

hey,

 

glad u got it to work out! the reason why u were getting null values was because u didnt call the super.initializeStates() method at the beginning of your method. in the super version the upSkin (along with the other skins) get set. but ur way works too so no worries Smiley Happy

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