Screen resolution problem for components in a canvas

Question

Hi,
I am developing a Flex application, and I am using more than
one canvases in a single page(with in application tag).
And one canvas has elements like Chart, datagrid, legent
& a label.
Width & Height I gave to canvas and all its elements
(except legend & label) is in percentages
The problem I am facing is that,
when I change the screen resolution, and
when I press F11(full screen) in IE, the all objects except
legend & label are increasing/decreasing, and in some cases
lagend & label are overlapping in the chart & data grid.
Could anybody please advise what I need to follow to
eliminate these kind of problems.
Thanks in advance.
Pavan

Answer 1

Ooooooh, haha my bad, I didn't realize you were talking about
relative positioning on your app.
Here's what's happening. Your component/application is in
ABSOLUTE layout mode, so you can specify coordinates for where
controls and components should be placed. When the size of the
application changes, these coordinates are hard-coded, and they
will always display in the same place, which can case them to run
into components that have been resized to fit the new application
size. Now fixing those numbers is not easy. In fact, I don't know
of any way to make those numbers dynamic so they adjust when the
application size adjusts.
Instead, I suggest using constraints or Vbox/Hbox rather than
hardcoded coordinates. With constraints, you can specify how far
your Legend component is from the edges of the container it's in.
Or, you can use the VBox or HBox so your component is always in the
place it needs to be.
<mx:HBox width="80%" height="50%" top="10" left="10">
<mx:PieChart id="piechart1">
<mx:series>
<mx:PieSeries displayName="Series 1" field=""/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}"/>
</mx:HBox>
In this example, You can see I set top and left to 10. This
means that my HBox will be exactly 10 pixels from the top and left
side of my application (or container, or whatever it's confined
to). The Piechart and Legend fit neatly inside the HBox, and
because it's an HBox, they will be side by side horizontally.
If you need spacing between your chart and legend, you can
always use the Spacer control under Layout.
<mx:HBox width="80%" height="50%" top="10" left="10">
<mx:PieChart id="piechart1">
<mx:series>
<mx:PieSeries displayName="Series 1" field=""/>
</mx:series>
</mx:PieChart>
<mx:Spacer width="100%"/>
<mx:Legend dataProvider="{piechart1}"/>
</mx:HBox>
As you can see, the Spacer control is separating our chart
and the Legend by a width specified. Always use a percentage here,
as you'll run into problems I talked about in my previous post.
100% means the chart and the Legend will be as far away as they can
be while staying within the Hbox container. If you decreased it to
50%, they would only be half as far away.
Hope this helps.
EDIT:
One last example of a pie chart and a Legend within a canvas.
Each object has constraints to the canvas, which lets us put them
whereever we want within the canvas:
<mx:Canvas x="0" y="0" width="80%">
<mx:PieChart id="piechart1" left="10" top="10">
<mx:series>
<mx:PieSeries displayName="Series 1" field=""/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}" right="10"
bottom="10"/>
</mx:Canvas>
From this example, the chart will always line up to be 10
pixels from the top and left of our canvas. The Legend however,
will always line up to be 10 pixels from the right side and bottom
of our canvas. Adjusting the canvas size, the chart size, or the
legend size will give you the desired distance between these two
objects.