Creating a wizard like pop-up using Flex 4 states

States are a great concept that can really help your development process. You can apply states to all kinds of application tasks but in my example we’ll see how easy and beneficial it is to create Input Wizards. In this case states will be used control the navigation state of the wizard.

For example, in some shopping web sites it is common to find a wizard like interface that, during check-out, starts by requesting you to check and confirm the items you’re about to purchase, if not registered, it asks you to register, then requests the type of payment, the payment details, confirm the purchase.

Check-Out States

For a demo, just copy the link and paste it in your browser URL (ImageCabin does not like to be linked!)
http://www.imagecabin.com/files/2011/06/17/308324928f5558354a382aded.swf

States.mxml (Main Application)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="414" minHeight="256">

	<fx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			import mx.managers.PopUpManager;
			
			import spark.components.TitleWindow;
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				TitleWindow(PopUpManager.createPopUp(UIComponent(this), CheckoutWizard, true));
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>
	
	<s:Button label="Open Check-Out Wizard" click="button1_clickHandler(event)"/>
</s:Application>

CheckoutWizard.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="creationCompleteEventHandler(event);" 
			   close="closeEventHandler(event);" 
			   title.onConfirmProduct="Checkout Wizard Wizard: Step 1 - Confirm items for purchase"
			   title.onSelectPayment="Checkout Wizard Wizard: Step 2 - Select payment method"
			   title.onMastercard="Checkout Wizard Wizard: Step 3 - Fill in Mastercard details"
			   title.onVisa="Checkout Wizard Wizard: Step 3 - Fill in Visa details"
			   title.onPayPal="Checkout Wizard Wizard: Step 3 - Fill in PayPal details"
			   title.onConfirmPurchaseDetails="Checkout Wizard Wizard: Step 4 - Confirm Purchase"
			   width="412"
			   height="254">
	
	<s:states>
		<s:State name="onConfirmProduct"/>
		<s:State name="onSelectPayment"/>
		<s:State name="onMastercard"/>
		<s:State name="onVisa"/>
		<s:State name="onPayPal"/>
		<s:State name="onConfirmPurchaseDetails"/>
	</s:states>
	
	<fx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			
			private var selectedPayment:String = 'onMastercard';
			
			private function creationCompleteEventHandler(event:Event):void {
				PopUpManager.centerPopUp(this);
				PopUpManager.bringToFront(this);
			}
			
			public function closeEventHandler(event:Event=null):void {
				PopUpManager.removePopUp(this);
			}

			public function processPurchase():void {
				PopUpManager.removePopUp(this);
			}
			
			protected function nextStateButton_clickHandler(event:MouseEvent):void {
				switch (this.currentState) {
					case 'onConfirmProduct':
						this.currentState = 'onSelectPayment';
						break;
					case 'onSelectPayment':
						this.currentState = selectedPayment;
						break;
					case 'onMastercard':
					case 'onVisa':
					case 'onPayPal':
						this.currentState = 'onConfirmPurchaseDetails';
						break;
					case 'onConfirmPurchaseDetails':
						processPurchase();
						break;
				}	
			}

			protected function backStateButton_clickHandler(event:MouseEvent):void {
				switch (this.currentState) {
					case 'onSelectPayment':
						this.currentState = 'onConfirmProduct';
						break;
					case 'onMastercard':
					case 'onVisa':
					case 'onPayPal':
						this.currentState = 'onSelectPayment';
						break;
					case 'onConfirmPurchaseDetails':
						this.currentState = selectedPayment;
						break;
				}	
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:VerticalLayout paddingBottom="10" paddingTop="10" paddingRight="10" paddingLeft="10"
						  horizontalAlign="center"/>
	</s:layout>
	
	<s:Group width="100%" height="100%" includeIn="onConfirmProduct">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
	</s:Group>
	
	<s:Group height="100%" includeIn="onSelectPayment">
		<s:layout>
			<s:VerticalLayout verticalAlign="middle" gap="20"/>
		</s:layout>
		<s:RadioButton id="mastercard" label="Mastercard" groupName="paymentType" change="{if (mastercard.selected) this.selectedPayment = 'onMastercard'}" selected="true"/>
		<s:RadioButton id="visa" label="Visa" groupName="paymentType" change="{if (visa.selected) this.selectedPayment = 'onVisa'}"/>
		<s:RadioButton id="paypal" label="PayPal" groupName="paymentType" change="{if (paypal.selected) this.selectedPayment = 'onPayPal'}"/>
	</s:Group>
	
	<s:Group width="100%" height="100%" includeIn="onMastercard">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
	</s:Group>

	<s:Group width="100%" height="100%" includeIn="onVisa">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
	</s:Group>
	
	<s:Group width="100%" height="100%" includeIn="onPayPal">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
	</s:Group>
	
	<s:Group width="100%" height="100%" includeIn="onConfirmPurchaseDetails">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
	</s:Group>

	<s:Group width="100%">
		<s:layout>
			<s:HorizontalLayout horizontalAlign="right"/>
		</s:layout>
		<s:Button id="backStateButton" label="Back" excludeFrom="onConfirmProduct" click="backStateButton_clickHandler(event)"/>
		<s:Button id="nextStateButton" label="{(this.currentState=='onConfirmPurchaseDetails'?'Finish':'Next')}" click="nextStateButton_clickHandler(event)"/>
	</s:Group>
	
</s:TitleWindow>
Advertisements

About CrazyPenguin

Software Engineer
This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Creating a wizard like pop-up using Flex 4 states

  1. Dyego says:

    thx man

  2. This is exactly what i was looking for. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s