Hi all, I'm trying to produce a booking form, where users can select their seat. The seats are laid out in a square. I'm currently doing this with 4 arrays, one for each side of the square. This is proving very complicated tho, as I have a remote object from a cfc returning the results from all 4 arrays, and its proving a nightmare to map the results back to the images? (full code below.
Anyone have any thoughts on how they would approach this? Thanks Shaun -------- <?xml version="1.0"?> <!-- Simple example to demonstrate the Repeater class. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" backgroundColor="#000000" backgroundGradientColors="[#222222, #222222]" creationComplete="init ()"> <mx:Style source="style.css" /> <mx:Script> <![CDATA[ import mx.formatters.CurrencyFormatter; import mx.controls.FormItemLabel; import mx.rpc.events.ResultEvent; import mx.controls.Alert; [Bindable] private var glowTarget:*; [Bindable] private var topRow:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; [Bindable] private var rightCol:Array = [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]; [Bindable] private var bottomRow:Array = [33, 32, 31, 30, 29, 28, 27, 26, 25, 24, 23]; [Bindable] private var leftCol:Array = [44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34]; private var _ukFormatter:CurrencyFormatter; private function init():void { seatsManager.getAllSeats(); // hide all the elements resUserName.visible = false resButton.visible = false reserved.visible = false reserved2.visible = false reserved3.visible = false createAccountButton.visible = false reserveLabel.visible = false reservedText1.visible = false reservedText2.visible = false payLabel.visible = false payText1.visible = false priceText.visible = false payButton.visible = false } private function changeDisplay(event:Event):void { var chosenSeatNo:String = event.currentTarget.getRepeaterItem(); //Alert.show(String (event.currentTarget.getRepeaterItem())); // build the txt strings centerLabel.text = 'Seat No. ' + chosenSeatNo; payLabel.text = 'Pay for Seat No. ' + chosenSeatNo; reserveLabel.text = 'Reserve Seat No. ' + chosenSeatNo; // control glow of buttons glowImage.end(); glowTarget = event.currentTarget; glowImage.target = glowTarget; glowImage.play(); // do function call seatsManager.getChosenSeat (chosenSeatNo) } private function handleFetchResult(event:ResultEvent):void { var seatNo:String = String (event.result.intSeatNumber); var intId:String = String(event.result.intId); var intPrice:String = String(event.result.intPrice); var intReserved:Boolean = event.result.intReserved; var usr_alias:String = event.result.usr_alias; var intPaid:Boolean = event.result.intPaid; _ukFormatter = new CurrencyFormatter (); _ukFormatter.currencySymbol = "£"; _ukFormatter.precision = 2; _ukFormatter.decimalSeparatorFrom = "."; _ukFormatter.decimalSeparatorTo = "."; _ukFormatter.useNegativeSign = true; _ukFormatter.useThousandsSeparator = true; _ukFormatter.alignSymbol = "left"; intPrice = _ukFormatter.format (intPrice); priceText.text = 'Price for this seat is ' + intPrice; //seat is already paid for if (intPaid) { // change values of text thats visible reserved.text = 'This seat is unavailable.' reserved2.text = 'It has been booked by ' + usr_alias; reserved.visible = true reserved2.visible = true // set other elements to hidden reserved3.visible = false resUserName.visible = false resButton.visible = false createAccountButton.visible = false payLabel.visible = false payText1.visible = false payButton.visible = false reserveLabel.visible = false reservedText1.visible = false reservedText2.visible = false priceText.visible = false } // not paid for else { // if reserved if (intReserved) { // change text reserved.text = 'This seat is reserved by ' + usr_alias; reserved2.text = 'This reservation can be removed, if you book this place now!' // show elements reserved.visible = true // hide reservation options reserveLabel.visible = false reservedText1.visible = false reservedText2.visible = false resUserName.visible = false } // not reserved else { reserved.text = 'This seat is available, you can reserve it, or book it.' reserved2.text = 'You must have an account to do this.' // show all elements resUserName.visible = true resButton.visible = true reserved.visible = true reserved2.visible = true reserved3.visible = true createAccountButton.visible = true reserveLabel.visible = true reservedText1.visible = true reservedText2.visible = true payLabel.visible = true payText1.visible = true priceText.visible = true payButton.visible = true } } } private function handleAllResult(event:ResultEvent):void { var result:Array = event.result as Array; /* Create a new object */ var UpdateVO:Object = new Object(); /* Create an array to house the objects */ var UpdateResult:Array = new Array(); /* Loop over result array and populate new array with objects */ for(var i:int=0; i < result.length; i++){ UpdateVO = result[i]; trace(i) trace("no= " + UpdateVO.intSeatNumber + "reserved=" + UpdateVO.intReserved) if (UpdateVO.intReserved == 1) { topImage [UpdateVO.intSeatNumber] = "assets/reserved.gif"; trace(topImage [UpdateVO.intSeatNumber]) } else { topImage [UpdateVO.intSeatNumber].source = "assets/pc.gif"; } //x[UpdateVO.intSeatNumber-1].toolTip = "Seat reserved, buy now to secure it."; // leftImage[UpdateVO.intSeatNumber- 1].source = "assets/reserved.gif"; /* if (UpdateVO.intPaid == 1) { topImage [UpdateVO.intSeatNumber].source = "assets/paidfor.gif"; topImage [UpdateVO.intSeatNumber].toolTip = "Seat Booked"; } else { if (UpdateVO.intReserved == 1) { trace (UpdateVO.intSeatNumber, UpdateVO.intReserved) topImage [UpdateVO.intSeatNumber-1].source = "assets/reserved.gif"; topImage [UpdateVO.intSeatNumber-1].toolTip = "Seat reserved, buy now to secure it."; } } */ //UpdateResult.push(UpdateVO); } } ]]> </mx:Script> <mx:RemoteObject destination="ColdFusion" id="seatsManager" fault="Alert.show (event.fault.message)" source="langame.seats" showBusyCursor="true"> <mx:method name="getAllSeats" result="handleAllResult (event)" fault="Alert.show(event.fault.message)"/> <mx:method name="getChosenSeat" result="handleFetchResult (event)" fault="Alert.show(event.fault.message)"/> </mx:RemoteObject> <!-- Glow effect --> <mx:Glow id="glowImage" blurXFrom="15.0" blurXTo="15.0" blurYFrom="15.0" blurYTo="15.0" duration="2000" repeatCount="0" color="0xFF0000" /> <!-- Holding canvas --> <mx:Canvas x="10" y="10" width="1000" height="780"> <!-- top row --> <mx:HBox x="10" y="10"> <mx:Repeater id="top" dataProvider="{topRow}"> <!-- <mx:Button height="49" width="50" label="{String(rp.currentItem)}" click="Alert.show(String (event.currentTarget.getRepeaterItem()) + ' pressed')"/> --> <mx:VBox> <mx:Image id="topImage" styleName="reservedSeat" width="35" x="102" y="131" height="28" click="changeDisplay(event);" useHandCursor="true" buttonMode="true" /> <mx:Text text="Seat {top.currentItem}" /> </mx:VBox> </mx:Repeater> </mx:HBox> <!-- left col --> <mx:VBox x="10" y="70"> <mx:Repeater id="lcol" dataProvider="{leftCol}"> <mx:Image id="leftImage" styleName="reservedSeat" x="102" y="131" click="changeDisplay(event);" width="35" height="28" buttonMode="true" useHandCursor="true" /> <mx:Text text="" /><!-- text="Seat {String (lcol.currentItem)}" --> </mx:Repeater> </mx:VBox> <!-- right col --> <mx:VBox x="572" y="70"> <mx:Repeater id="rcol" dataProvider="{rightCol}"> <mx:Image id="rightImage" x="102" y="131" click="changeDisplay(event);" width="35" height="28" buttonMode="true" useHandCursor="true" /> <mx:Text text="Seat {String (rcol.currentItem)}" /> </mx:Repeater> </mx:VBox> <!-- bottom row --> <mx:HBox x="10" y="718"> <mx:Repeater id="bottom" dataProvider="{bottomRow}"> <mx:VBox x="21" y="403"> <mx:Image id="bottomImage" x="102" y="131" click="changeDisplay(event);" width="35" height="28" buttonMode="true" useHandCursor="true"/> <mx:Text text="Seat {String (bottom.currentItem)}" /> </mx:VBox> </mx:Repeater> </mx:HBox> <!-- Start of center canvas --> <mx:Canvas x="102" y="101" width="462" height="459" backgroundColor="#222222"> <mx:Label id="centerLabel" x="10" y="10" text="Select a seat to view the details about it." /> <mx:Text id="priceText" text="priceText" x="10" y="400"/> <mx:Text id="reserved" x="10" y="41" /> <mx:Text id="reserved2" x="10" y="68" /> <mx:Text id="reserved3" x="10" y="95" text="Don't have an account?"/> <mx:Button x="10" y="122" label="Create Account" id="createAccountButton"/> <mx:Label x="10" y="163" id="reserveLabel" text="reserved label"/> <mx:Text x="10" y="194" text="Reserved places are not guaranteed." id="reservedText1"/> <mx:Text x="10" y="221" text="If you want to guarantee your space, then pay for it now!" id="reservedText2"/> <mx:TextInput id="resUserName" x="10" y="248"/> <mx:Button id="resButton" x="10" y="278" label="Reserve"/> <mx:Label x="10" y="342" text="paylabel" id="payLabel"/> <mx:Text x="10" y="373" text="To guarantee your place, pay online now!" id="payText1"/> <mx:Button x="10" y="427" label="Pay online using PayPal" id="payButton"/> </mx:Canvas> </mx:Canvas> </mx:Application>
