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

Picker black themed skin not working

I am trying to set the picker's skin theme to black.   I can get it work if I set the global themes to black, but I don't want my entire application flipped to black theme, just this picker.  I tried to set the skins for each of the compenents (http://www.blackberry.com/developers/docs/airapi/1.0.0/index.html) of the picker, but the components you see before clicking the picker stay at the white theme.  When I click the picker you see the black themed elements.  I used

            budgetPicker.setButtonSkin(new PickerButtonSkinBlack);
            budgetPicker.setListBackgroundSkin(new PickerListBackgroundBlack);
            budgetPicker.setSelectionSkin(new PickerSelectionBlack);

 

But the .setButtonSkin is not doing anything.  Even if I comment it out it makes no difference.

 

Anyone?

 

 

Developer
Posts: 165
Registered: ‎10-26-2010
My Device: BlackBerry® PlayBook™
My Carrier: .

Re: Picker black themed skin not working

No clue if this will work or not, but maybe try calling the drawNow() method after setting your skin to black. This should force a redraw, and hopefully with the new skin in place.

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

Re: Picker black themed skin not working

[ Edited ]

Thank you for the suggestion.  I tried it and it did not work.

 

In case anyone cares to test it, here's some code:

 

 

            import qnx.ui.skins.picker.PickerButtonSkinBlack;
            import qnx.ui.skins.picker.PickerListBackgroundBlack;
            import qnx.ui.skins.picker.PickerSelectionBlack;

            import qnx.ui.picker.Picker;

            import qnx.ui.data.DataProvider;

            var budgetPicker:Picker;
            var budgetPickerArray:Array;
            var budgetPickerDP:DataProvider;
            var budgetIDArray:Array;
            var budgetIDdp:DataProvider;
            
            budgetPicker = new Picker();
            budgetPicker.setButtonSkin(new PickerButtonSkinBlack);
            budgetPicker.setListBackgroundSkin(new PickerListBackgroundBlack);
            budgetPicker.setSelectionSkin(new PickerSelectionBlack);
            
            budgetIDArray = new Array();
            budgetIDArray.push({label: "Item 1"});
            budgetIDArray.push({label: "Item 2"});
            budgetIDdp = new DataProvider(budgetIDArray);
            
            budgetPickerArray = new Array();
            budgetPickerArray.push(budgetIDdp);
            budgetPickerDP = new DataProvider(budgetPickerArray);
            
            budgetPicker.dataProvider = budgetPickerDP;
            addChild(budgetPicker);

 

 

 

 

Thanks for your help guys.  I think this might be a bug. 

Developer
Posts: 1,003
Registered: ‎01-16-2011
My Device: PlayBook (sim)
My Carrier: Rogers

Re: Picker black themed skin not working

Tstorm2086 experienced the same problem. I think you may be right about it being a bug, as his only solution was to set the ThemeGlobals to black.

- If you like my response/post, or it helped you find an answer you were looking for, please provide a Kudo - white star to the bottom right of this post. -
- Please use the search bar at the top, or check out the PlayBook FAQ's for help getting started -
- Hockey DrillBook -
Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Picker black themed skin not working

**bleep**, that's what I didn't want to hear.  Setting the global theme to black means I have to then change all of the text in my app back to black from the black theme's white text.

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

Re: Picker black themed skin not working

hey,

 

yep i can also confirm that its a bug. no matter how you go about setting it (asside from the themeglobal option) it wont ever set the skin of the button. all the other set methods work though, except this one.

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: 1,003
Registered: ‎01-16-2011
My Device: PlayBook (sim)
My Carrier: Rogers

Re: Picker black themed skin not working

I know it's impossible to tell when a bug will get fixed, but can you not just leave your app as is and fix it when the bug is resolved? (I'm assuming its purely an aesthetic thing)

- If you like my response/post, or it helped you find an answer you were looking for, please provide a Kudo - white star to the bottom right of this post. -
- Please use the search bar at the top, or check out the PlayBook FAQ's for help getting started -
- Hockey DrillBook -
Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Picker black themed skin not working

Thanks for the suggestion.  Might do that.

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

Re: Picker black themed skin not working

hey EraserX,

 

