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="" />
<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]]On
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="" />
<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
NOTICE:
This message is for the designated recipient only and may
contain privileged or confidential information. If you have received it in
error, please notify the sender immediately and delete the original. Any
other use of this e-mail by you is prohibited.
--
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
