10 Replies Latest reply on Jan 7, 2011 11:48 PM by Wrataxas

    Need help with Image component

    miguelportilla Level 1

      With the following code:

       

              <s:HGroup x="0" y="0" width="100%" height="36" paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5" verticalAlign="middle" gap="0">
                  <mx:Image source="file:/C:/image.png" height="100%" maintainAspectRatio="true"/>
                  <s:Label text="This is a test"  fontSize="24" fontWeight="bold"/>
              </s:HGroup>

       

      The source file used in the Image component is larger than the size of the parent HGroup so it is scaled down, which is what I want. But I would like the Label text to be butted up against the right side of the scaled down Image component but I end up with some space between them. I assume Flex is using the original width of the image to measure that distance. Is there a way to have Flex use the newly scaled down width instead so the the Label component is always butted up against the Image?

        • 1. Re: Need help with Image component
          saisri2k2 Level 4

          use gap=0 on the hgroup and specify width=100% height =100% on the image

          1 person found this helpful
          • 2. Re: Need help with Image component
            miguelportilla Level 1

            saisri2k2, thank you for your prompt reply but unforunately that did not work. It actually increased the spacing between the Image and Label componnents. Here is the code with your suggestions:

             

                <s:HGroup x="0" y="0" width="100%" height="36" paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5" verticalAlign="middle" gap="0">
                    <mx:Image source="file:/C:/image.png" width="100%" height="100%" maintainAspectRatio="true"/>
                    <s:Label text="This is a test"  fontSize="24" fontWeight="bold"/>
                </s:HGroup>

             

             

            • 3. Re: Need help with Image component
              saisri2k2 Level 4

              Can you post the image tha you are trying to use? if it is allowed. Im thinking that in the image, there is some transparent part whch is not allowing the button and the image to be up together.

              • 4. Re: Need help with Image component
                saisri2k2 Level 4

                give 100% on the label too, i've just checked it worked.

                • 5. Re: Need help with Image component
                  miguelportilla Level 1

                  This is the image.

                  gold_seal.png

                   

                  The following code with your suggestions produces the following output.

                   

                      <s:Group width="500">
                          <s:HGroup x="0" y="0" width="100%" height="36" paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5" verticalAlign="middle" gap="0">
                              <mx:Image source="file:/C:/image.png" width="100%" height="100%"/>
                              <s:Label text="This is a test"  fontSize="24" fontWeight="bold" height="100%" width="100%"/>
                          </s:HGroup>
                      </s:Group>

                   

                  1.jpg

                   

                   

                  • 6. Re: Need help with Image component
                    saisri2k2 Level 4

                    If you are giving a height on the hgroup, then use width on the image as well, i'v got it right when i started using the width on the image.  I'm sure the image wont be wider than the image height(i.e., the images container (hgroup's) height). so, try using  image.width = 50 atlest to get it right.

                    ..

                    • 7. Re: Need help with Image component
                      miguelportilla Level 1

                      I can specify a hard coded value for the Image width and get it close to what I want but that hack will not work for me because I use images dynamically of varying dimensions with this code, which is used as a header for a dialog.

                       

                      saisri2k2 wrote:

                       

                      I'm sure the image wont be wider than the image height(i.e., the images container (hgroup's) height).

                       

                      The image width can be larger than the Image's container height. It all depends on the aspect ratio of the bitmap. Some of the images I use have a 2:1 or greater aspect.

                       

                      There must be a way to specify the width of the Image based on the scaled version. I am thinking that something like width="{img.scaled width}" could work if I knew how to obtain the scaled width.

                       

                       

                      • 8. Re: Need help with Image component
                        miguelportilla Level 1

                        I got it working by using updateComplete="img.width=img.contentWidth;"  I pasted the final code, hopefully it helps someone else out. Thanks for all your input saisri2k2!

                         

                            <s:Group width="500">
                                <s:HGroup x="0" y="0" width="100%" height="36" paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5" verticalAlign="middle" gap="0">
                                    <mx:Image id="img" source="file:/C:/image.png" updateComplete="img.width=img.contentWidth;" height="100%"/>               
                                    <s:Label text="This is a test"  fontSize="24" fontWeight="bold" width="100%"/>
                                </s:HGroup>
                            </s:Group>

                        • 9. Re: Need help with Image component
                          miguelportilla Level 1

                          Oh no! updateComplete="{img.width=img.contentWidth}" causes a signifcant performance problem. Without it my dialogs popup instantly, with it there is a 2+ seconds pause. Any have any thoughts why?

                          • 10. Re: Need help with Image component
                            Wrataxas Level 2

                            My guess as to the time delay is that when you set img.width then Flex needs to recalculate img.contentWidth and then your binding cause img.width to be calculated again, etc.  At least I have seen that kind of problem with the widths of tabs in a TabBar.

                             

                            HGroup uses HorizontalLayout and when you give the children of HorizontalLayout a percentage width, it distributes all the extra space among the children, if I am reading the reference correctly.  So if it is increasing the children's widths to add up to the parent's 500 width, that would explain why the Label is so far from the image.