Hi Jason, good to see you around here too! This is all very new to me too, but as far as I see the Tile acts very much like a very basic HTML table in which cells cannot be merged: basically all cells in a row have the same height and all cells in a column have the same width - as a result the Tile will work best when used for items with a certain similarity in size.
In your example the first element in the Tile is the ControlBar which spreads over the entire width of the base canvas - if the Tile can 'flow naturally' it will in this case consist of 3 rows and only 1 column - this according to the 'law' that all cells in a column have the same width. Now the Tile allows us to change the 'natural flow' - e.g. by setting the tileWidth property (as you do). This will make that the cell size will not adapt to the size of the element inside but will crop it to the given value: panels will appear on top of the ControlBar, left edge of the first one at x=200, the second one at x=400, as the tileWidth is set to 200. To avoid this, I'd suggest to remove the ControlBar from the Tile: it's probably just too wide and dissimilar to give good results. In this scenario it is not necessary to set the tileWidth: this has the advantage that the Tile Layout will adapt automatically when the panels change size. See code below. hth Andreas Weber <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml"; xmlns=" *" backgroundColor=" 0xF4F4F4" creationComplete="init();"> <mx:Script> <![CDATA[ private function init():Void { dataService.send(); } [Bindable] public var selectedItem:Object ]]> </mx:Script> <mx:HTTPService id="dataService" resultFormat=" object" url="data/dashboard.xml" /> <mx:Canvas width="812" height="100% " fillColors="[0xFCF395, 0xFCF395]" themeColor="haloSilver" > <mx:Image id="logo" source="assets/afdwLogo.jpg " alpha="1" x="0" y=" 0" width="810"/> <mx:ApplicationControlBar width="810" height=" 49" cornerRadius="5" fillColors="[0xF0DF31, 0xFCF395]" alpha=" 1" x="0" y="67" > <mx:Repeater id="r" dataProvider="{ dataService.result.dashboard.menu.menuItem}" startingIndex="0" > <mx:Spacer width="10"/> <mx:Label id="nameLabel" text="{ r.currentItem.label}"/> <mx:Spacer width="10"/> <mx:VRule height="10"/> </mx:Repeater> <mx:Spacer width="10"/> <mx:Text width="130" text="{ [EMAIL PROTECTED]"/> <mx:ComboBox dataProvider="{dataService.result.dashboard.locations.site }" width="150" change="selectedItem=ComboBox(event.target).selectedItem"/> </mx:ApplicationControlBar> <mx:Tile id="myFlow" marginTop="119 " marginBottom="0" marginRight="0" marginLeft=" 0" verticalGap="10" horizontalGap="10" width=" 100%"> <mx:Repeater y="150" id="panels_r " dataProvider="{dataService.result.dashboard.categories.category}" startingIndex=" 0"> <mx:Panel width="200" height="200 " fillColors="[0xF0DF31, 0xFCF395]" title="{panels_r.currentItem.label }" > <mx:Text text="Hellooooo" /> </mx:Panel> </mx:Repeater> </mx:Tile> </mx:Canvas> </mx:Application> -----Original Message----- From: [email protected] [mailto:[EMAIL PROTECTED] Behalf Of Merrill, Jason Sent: Friday, October 21, 2005 9:24 PM To: [email protected] Subject: [flexcoders] Layout problems in Flex 2 Getting to know Flexbuilder 2. Having problems getting my panels to lay out right in a tiled area. See: http://cmt.icfconsulting.com/temp/AFDW/AFDWTOC.swf I would like the panels to be left-justified and below the application bar. My script follows. The problem begins in line 36 where the panel repeater starts. Any help is much appreciated. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml"; xmlns="*" backgroundColor="0xF4F4F4" creationComplete="init();"> <mx:Script> <![CDATA[ private function init():Void{ dataService.send(); } [Bindable] public var selectedItem:Object ]]> </mx:Script> <mx:HTTPService id="dataService" resultFormat="object" url="data/dashboard.xml" /> <mx:Canvas width="812" height="100%" fillColors="[0xFCF395, 0xFCF395]" themeColor="haloSilver"> <mx:Image id="logo" source="assets/afdwLogo.jpg" alpha="1" x="0" y="0" width="810"/> <mx:Tile id="myFlow" marginTop="65" marginBottom="0" marginRight="0" marginLeft="0" verticalGap="10" horizontalGap="10" width="100%" tileWidth="200"> <mx:ApplicationControlBar width="810" height="49" cornerRadius="5" fillColors="[0xF0DF31, 0xFCF395]" alpha="1" x="0" y="100"> <mx:Repeater id="r" dataProvider="{dataService.result.dashboard.menu.menuItem}" startingIndex="0"> <mx:Spacer width="10"/> <mx:Label id="nameLabel" text="{r.currentItem.label}"/> <mx:Spacer width="10"/> <mx:VRule height="10"/> </mx:Repeater> <mx:Spacer width="10"/> <mx:Text width="130" text="[EMAIL PROTECTED]"/> <mx:ComboBox dataProvider="{dataService.result.dashboard.locations.site}" width="150" change="selectedItem=ComboBox(event.target).selectedItem"/> </mx:ApplicationControlBar> <mx:Repeater y="150" id="panels_r" dataProvider="{dataService.result.dashboard.categories.category}" startingIndex="0"> <mx:Panel width="200" height="200" fillColors="[0xF0DF31, 0xFCF395]" title="{panels_r.currentItem.label}" > <mx:Text text="Hellooooo" /> </mx:Panel> </mx:Repeater> </mx:Tile> </mx:Canvas> </mx:Application> Jason Merrill | E-Learning Solutions | icfconsulting.com ------------------------ Yahoo! Groups Sponsor --------------------~--> Get Bzzzy! (real tools to help you find a job). Welcome to the Sweet Life. http://us.click.yahoo.com/A77XvD/vlQLAA/TtwFAA/nhFolB/TM --------------------------------------------------------------------~-> -- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/flexcoders/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
