7 Replies Latest reply on Jun 30, 2010 6:58 AM by David_F57

    List itemRenderer text position

    Francisc Level 3

      Hello!

      I have a list as depicted in the attached file.

      The Image container has a max with and max height set to 100 and maintain the aspect ratio.

      The first 10 are 100x75 because they are wide and it all looks good.

      However, the last one which is square and so 100x100, overlaps the text.

       

      If I was to set the text y right after the image ends, it would look bad for the first 10 images as the space would be too large.

       

      I tried setting the text y to be imageContainer.contentHeight, but that doesn't work.

       

      What would you do?

       

      Thanks!

       

      list-problem.jpg

        • 1. Re: List itemRenderer text position
          rootsounds Level 4

          The labels should all line up for a clean presentation. I would restrict the height of the Images so that they are consistent. The width therefore may not be consistent, so the image and label should be centered in a container with a fixed width.

          • 2. Re: List itemRenderer text position
            BhaskerChari Level 4

            Hi M*A*S*H 4077,

             

            Try to use the <mx:VBox/> as  the root tag for your ListItemRenderer...so that you dont need to set the y value for the text and it will automaticall handle the layout positioning for the text below the Image...

             

            Also set the variableRowHeight property to true in your List component...

             

            Your Component should look something like below:

            <mx:VBox verticalGap="10">

                 <mx:Image id="img" source="image.png"/>

                 <mx:Label text="some text"/>

            </mx:VBox>

             

            Thanks,

            Bhasker Chari

            • 3. Re: List itemRenderer text position
              Francisc Level 3

              The VBox thing would just create too high a space between image and label for the first 10 images as I wrote in the initial post.

               

              The variable width? I don't understand. The with is a max 100 which will automatically do that to wide pictures.

               

              Only think I can think of that would work is to create a 100x100 mask for the scaled image.

              • 4. Re: List itemRenderer text position
                David_F57 Level 5

                hi,

                 

                This is one possible compromise solution, portrait would show in full, square would show in full, landscape would be left and write cropped, you could play with ratio's to what you feel is the best balance. At least the text will always align.

                 

                I did this another way once by creating a polaroid style container for the images so that the title had a nice wrappable area and the rest dealt with the 'white' image frame varying to suit the image aspect.

                 

                David

                 

                <?xml version="1.0" encoding="utf-8"?>

                <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                xmlns:s="library://ns.adobe.com/flex/spark"

                xmlns:mx="library://ns.adobe.com/flex/mx"

                width="100" height="120">

                 

                <fx:Script>

                <![CDATA[

                 

                import mx.core.DragSource;

                import mx.events.DragEvent;

                import mx.managers.DragManager;

                 

                [Bindable("dataChanged")]

                override public function set data(value:Object):void

                {

                img.addEventListener(Event.COMPLETE, sizeRender);

                img.load(value.img);

                lbl.text = value.lbl;

                }

                 

                private function sizeRender(e:Event): void

                {

                var ar: Number = img.content.width/img.content.height;

                img.width = 80*ar;

                }

                 

                protected function img_mouseDragHandler(event:MouseEvent):void

                {

                var target:Image = Image(event.currentTarget);

                var sourceObject:Object = new Object();

                sourceObject.width = img.content.width;

                sourceObject.height = img.content.height;

                sourceObject.img = img.source;

                var dragSource:DragSource = new DragSource();

                dragSource.addData( sourceObject, "image" );

                mx.managers.DragManager.doDrag( target, dragSource, event, null , -0, -0, 0.40, true );

                }

                 

                ]]>

                </fx:Script>

                 

                <s:Group id="contentGroup" top="0" left="0" bottom="0" right="0" clipAndEnableScrolling="true">

                <mx:Image id="img" top="0" bottom="20" scaleContent="true" maintainAspectRatio="false"

                  horizontalCenter="0"/>

                <s:Label id="lbl" left="0" right="0" bottom="0" textAlign="center"/>

                </s:Group>

                 

                </s:ItemRenderer>

                • 5. Re: List itemRenderer text position
                  David_F57 Level 5

                  hi,

                   

                  Here is a test app you can use to load images and 'play' with the renderer.

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                  <fx:Script>

                  <![CDATA[

                  import mx.controls.Image;

                  import spark.events.IndexChangeEvent;

                  import mx.managers.DragManager;

                  import mx.events.DragEvent;

                  import mx.events.EffectEvent;

                  import mx.events.FlexEvent;

                  import mx.collections.ArrayCollection;

                   

                  [Bindable] private var ImageCollection: ArrayCollection = new ArrayCollection();

                   

                  private var fl:FileReferenceList=new FileReferenceList();

                  private var fr:FileReference = new FileReference();

                  private var ImageCount: int; 

                  private var ImageLoop : int;

                   

                  private function loadImages(): void

                  {

                  fl.addEventListener(Event.SELECT, selectedImages);

                  var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");

                  fl.browse([imagesFilter]);

                  }

                   

                  private function selectedImages(e:Event): void

                  {

                  fl.removeEventListener(Event.SELECT, selectedImages);

                  ImageCount = fl.fileList.length;

                  ImageLoop  = 0;

                  loopList(0);

                  }

                   

                  private function loopList(value:int): void

                  {

                  if (value < ImageCount)

                  {

                  fr = fl.fileList[value];

                  fr.addEventListener(Event.COMPLETE,getImage);

                  ImageLoop = ImageLoop+1;

                  fr.load();

                  }

                  else

                  {

                  imgList.dataProvider = null;

                  imgList.dataProvider = ImageCollection;

                  }

                  }

                   

                  private function getImage(e:Event): void

                  {

                  fr.removeEventListener(Event.COMPLETE, getImage);

                  if (fr.data.length > 0)

                  {

                  var newData:Object = {

                  img: fr.data,

                  lbl: fr.name

                  }

                  ImageCollection.addItem(newData);

                  }

                  loopList(ImageLoop);

                  }

                   

                  ]]>

                   

                  </fx:Script>

                  <s:List id="imgList" x="116" y="76" width="835" height="542" dataProvider="{ImageCollection}" itemRenderer="ImageRender">

                  <s:layout>

                  <s:TileLayout horizontalGap="3" verticalGap="3"/>

                  </s:layout>

                  </s:List>

                  <s:Button x="116" y="35" label="Button" click="loadImages()"/>

                  </s:Application>

                  1 person found this helpful
                  • 6. Re: List itemRenderer text position
                    Francisc Level 3

                    Thank you, David!

                     

                    [The AMF problem is still not sorted. They are working on it...]

                    • 7. Re: List itemRenderer text position
                      David_F57 Level 5

                      hi,

                       

                      No prob...:)

                       

                      Just a quicknote I was fiddling with the renderer widths/heights before I posted, in the calculation it should be 100 not 80*ar.

                       

                      You might like a component i'm working on which is a variable width tilelist, idea being that each item has a fixed height but the width changes to suite the image aspect. sort of like i did here for horizontal list

                       

                      http://gumbo.flashhub.net/pagedrop/

                       

                      Trouble is its a lot more complex for tilelist as you cant do variable widths...... yet .

                       

                      Must be a pain with the hosting issues(i'm dealing with my own hosting problems at the moment )

                       

                      David