Hi Shaun, Last year I lead a project, for a major on-line ticket company, which is currently being used to select and sell seats to sporting events. The approach used there, was to maintain all of the seats in a single array (ArrayCollection). Each seat has a unique id field; so that updating the server and checking availability was simplified. In order to know where the seats were located, in relationship to each other, a reference x/y point was used to position (draw) each individual seat. This reference point was contained in the data. For each seat, a custom UIComponent was drawn on the seat-map canvas; when the data was returned from the server. This allowed for easy manipulation of the seat's state; for user interactions like mouse over and select. This approach also allows the client to easily customize the layout of the seat-maps; in a wysiwyg venue builder application. Hope that this gives you some ideas.
-TH --- In [email protected], "smccran" <[EMAIL PROTECTED]> wrote: > > 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> >
