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: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers
Accepted Solution

Lists - Dark color

I'm attaching a picture below which I got at:

 

http://www.adobe.com/devnet/flex/articles/mobile_development_hero_burrito.html#performance

 

While I know this is a "Flex Hero" article, I don't like the alternating gray/white list that is created in the QNX sdk. I want something like the box shown below. Does anyone have any idea how to implement it?

 

itemTypes.png

 

G

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Lists - Dark color

For the list, you need to create your own renderer (skin).  There has been losts of discussions and sample code in this forum regarding how best to do that.  For text fields, the same is true, but I have never had a need to do that.

Developer
Posts: 43
Registered: ‎12-22-2010
My Device: Not Specified

Re: Lists - Dark color

If you are fine with the decoration method, the colors are pretty much configurable. If you are in Burrito, you can find them in appearance tab.

They main color you are looking for is the chrome color I think, others are called selection, roll over, etc.

 

If you do not like the decoration, like you want glow or other effects and filters, you can go for a custom skin, which is not super easy but is fairly doable. If you want to change the layouting of the contents, etc for thinks like lists, you should look for custom item renderers (it can also add effects).

---------------------
a) If you like my response/post, please provide a Kudo (white star to the left).
b) If my post solved your problem please click on the Accept as Solution button.
----------------------
Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Lists - Dark color

Hey guys,

 

Thanks for your replies.

 

@keyafati - I'm using 4.0 unfortunately and not Burrito. I'm fairly new AS, so the whole MXML in Burrito was too much for me to handle for now lol. But I do want the dark skin, and while I can implement my own cell renderer etc, I'm having some difficulty wrapping my head around it.

 

So to see what  color "scheme" I want, you can use the following code to create a button:

 

var button:Button = new Button();
button.setSkin(new RoundedButtonSkinBlack());
addChild(button);
button.x = 512;
button.y = 300;

 

So this is what I Implemented from jtegen's and JRab's code from other posts.

 

In my sprite window I have:

 

 

var arr:Array = new Array({label: 'Black'},
				{label: 'Green'},
				{label: 'Blue'},
				{label: 'White'},
				{label: 'Slow Lines'},
				{label: 'Abstract'},
				{label: 'Lines'},
				{label: 'Aurora'},
				{label: 'White'},
				{label: 'Slow Lines'},
				{label: 'Abstract'},
				{label: 'Lines'},
				{label: 'White'},
				{label: 'Slow Lines'},
				{label: 'Abstract'},
				{label: 'Lines'});
			
			var firstindex:int = 0;
			var list:List = new List();
			list.setSkin(ListCellRenderer);
			list.width = 250;
			list.height = 400;
			list.alpha = 1.0;
			list.x = 100;
			list.y = 100;
			list.dataProvider = new DataProvider(arr);
			list.selectionMode = ListSelectionMode.SINGLE;
			list.allowDeselect = false;
			list.selectedIndex = firstindex;
			addChild( list );

 

 

In my ListCellRenderer.as class I have:

 

package
{
	import qnx.ui.listClasses.AlternatingCellRenderer;
	import qnx.ui.skins.listClasses.CellRendererSkinBlack;
	
	public class ListCellRenderer extends AlternatingCellRenderer
	{
		public function ListCellRenderer()
		{
			super();
			setSkin(CellRendererSkinBlack);
		}
	}
}

 

 

Now if you run this, you'll notice that the text is pretttty dark. Is there anyway to display White text?

 

Also, the CellRendererBlack appears in the package "qnx.ui.skins.listClasses".

How can I got about perhaps overwriting the Up, down, disabled etc methods for this CellRendererBlack class? Is it somehow protected from being overwritten.

 

I guess I could really write my own Skin extends UISkin class?

 

What I really need to be able to do is though, change the text to white...any ideas?

 

Thanks

 

G

 

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

Re: Lists - Dark color

hey gpatton,

 

to set the color of your text, you can use the setTextFormatForState() method in your cell renderer class. Use the following code in your ListCellRenderer.as file:

 

 

package
{
import flash.text.TextFormat;

import qnx.ui.listClasses.AlternatingCellRenderer;
import qnx.ui.skins.SkinStates;
import qnx.ui.skins.listClasses.CellRendererSkinBlack;

public class ListCellRenderer extends AlternatingCellRenderer
{
public function ListCellRenderer()
{
super();

var myFormat:TextFormat = new TextFormat();

myFormat.color = 0xFFFFFF;

setTextFormatForState(myFormat, SkinStates.UP);

setSkin(CellRendererSkinBlack);
}
}
}

 

 

You can get more information about that method here:

 

http://www.blackberry.com/developers/docs/airapi/1.0.0/qnx/ui/listClasses/CellRenderer.html#setTextF...

 

as for changing the actual look of the skin entirely with teh UP, DOWN, etc. as you have state you have to create your own skin. however, if you just want to change the color of your text or its format, you dont have to create any new skin classes. jsut use the setTextFormatForState() method as stated above. Here is a code showing you how to do all the state formats:

 

 

			var myFormat:TextFormat = new TextFormat();
			
			myFormat.color = 0xFFFFFF;
			
			setTextFormatForState(myFormat, SkinStates.UP);
			setTextFormatForState(myFormat, SkinStates.UP_ODD); //alternate cell
			setTextFormatForState(myFormat, SkinStates.DOWN);
			setTextFormatForState(myFormat, SkinStates.SELECTED);
			setTextFormatForState(myFormat, SkinStates.DOWN_SELECTED);

 

you just have to make your own TextFormat objects and replace it where you need it to be.

 

 

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
Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Lists - Dark color

[ Edited ]

Thanks JRab!

 

I just didn't want to waste my time re-writing a class, to find out that it could have take 2 lines of code to over-write something.

Just wanted to confirm first Smiley Happy

 

Thanks for your help!