Code sample: Create a GridLayout

The code sample below outlines how to create a simple credit card form using the GridLayout method.

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(height="600", width="1024", frameRate="30",
     backgroundColor="#FFFFFF")]
	public class CreditCardForm extends Sprite
	{
		
		public var container:Container;
		
		public function CreditCardForm(){
			
			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.prompt = "Select Card";
			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.prompt = "Canada";
			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;
								
			}
		}
	}
}
comments powered by Disqus