3 Replies Latest reply on Nov 3, 2009 8:46 PM by David_F57

    Spark list component and layout

    Rob M Love Level 1

      In playing with this component I have populated it with an item renderer that varies in its height. When running the application this gives undesired gaps between those items that are smaller than the larger items. Is there anyway to have them flow much like you would see a news articles in the paper?

       

      Thank you,

      Rob Love

        • 1. Re: Spark list component and layout
          David_F57 Level 5

          Hi,

           

          You use an item renderer to determine the height of each object then set the height before displaying. the following code adjustes a horizontal list so all heights are the same but the width varies so that all gaps a constant.

           

          The override on setdata calls the setsize routine which works out how the image is to be displayed. Hope this points you in the right direct.

           

          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/halo" width="80" height="100">

           

          <s:states>

          <s:State name="normal"/>           

          <s:State name="hovered"/>

          <s:State name="selected"/>

          <s:State name="normalAndShowsCaret"/>

          <s:State name="hoveredAndShowsCaret"/>

          <s:State name="selectedAndShowsCaret"/>

          </s:states>

           

          <fx:Script>

          <![CDATA[

           

          import mx.core.DragSource;

          import mx.managers.DragManager;

          [Bindable] private var selectionColor:uint = 0x005588;

          [Bindable] private var rollOverColor:uint = 0x0088DD;

          [Bindable] private var backgroundColor:uint = 0xFFFFFF;

           

          [Bindable("dataChanged")]

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

          {

          img.addEventListener(Event.COMPLETE, sizeRender);

          img.load(value);

          }

           

           

          private function sizeRender(e:Event): void

          {

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

          this.width = height*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:Rect left="0" right="0" top="0" bottom="0">

          <s:stroke.normalAndShowsCaret>

          <s:SolidColorStroke

          color="{selectionColor}"

          weight="1"/>

          </s:stroke.normalAndShowsCaret>

          <s:stroke.hoveredAndShowsCaret>

          <s:SolidColorStroke

          color="{selectionColor}"

          weight="1"/>

          </s:stroke.hoveredAndShowsCaret>

          <s:stroke.selectedAndShowsCaret>

          <s:SolidColorStroke

          color="{selectionColor}"

          weight="1"/>

          </s:stroke.selectedAndShowsCaret>

          <s:fill>

          <s:SolidColor

          color.normal="{backgroundColor}"

          color.normalAndShowsCaret="{backgroundColor}"

          color.hovered="{rollOverColor}"

          color.hoveredAndShowsCaret="{rollOverColor}"

          color.selected="{selectionColor}"

          color.selectedAndShowsCaret="{selectionColor}"

          />

          </s:fill>

          </s:Rect>

          <s:Group id="contentGroup" verticalCenter="0" left="3" right="3" top="2" bottom="2">

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

          verticalAlign="middle" horizontalAlign="center" mouseMove="img_mouseDragHandler(event)"/>

          </s:Group>

           

          </s:ItemRenderer>

          • 2. Re: Spark list component and layout
            Rob M Love Level 1

            Thanks David,

             

            I think I need to be looking at a custom layout, as now I'm using the tile layout and I want it to forget about alignning the rows. So one column can have more or less items then the next.

             

            Any good advice on this out there?

            • 3. Re: Spark list component and layout
              David_F57 Level 5

              Hi,

               

              If you go back to a vertical layout the itemrenderer could be pass an array of objects which you align horizontally and determine the row height by the tallest object in the array and adjust each object to suit the look you are after.

              Doing it this way you would need to parse your sequential data collection to create a collection that is based on items grouped by row then that becomes the lists dataprovider. So basically your itemrenderer has the code that controls the rules of horizontal layout and the rest is controlled by the vertical layout.

               

              David.