i did some more digging and found a possible workaround. thanks to Flash Builder i was able to snoop around the Picker class via extending it with a custom class. turns out the button is a protected value therefore totally accessible via extending the class. to summarize i basically took the setButtonSkin method and overrode it and then modified the __buttonBackground (turns out its a button so its skinnable via its own setSkin method).

 

CustomPicker.as:

 

 

package
{
	import qnx.ui.picker.Picker;
	
	public class CustomPicker extends Picker
	{
		public function CustomPicker()
		{
			super();
		}
		
		override public function setButtonSkin(skin:Object):void
		{
			this.__backgroundButton.setSkin(skin);
		}
	}
}

 

 

so from now on instead of creating a Picker() object, you can create a CustomPicker() object.

 

 

// A short example of a picker component that displays
// day, month and year.
package
{
import flash.display.Sprite;
import flash.events.Event;

import qnx.ui.data.DataProvider;
import qnx.ui.picker.Picker;
import qnx.ui.skins.picker.PickerButtonSkinBlack;
import qnx.ui.skins.picker.PickerListBackgroundBlack;
import qnx.ui.skins.picker.PickerSelectionBlack;
import qnx.ui.text.Label;

[SWF(height="600", width="1024", frameRate="30", backgroundColor="#BBBBBB")]
public class PickerSample extends Sprite
{

public function PickerSample()
{

// Create three arrays to handle days, months, years.

var arrDay:Array=[];
var arrMonth:Array=[];
var arrYear:Array=[];

// Populate the month array and create the
// day DataProvider

for (var i:int=1; i<32; i++) {
arrDay.push({label: i.toString()});
}

var dayDP:DataProvider=new DataProvider(arrDay);


// Populate and month array and create the month
// DataProvider

arrMonth.push({label: "January"});
arrMonth.push({label: "February"});
arrMonth.push({label: "March"});
arrMonth.push({label: "April"});
arrMonth.push({label: "May"});
arrMonth.push({label: "June"});
arrMonth.push({label: "July"});
arrMonth.push({label: "August"});
arrMonth.push({label: "September"});
arrMonth.push({label: "October"});
arrMonth.push({label: "November"});
arrMonth.push({label: "December"});

var monthDP:DataProvider=new DataProvider(arrMonth);

// Create the year DataProvider

for (var l:int=1900; l<2015; l++) {
arrYear.push({label: l.toString()});
}

var yearDP:DataProvider=new DataProvider(arrYear);

// Add the day, month and year DataProviders to the main
// array

var dpp:Array = new Array();

dpp.push(dayDP);
dpp.push(monthDP);
dpp.push(yearDP);

// Create the picker and add the main DataProvider

var picker:CustomPicker = new CustomPicker();

picker.setListBackgroundSkin(PickerListBackgroundBlack);
picker.setSelectionSkin(PickerSelectionBlack);
picker.setButtonSkin(PickerButtonSkinBlack);

picker.width=400;
picker.height=50;
picker.x=picker.y=300;
picker.dataProvider=new DataProvider(dpp);
addChild(picker);


// To customize column widths,
// all widths are added up and then used for
// a ratio against the component set width

picker.setListWidth(0,100);
picker.setListWidth(1,300);
picker.setListWidth(2,200);

// Set to Jan 1, 2010

picker.selectedIndices=[0,6,111];

// Add listeners for open, close and select events

picker.addEventListener(Event.OPEN,handleOpen);
picker.addEventListener(Event.CLOSE,handleClose);
picker.addEventListener(Event.SELECT,handleSelect);

// A simple function that displays currently selected
// item information in the console.

traceItems();

function traceItems():void
{
for (var j:int = 0; j <picker.selectedItems.length; j++) {
trace("Picker.selectedItems " +picker.selectedItems[j].label);
}
trace("Picker.selectedIndices "+picker.selectedIndices);
trace("Picker.data "+picker.data);
}
function handleSelect(e:Event):void {
traceItems();
}

function handleOpen(e:Event):void {
trace("Picker.open event captured");
}
function handleClose(e:Event):void {
trace("Picker.close event captured");
}
}
}
}

 

it should ahve the same functionality of the original class just with a modified setButtonSkin() method. i also want to add because this was a total guess i have no idea if we are losing extra functionality. example being if something else was also done within that method i dont know about. but it gets the job done hah hope this helps till they clear up the bug. 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: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Picker black themed skin not working

Brilliant JRab!