Adobe AIR Development

[georg22]

Thanks. Its so essential to get this working. I hope it wil be fixed in the next SDK. In the meantime i just use a sprite instead and set it dragable to go forward...

[jtegen · Accepted solution]

I got tired of trying to figure out the QNX class to scroll a component, so I wrote my own.  Here you go.  If you have any bugs or suggestions to improve the class, just let me know.  It works on that the child container is a UIComponent and it is responsible for the layout of its components (or drawing) and its overall bounding size.

To use it, simply:

this.layer_scroll.direction = ScrollDirection.VERTICAL; // default is both
this.layer_scroll.setContents( this.layers );
this.addChild( this.layer_scroll );

 See class for other data members:

package com.lib.playbook.controls
{
	/*
	MIT License:
	
	Copyright (C) 2011 by John Tegen/O2 Interactive
	
	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:
	
	The above copyright notice and this permission notice shall be included in
	all copies or substantial portions of the Software.
	
	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	THE SOFTWARE.
	*/
	
	import caurina.transitions.Tweener;
	
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;
	import flash.events.MouseEvent;
	import flash.utils.clearTimeout;
	import flash.utils.getTimer;
	import flash.utils.setTimeout;
	
	import qnx.fuse.ui.core.UIComponent;
	import qnx.fuse.ui.events.ScrollEvent;
	import qnx.fuse.ui.listClasses.ScrollDirection;

	public final class ScrollView extends UIComponent
	{

		//
		private var xoffset         : Number = 0;
		private var yoffset         : Number = 0;
		
		public var direction        : String = ScrollDirection.BOTH;
		public var container        : UIComponent = null;
		private var x_content_range : Number = 0;
		private var y_content_range : Number = 0;
		private var cmask           : Sprite = new Sprite();
		
		private var scroll_timeout_id : int = -1;
		
		// velocity
		private var last_move_time    : Number = 0;
		private var last_h_velocity   : Number = 0;
		private var last_v_velocity   : Number = 0;
		public  var decayTimeout      : int = 500; // ms
		public  var decayDuration     : Number = 500; // ms
		
		// frame/border
		public  var showBorder        : Boolean = true;
		public  var borderColor       : uint = 0x444444;
		public  var borderThinkness   : int = 2;
		
        // scroll bars
		private var vscroll              : Sprite = new Sprite();
		private var hscroll              : Sprite = new Sprite();
		public  var scrollBarPadding     : Number = 15;
		public  var scrollBarThickness   : Number = 8;
		public  var scrollBarOffset      : Number = 10;
		public  var scrollBarAlpha       : Number = 0.75;
		public  var scrollBarColor       : uint = 0x666666;
		public  var showHorizontalScroll : Boolean = true;
		public  var showVerticalScroll   : Boolean = true;
		
		//////////////////////////////////////////////////////////////////////
		public function ScrollView()
		{
			super();
			this.addChild( this.cmask );
			
			this.addChild( this.vscroll );
			this.addChild( this.hscroll );
			
			this.vscroll.alpha = 0.0;
			this.hscroll.alpha = 0.0;
		}
		
		//////////////////////////////////////////////////////////////////////
		public final function get bottom() : int
		{
			return this.y + this.height;
		}
		
		//////////////////////////////////////////////////////////////////////
		public final function get right() : int
		{
			return this.x + this.width;
		}
		
		////////////////////////////////////////////////////////////////////////
		public final function setContents( view : UIComponent ) : void
		{
			// previous container defined
			if( this.container != null )
			{
				this.container.mask = null;
				this.container.removeEventListener( Event.RESIZE, ContainerResized );
				this.container.removeEventListener( MouseEvent.MOUSE_DOWN, MouseDown );
				this.removeChild( this.container );
			}
			
			// add containing view
			this.container = view;
			this.container.mask = this.cmask;
			this.container.addEventListener( Event.RESIZE, ContainerResized );	
			this.container.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown );
			this.addChild( this.container );
			
			// keep scroll bars on top
			this.setChildIndex( this.vscroll, this.numChildren-1 );
			this.setChildIndex( this.hscroll, this.numChildren-1 );
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function scrollToX( value : Number, duration : Number ) : void
		{
			Tweener.addTween( this, { scrollX : -value, time : duration, transition : 'linear' } );
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function scrollToY( value : Number, duration : Number ) : void
		{
			Tweener.addTween( this, { scrollToY : -value, time : duration, transition : 'linear' } );
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function scrollTo( x : Number, y : Number, duration : Number ) : void
		{
			Tweener.addTween( this, { scrollX : -x, scrollToY : -y, time : duration, transition : 'linear' } );
		}
		
		//////////////////////////////////////////////////////////////////////////////
		public final function scrollToDisplayObject( obj :DisplayObject, duration : Number ) : void
		{
			if( this.container.contains( obj ) )
			{
				this.scrollTo( obj.x, obj.y, duration );
			}
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function get contentHeight() : Number
		{
			return this.container ? this.container.height : 0;
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function get contentWidth() : Number
		{
			return this.container ? this.container.width : 0;
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function get scrollX() : Number
		{
			return this.container ? this.container.x : 0;
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function set scrollX( value : Number ) : void
		{
			var sevent :ScrollEvent;
			
			if( this.direction == ScrollDirection.BOTH || this.direction == ScrollDirection.HORIZONTAL )
			{
				var current_x : Number = this.container.x;
				if( value > this.width - this.container.width )
				{
					this.container.x = Math.min( value, 0 );
				}
				else if( this.container.x != ( this.width - this.container.width ) )
				{
					this.container.x = this.width - this.container.width;
				}
				
				if( current_x != this.container.x )
				{
					this.updateHorizontalScroll();
					this.dispatchEvent( new ScrollEvent( ScrollEvent.SCROLL_MOVE, current_x - this.container.x, 0, ScrollDirection.HORIZONTAL ) );
				}
			}
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function get scrollY() : Number
		{
			return this.container ? this.container.y : 0;
		}
		
		///////////////////////////////////////////////////////////////////////////
		public final function set scrollY( value : Number ) : void
		{
			if( this.direction == ScrollDirection.BOTH || this.direction == ScrollDirection.VERTICAL )
			{
				var current_y : Number = this.container.y;
				
				if( value > this.height - this.container.height )
				{
					this.container.y = Math.min( value, 0 );
				}
				else if( this.container.y != ( this.height - this.container.height ) )
				{
					this.container.y = this.height - this.container.height;
				}
				
				if( current_y != this.container.y )
				{
					this.updateVerticalScroll();
					this.dispatchEvent( new ScrollEvent( ScrollEvent.SCROLL_MOVE, 0, current_y - this.container.y, ScrollDirection.VERTICAL ) );
				}
			}
		}

		///////////////////////////////////////////////////////////////////////////////////////////////
		private function MouseDown( event : MouseEvent ) : void
		{
			if( this.container.height <= this.height && ( this.direction == ScrollDirection.BOTH || this.direction == ScrollDirection.VERTICAL   ) )return;
			if( this.container.width  <= this.width  && ( this.direction == ScrollDirection.BOTH || this.direction == ScrollDirection.HORIZONTAL ) )return;
			
			// cache current mouse position
			this.xoffset = this.stage.mouseX;
			this.yoffset = this.stage.mouseY;
			
			// show the scroll bars
			if( this.scroll_timeout_id > 0 )clearTimeout( this.scroll_timeout_id );
			this.scroll_timeout_id = -1;
			if( ( this.direction == ScrollDirection.BOTH || this.direction == ScrollDirection.VERTICAL   ) && this.showVerticalScroll   )this.vscroll.alpha = 1.0;
			if( ( this.direction == ScrollDirection.BOTH || this.direction == ScrollDirection.HORIZONTAL ) && this.showHorizontalScroll )this.hscroll.alpha = 1.0;
			
			// cache current time of mouse down
			this.last_move_time = getTimer();
			
			//trace( 'MouseDown ' + this.xoffset + ' ' + this.yoffset + ' = ' + event.localX + ' ' + event.localY );
			
			// add event listeners
			this.stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove );
			this.container.addEventListener(MouseEvent.MOUSE_UP, MouseUp );
			this.container.addEventListener(MouseEvent.MOUSE_OUT, MouseUp );
		}
		
		/////////////////////////////////////////////////////////////////////////////////////////////////
		private function MouseMove( event :MouseEvent ) : void
		{
            // adjust scroll positions
			this.scrollX = this.container.x + ( this.stage.mouseX - this.xoffset );
			this.scrollY = this.container.y + ( this.stage.mouseY - this.yoffset );
	
			//
			// deal with speed of scroll
			//
			var now  : Number = getTimer();
			var diff : Number = now - this.last_move_time;
			if( diff > 0 )
			{
              this.last_h_velocity = ( this.stage.mouseX - this.xoffset ) / diff;
			  this.last_v_velocity = ( this.stage.mouseY - this.yoffset ) / diff;
			}
			else
			{
				this.last_h_velocity = 0.0;
				this.last_v_velocity = 0.0;
			}
			
			//
			// cache current state for next reply
			//
			this.last_move_time = now;
			
			this.xoffset = this.stage.mouseX;
			this.yoffset = this.stage.mouseY;

			//event.updateAfterEvent();
		}
		
		///////////////////////////////////////////////////////////////////////////////////////////////////
		private function MouseUp( event :MouseEvent ) : void
		{
			this.stage.removeEventListener( MouseEvent.MOUSE_MOVE, MouseMove );
			this.container.removeEventListener( MouseEvent.MOUSE_UP, MouseUp );
			this.container.removeEventListener( MouseEvent.MOUSE_OUT, MouseUp );

			//trace( 'vel v = ' + this.last_v_velocity.toFixed(4) + ' h= ' + this.last_h_velocity.toFixed(4) );
			
			//
			// animate friction based on speed of last incremental move
			//
			var now      : Number = getTimer();
			var diff     : Number = now - this.last_move_time;
			if( this.last_v_velocity != 0 && diff < this.decayTimeout )
			{
				var v : Number = this.last_v_velocity * this.decayDuration;
				Tweener.addTween( this, { scrollY: this.scrollY + v, time :this.decayDuration/1000 } );//transition : 'linear' } );
			}
			if( this.last_h_velocity != 0 && diff < this.decayTimeout )
			{
				var h : Number = this.last_h_velocity * this.decayDuration;
				Tweener.addTween( this, { scrollX: this.scrollX + h, time :this.decayDuration/1000 } );//transition : 'linear' } );
			}
			
			if( this.scroll_timeout_id > 0 )clearTimeout( this.scroll_timeout_id );
			this.scroll_timeout_id = setTimeout( HideScroll, 1000 );
		}
		
		//////////////////////////////////////////////////////////////////////////////////////////////////////
		private function ContainerResized( event :Event ) : void
		{
			this.invalidateDisplayList();
		}
		
		/////////////////////////////////////////////////////////////////////////////////////////////////////////
		private function HideScroll() : void
		{
			this.scroll_timeout_id = -1;
			Tweener.addTween( [this.vscroll,this.hscroll], { alpha: 0.0, time : 0.5, transition : 'linear' } );
		}
		
		/////////////////////////////////////////////////////////////////////////////////////////////////////////
		private function updateVerticalScroll() : void
		{
			if( this.direction == ScrollDirection.HORIZONTAL )return;
			
			var pct_ht         : Number = this.height / this.container.height;
			var pct_offset     : Number = ( -1.0 * this.container.y ) / this.y_content_range;
			var max_bar_height : Number = this.height- (2*this.scrollBarPadding );
			var bar_size       : Number = Math.max( 20, pct_ht * max_bar_height );
			var thumb_range    : Number = max_bar_height - bar_size;
			
			// update graphics
			this.vscroll.graphics.clear();
			this.vscroll.graphics.lineStyle( this.scrollBarThickness, this.scrollBarColor, this.scrollBarAlpha );
			this.vscroll.graphics.moveTo( this.width - this.scrollBarOffset,
										  this.scrollBarPadding + ( pct_offset * thumb_range ) );
			this.vscroll.graphics.lineTo( this.width - this.scrollBarOffset,
				                          this.scrollBarPadding + ( pct_offset * thumb_range ) + bar_size );
			this.vscroll.graphics.endFill();
		}
		
		//////////////////////////////////////////////////////////////////////////////////////////////////////
		private function updateHorizontalScroll() : void
		{
			if( this.direction == ScrollDirection.VERTICAL )return;
			
			var pct_wd         : Number = this.width / this.container.width;
			var pct_offset     : Number = ( -1.0 * this.container.x ) / this.x_content_range;
			var max_bar_width  : Number = this.width- (2*this.scrollBarPadding );
			var bar_size       : Number = Math.max( 20, pct_wd * max_bar_width );
			var thumb_range    : Number = max_bar_width - bar_size;

			// update graphical thumb
			this.hscroll.graphics.clear();
			this.hscroll.graphics.lineStyle( this.scrollBarThickness, this.scrollBarColor, this.scrollBarAlpha );
			this.hscroll.graphics.moveTo(   this.scrollBarPadding + ( pct_offset * thumb_range ),
											this.height - this.scrollBarOffset );
			this.hscroll.graphics.lineTo(   this.scrollBarPadding + ( pct_offset * thumb_range ) + bar_size,
											this.height - this.scrollBarOffset );
			this.hscroll.graphics.endFill();
		}
		
		//////////////////////////////////////////////////////////////////////////////////////////////////////
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			if( this.showBorder )
			{
				this.graphics.clear();
				this.graphics.lineStyle( this.borderThinkness, this.borderColor );
				this.graphics.drawRect( 0, 0, unscaledWidth, unscaledHeight );
				this.graphics.endFill();
			}
			
			//
			// update geometry of mask
			//
			this.cmask.graphics.clear();
			this.cmask.graphics.beginFill( 0x000000 );
			this.cmask.graphics.drawRect( 0, 0, unscaledWidth-1, unscaledHeight-1 );
			this.cmask.graphics.endFill();

			//
			// get geometry of contained object
			//
			if( this.container != null )
			{
			  this.x_content_range = this.container.width - unscaledWidth;
			  this.y_content_range = this.container.height - unscaledHeight;
			}

			//
			// update scroll bars if either component size has changed
			//
			this.updateVerticalScroll();
			this.updateHorizontalScroll();
		}
	}
}

[georg22]

Wow, its like christmas today

Thanks!

I tried the class but did not work out of the box: 

_scrollContainer = new ScrollView();
_scrollContainer.setActualSize(600, 600);
_scrollContainer.setContents(new TableComponent());
this.addChild(_scrollContainer);

Box and content appears but it doesnt scroll...

But thanks, i will find my mistake for sure tomorrow - its already late in Europe...

[dmalik]

Hey Guys,

Just catching up from vacation and see that this has become a hot topic. Thanks John for providing the sample. I'll make sure that the SDK team is aware of this and get some samples and a fix if needed.

Regards,
Dustin

[jtegen]

Create a member variable for your TableComponent.
Set the Actula size of it (assume to be larger than the scroll view).

[dmalik]

I can confirm that a bug has been filed for this from someone internally. I have made it public here - https://www.blackberry.com/jira/browse/BBTEN-253 

Regards,

Dustin

[georg22]

Yeeeeees, it works now. And it works great. Thanks jtegen.

[dbigham]

Although I had a form of scrolling working with a previous SDK, it's again not working. Good grief, it's November and scrolling isn't working yet?

And the ticket filed two months ago:

https://www.blackberry.com/jira/browse/BBTEN-253

... doesn't have any comments.

[dmalik]

I took the original posters code and tweaked it a bit. I added an Event.ADDED_TO_STAGE listener. I also added a row layout, some detection to see if its portrait or landscape, and a function to auto resize the stage. Sorry it took me so long to get a sample to you guys . I'm learning as I go.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.StageOrientation;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	import qnx.fuse.ui.core.Container;
	import qnx.fuse.ui.listClasses.ScrollDirection;
	import qnx.fuse.ui.display.Image;
	import qnx.fuse.ui.layouts.rowLayout.RowLayout;
	
	[SWF(frameRate="60", backgroundColor="#00FF00")]
	public class ContainerDemo extends Sprite
	{
		private var container:Container;
		private var image:Image;
		
		public function ContainerDemo()
		{
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			addEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
			
		}
		
		private function handleAddedToStage(e:Event):void
		{
			doStuff();
			removeEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
			
			// stage is avail, we can now listen for events
			stage.addEventListener( Event.RESIZE, onResize );
			
			// force a resize call
			onResize(new Event(Event.RESIZE));
		}
		
		private function doStuff():void{
			//create container
			container = new Container();
			container.scrollDirection = ScrollDirection.VERTICAL;
			container.height = stage.stageHeight;
			container.width = stage.stageWidth;
			container.vScrollVisible = true;
			container.allowScrollPastEdge = true;

			//create layout
			var row:RowLayout = new RowLayout();
			container.layout = row;
			row.spacing = 5;
			row.padding = 5;
			row.debugId = "imageRow";
			
			//create image
			image = new Image();
			image.addEventListener(Event.COMPLETE, onImageLoaded);
			image.setImage("http://farm9.staticflickr.com/8068/8179410953_026d0ba7d3_k.jpg");
			
			//add container to stage
			this.addChild(container);
		}
		
		protected function onImageLoaded(event:Event):void
		{
			//add image to container
			container.addChild(image);
		}
		
		private function onResize(event:Event):void
		{
			
			//portrait
			if ( stage.stageHeight > stage.stageWidth ) {    
				
				trace("portrait mode");
				container.width = stage.stageWidth;
				container.height = stage.stageHeight;
				
				
				//landscape   
			}else{
				trace("landscape mode");				
				container.width = stage.stageWidth;
				container.height = stage.stageHeight;
				
			}
			
		}
	}
}

[dmalik]

Here is another example with a form instead of an image. It's pretty much the same. You can scroll when you rotate to landscape.

package
{
	import flash.display.Sprite;
	import flash.display.StageOrientation;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	import qnx.fuse.ui.core.Container;
	import qnx.fuse.ui.layouts.Align;
	import qnx.fuse.ui.layouts.gridLayout.GridData;
	import qnx.fuse.ui.layouts.gridLayout.GridLayout;
	import qnx.fuse.ui.listClasses.DropDown;
	import qnx.fuse.ui.listClasses.ScrollDirection;
	import qnx.fuse.ui.picker.Picker;
	import qnx.fuse.ui.text.Label;
	import qnx.fuse.ui.text.TextInput;
	import qnx.ui.data.DataProvider;
	
	[SWF(frameRate="60", backgroundColor="#FFFFFF")]
	public class FormSample extends Sprite
	{
		
		public var container:Container;
		
		public function FormSample(){
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			addEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
		}
		
		private function handleAddedToStage(e:Event):void
		{
			createContainer();
			removeEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
			// stage is avail, we can now listen for events
			stage.addEventListener( Event.RESIZE, onResize );
			// force a resize call
			onResize(new Event(Event.RESIZE));
		}
		
		private function createContainer():void
		{
			container = new Container();
			container.scrollDirection = ScrollDirection.VERTICAL;	
			container.height = stage.stageHeight;
			container.width = stage.stageWidth;
			
			var grid:GridLayout = new GridLayout();
			container.layout = grid;
			grid.spacing = 5;
			
			grid.padding = 10;
			grid.numColumns = 2;
			grid.debugId = "creditCardGrid";
			
			var titleData:GridData = new GridData();
			titleData.hSpan = 4; 
			titleData.hAlign = Align.FILL;
			titleData.vAlign = Align.END;
			
			var spacerData:GridData = new GridData();
			spacerData.hSpan = 4; 
			spacerData.preferredHeight = 20;
			
			var secPinData:GridData = new GridData();
			secPinData.hAlign = Align.BEGIN;
			secPinData.vAlign = Align.CENTER;
			secPinData.preferredWidth = 150;
			
			var textInputAlignData:GridData = new GridData();
			textInputAlignData.vAlign = Align.CENTER;
			textInputAlignData.hAlign = Align.FILL;
			textInputAlignData.preferredWidth = 200;
			
			var labelAlignData:GridData = new GridData();
			labelAlignData.hAlign = Align.END;
			labelAlignData.vAlign = Align.CENTER;
			
			var ccSpacer:Label = new Label();
			ccSpacer.layoutData = spacerData;
			
			var ccInfoLabel:Label = new Label();
			ccInfoLabel.text = "Credit Card Information";
			ccInfoLabel.layoutData = titleData;
			container.addChild(ccInfoLabel);
			
			var ccInfoFNameLabel:Label = new Label();
			ccInfoFNameLabel.text = "FIRST NAME";
			ccInfoFNameLabel.layoutData = labelAlignData;
			container.addChild(ccInfoFNameLabel);
			
			var ccInfoFNameInput:TextInput = new TextInput();
			ccInfoFNameInput.layoutData = textInputAlignData;
			container.addChild(ccInfoFNameInput);
			
			var ccInfoLNameLabel:Label = new Label();
			ccInfoLNameLabel.text = "LAST NAME";
			ccInfoLNameLabel.layoutData = labelAlignData;
			container.addChild(ccInfoLNameLabel);
			
			var ccInfoLNameInput:TextInput = new TextInput();
			ccInfoLNameInput.layoutData = textInputAlignData;
			container.addChild(ccInfoLNameInput);
			
			var ccInfoCCTypeLabel:Label = new Label();
			ccInfoCCTypeLabel.text = "CARD TYPE";
			ccInfoCCTypeLabel.layoutData = labelAlignData;
			container.addChild(ccInfoCCTypeLabel);
			
			var arrCards:Array=[];
			arrCards.push({label: "VISA"});
			arrCards.push({label: "MasterCard"});
			var ccInfoCCTypeDropDown:DropDown = new DropDown();		
			ccInfoCCTypeDropDown.dataProvider = new DataProvider(arrCards);
			ccInfoCCTypeDropDown.measureContents = true;
			
			ccInfoCCTypeDropDown.layoutData = textInputAlignData;
			container.addChild(ccInfoCCTypeDropDown);
			
			var ccInfoCardNumberLabel:Label = new Label();
			ccInfoCardNumberLabel.text = "CARD NUMBER";
			ccInfoCardNumberLabel.layoutData = labelAlignData;
			container.addChild(ccInfoCardNumberLabel);
			
			var ccInfoCardNumberInput:TextInput = new TextInput();
			ccInfoCardNumberInput.layoutData = textInputAlignData;
			container.addChild(ccInfoCardNumberInput);
			
			var ccInfoCCExp:Label = new Label();
			ccInfoCCExp.text = "EXPIRATION";
			ccInfoCCExp.layoutData = labelAlignData;
			container.addChild(ccInfoCCExp);
			
			{
				var expComp:Container = new Container();
				var expGrid:GridLayout = new GridLayout();
				expGrid.hAlign = Align.FILL;
				expComp.layout = expGrid;
				expGrid.numColumns = 0;
				expGrid.spacing = 5;
				
				var arrMonths:Array=[];
				arrMonths.push({label: "1"});
				arrMonths.push({label: "2"});
				arrMonths.push({label: "3"});
				arrMonths.push({label: "4"});
				arrMonths.push({label: "5"});
				arrMonths.push({label: "6"});
				arrMonths.push({label: "7"});
				arrMonths.push({label: "8"});
				arrMonths.push({label: "9"});
				arrMonths.push({label: "10"});
				arrMonths.push({label: "11"});
				arrMonths.push({label: "12"});
				var months:DataProvider = new DataProvider(arrMonths);
				
				var arrYears:Array=[];
				arrYears.push({label: "2013"});
				arrYears.push({label: "2014"});
				arrYears.push({label: "2015"});
				arrYears.push({label: "2016"});
				arrYears.push({label: "2017"});
				arrYears.push({label: "2018"});
				arrYears.push({label: "2019"});
				arrYears.push({label: "2020"});
				arrYears.push({label: "2021"});
				arrYears.push({label: "2022"});
				arrYears.push({label: "2023"});
				arrYears.push({label: "2024"});
				arrYears.push({label: "2025"});
				arrYears.push({label: "2026"});
				var years:DataProvider = new DataProvider(arrYears);
				
				var expData:DataProvider = new DataProvider();
				expData.addItem(months);
				expData.addItem( years );
				
				var expPicker:Picker = new Picker();
				expPicker.dataProvider = expData;
				expPicker.prompt = "Month/Year";
				expComp.addChild( expPicker );
				expPicker.valueFunction = function(selectedItems:Array):String {
					return selectedItems[0]['label'] + "/" + selectedItems[1]['label'];
				};
				
				
				container.addChild(expComp);
			}
			
			var ccInfoSecPinLabel:Label = new Label();
			ccInfoSecPinLabel.text = "SECURITY PIN";
			ccInfoSecPinLabel.layoutData = labelAlignData;
			container.addChild(ccInfoSecPinLabel);
			
			var ccInfoSecPinInput:TextInput = new TextInput();
			ccInfoSecPinInput.layoutData = secPinData;
			container.addChild(ccInfoSecPinInput);
			
			ccSpacer = new Label();
			ccSpacer.layoutData = spacerData;
			container.addChild(ccSpacer);			
			
			var ccAddrLabel:Label = new Label();
			ccAddrLabel.text = "Credit Card Billing Address";
			ccAddrLabel.layoutData = titleData;
			container.addChild(ccAddrLabel);
			
			var ccAddrStreetLabel:Label = new Label();
			ccAddrStreetLabel.text = "STREET ADDRESS";
			ccAddrStreetLabel.layoutData = labelAlignData;
			container.addChild(ccAddrStreetLabel);
			
			var ccAddrStreetInput:TextInput = new TextInput();
			ccAddrStreetInput.layoutData = textInputAlignData;
			container.addChild(ccAddrStreetInput);
			
			var ccAddrCityLabel:Label = new Label();
			ccAddrCityLabel.text = "CITY";
			ccAddrCityLabel.layoutData = labelAlignData;
			container.addChild(ccAddrCityLabel);
			
			var ccAddrCityInput:TextInput = new TextInput();
			ccAddrCityInput.layoutData = textInputAlignData;
			container.addChild(ccAddrCityInput);
			
			var ccAddrCountryLabel:Label = new Label();
			ccAddrCountryLabel.text = "COUNTRY";
			ccAddrCityLabel.layoutData = labelAlignData;
			container.addChild(ccAddrCountryLabel);
			
			var arrCountries:Array=[];
			arrCountries.push({label: "Canada"});
			arrCountries.push({label: "Madagascar"});
			var ccAddrCountriesDropDown:DropDown = new DropDown();
			ccAddrCountriesDropDown.dataProvider = new DataProvider(arrCountries);
			
			ccAddrCountriesDropDown.layoutData = textInputAlignData;
			container.addChild(ccAddrCountriesDropDown);
			
			var ccAddrStreet2Label:Label = new Label();
			ccAddrStreet2Label.text = "POSTAL/ZIP CODE";
			ccAddrStreet2Label.layoutData = labelAlignData;
			container.addChild(ccAddrStreet2Label);
			
			var ccAddrStreet2Input:TextInput = new TextInput();
			ccAddrStreet2Input.layoutData = textInputAlignData;
			container.addChild(ccAddrStreet2Input);
			
			this.addChild(container);
			
		}
		
		private function onResize(event:Event):void
		{
			
			//portrait
			if ( stage.stageHeight > stage.stageWidth ) {    
				
				trace("portrait mode");
				container.width = stage.stageWidth;
				container.height = stage.stageHeight;
				
				
				//landscape   
			}else{
				trace("landscape mode");				
				container.width = stage.stageWidth;
				container.height = stage.stageHeight;
				
			}
			
		}
		
	}
}