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
steve_web
Posts: 321
Registered: ‎05-07-2009
My Device: BlackBerry Z10, PlayBook, 9900

QNX PickerList - alignment center in latest SDK/Simulator (0.9.2)

I was using the PickerList before the latest SDK/Simulator and it was left aligned (e.g. the labels in the list) which is what I desired.

 

I now find it is center aligned and I'm not sure if/how I can force this to left? any ideas? or is this a glitch that I just need to wait for a new SDK/simulator.

 

PS This is in the black or white theme... same results.


PlayBook Apps: DataMine, Dots + Boxes, 5 Marbles
BlackBerry SmartPhone Apps: 5 Marbles Soon: **** (D.Z.A), ****Quest, **** Challenge, VaultCracker, DevBrowser, Radial****
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: QNX PickerList - alignment center in latest SDK/Simulator (0.9.2)

hey steve,

 

using a previous thread's method of creating a custom picker cell renderer, you can acheive a left aligned picker. the picker's cell renderer seems to behave just as you would expect it and just like the list's cell renderer. the code below is an example of a left aligned picker:

 

PickerSample.as (Main Application):

 

 

// 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.picker.PickerListCellRenderer;
import qnx.ui.skins.buttons.RoundedButtonSkinBlack;
import qnx.ui.skins.listClasses.CellRendererSkinBlack;
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.setListSkin(CustomPickerListCellRenderer);

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

 

 

CustomPickerListCellRenderer.as:

 

 

package
{
	
	import flash.text.TextFormatAlign;
	
	import qnx.ui.picker.PickerListCellRenderer;
	import qnx.ui.skins.SkinStates;
	
	public class CustomPickerListCellRenderer extends PickerListCellRenderer
	{
		
		public function CustomPickerListCellRenderer()
		{	
			this.getTextFormatForState(SkinStates.UP).leftMargin = 10;
			this.getTextFormatForState(SkinStates.SELECTED).leftMargin = 10;
			
			this.getTextFormatForState(SkinStates.UP).align = TextFormatAlign.LEFT;
			this.getTextFormatForState(SkinStates.SELECTED).align = TextFormatAlign.LEFT;
		}
	}
}

 

I added a 10 pixel margin because by left aligning it, it goes too far to the left and over the border of the picker. also another thing to note is it will left align all parts of the picker that you apply it to. hope that helps clear things up. 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
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: QNX PickerList - alignment center in latest SDK/Simulator (0.9.2)

Boy I hope BB software people watch this list and incorporate these customization and extensions to the API to the core product.  It will make life easier for everyone down the road.

Please use plain text.