And as Amy points out, Repeater can use the x,y coordinates to draw the seat components in their correct positions, without the weight of the Grid container.
An pay attention to what Tim says: " For each seat, a custom UIComponent". Do that, do not attempt to code the repeated elements in line. Pass a reference to the entire currentItem into that component and let it set its position. Tracy ________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tim Hoff Sent: Monday, August 18, 2008 11:47 AM To: [email protected] Subject: [flexcoders] Re: Multiple arrays? 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> >
