RE: [flexcoders] Layout problems in Flex 2

2005-10-24 Thread Merrill, Jason










Thanks Andreas, Ill have a look at
your code. On Friday I ended up positioning the Tile area with hard coded X
and Y values (not desirable, but it works) so that it starts below the title
bar. Thanks for the help!



Jason
Merrill | E-Learning Solutions |
icfconsulting.com 






















From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf Of Andreas Weber
Sent: Sunday, October 23, 2005
6:04 AM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Layout
problems in Flex 2





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=Hello /
/mx:Panel
/mx:Repeater
/mx:Tile
/mx:Canvas
/mx:Application


-Original Message-
From: flexcoders@yahoogroups.com
[mailto:flexcoders@yahoogroups.com]On
Behalf Of Merrill, Jason
Sent: Friday, October 21, 2005 9:24 PM
To: flexcoders@yahoogroups.com
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
t

RE: [flexcoders] Layout problems in Flex 2

2005-10-23 Thread Andreas Weber
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=Hello /
/mx:Panel
/mx:Repeater
/mx:Tile
/mx:Canvas
/mx:Application


 -Original Message-
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
Behalf Of Merrill, Jason
Sent: Friday, October 21, 2005 9:24 PM
To: flexcoders@yahoogroups.com
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