4 Replies Latest reply on Sep 17, 2008 9:38 AM by Newsgroup_User

    Screen resolution problem for components in a canvas

    Pavan Neeli
      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
        • 1. Screen resolution problem for components in a canvas
          EvolvedDSM Level 2
          There's a few things to note here:

          1) using fixed dimensions such as width=200, height=300 will be affected by changing resolutions. No matter what your resolution is, the objects that have fixed dimensions will always stay the same size.

          2) using dynamic dimensions such as pecentages will adjust the size of your application and/or components according to the percent you set against the size of the screen.

          3) If you mix fixed and dynamic dimensions, you will have layout issues if the size of the application changes from the size that the application was designed for. for instance, if your development PC uses 1024x768 resolution to develop an application, your components will be fine when viewing your application on PC's with 1024x768. However, if a PC has 800x600 resolution, they will then see layout issues because the fixed dimensions you've set in your application are going to appear bigger on a smaller resolution.

          The best practice for web apps is to set your application without dimensions and specify all your components by percentages. This way, regardless of the size of the screen you are viewing the app, the app will adjust the dimensions of all your containers and controls according to the screen size.

          Now obviously if the legend of your application is a fixed width and height, then this will need to change. If the legend is just a container with some controls in it, you could probably just leave the W and H blank and the container will automatically adjust to the size of the controls within it.
          • 2. Re: Screen resolution problem for components in a canvas
            Pavan Neeli Level 1
            Hi EvolvedDSM,
            Thanks for your reply.
            I am using dimensions in percentages only, but the issue is with X & Y values.
            My legend is just below to the chart, and I gave width & height in percentages for both chart and legend.
            I gave X & Y values in fixed number like x="618" and y="67".
            Now when I resize the window, or increase the resolution, the legend is coming in the chart.

            Could you please help in giving x & y values sothat alignmenet of components will be shown irrespective of the resolution or screen size.

            Thanks in advance.

            Regards
            Pavan Neeli
            • 3. Re: Screen resolution problem for components in a canvas
              Level 7

              "Pavan Neeli" <webforumsuser@macromedia.com> wrote in message
              news:garamu$5e5$1@forums.macromedia.com...
              > Hi EvolvedDSM,
              > Thanks for your reply.
              > I am using dimensions in percentages only, but the issue is with X & Y
              > values.
              > My legend is just below to the chart, and I gave width & height in
              > percentages
              > for both chart and legend.
              > I gave X & Y values in fixed number like x="618" and y="67".
              > Now when I resize the window, or increase the resolution, the legend is
              > coming
              > in the chart.
              >
              > Could you please help in giving x & y values sothat alignmenet of
              > components
              > will be shown irrespective of the resolution or screen size.

              Use constraints to position it relative to the containing canvas and the
              chart.

              HTH;

              Amy


              • 4. Screen resolution problem for components in a canvas
                EvolvedDSM Level 2
                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.