Adobe AIR Development

[steve_web]

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.

[JRab]

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!

[jtegen]

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.