5 Replies Latest reply on Aug 14, 2008 1:54 PM by Newsgroup_User

    ItemRenderer 100% row height

    Noreaster76
      I have an itemRenderer that I'm using to render rows in the following List:

      <mx:List id="logDayFeaturesAndBreaks" width="100%" height="100%"
      dataProvider="{components}"
      itemRenderer="com.plank.components.LogDayRowRenderer"
      visible="{components.length > 0}"
      variableRowHeight="true"
      />

      What I'm trying to do is get each row to take 100% height (that is, set the row height dynamically, depending on the amount of height requested by the child object being rendered as a row item). Setting a static amount for the row height is not an option, since the objects in each row are not necessarily all the same height. (And notice that I've set variableRowHeight to true above.) What am I doing wrong? The rows just show up as practically zero height, so you can't see the objects in each row. Instead, it's just a thin blue line that appears when you hover the mouse over the row.

      Thanks in advance for any help!
        • 1. Re: ItemRenderer 100% row height
          Level 7

          "Noreaster76" <webforumsuser@macromedia.com> wrote in message
          news:g81hcd$g6b$1@forums.macromedia.com...
          >I have an itemRenderer that I'm using to render rows in the following List:
          >
          > <mx:List id="logDayFeaturesAndBreaks" width="100%" height="100%"
          > dataProvider="{components}"
          > itemRenderer="com.plank.components.LogDayRowRenderer"
          > visible="{components.length > 0}"
          > variableRowHeight="true"
          > />
          >
          > What I'm trying to do is get each row to take 100% height (that is, set
          > the
          > row height dynamically, depending on the amount of height requested by the
          > child object being rendered as a row item). Setting a static amount for
          > the
          > row height is not an option, since the objects in each row are not
          > necessarily
          > all the same height. (And notice that I've set variableRowHeight to true
          > above.) What am I doing wrong? The rows just show up as practically zero
          > height, so you can't see the objects in each row. Instead, it's just a
          > thin
          > blue line that appears when you hover the mouse over the row.
          >
          > Thanks in advance for any help!
          >
          > package com.plank.components
          > {
          > import com.plank.model.Break;
          > import com.plank.model.LogItem;
          >
          > import flash.display.DisplayObject;
          >
          > import mx.controls.listClasses.IListItemRenderer;
          > import mx.core.UIComponent;
          > import mx.events.FlexEvent;
          >
          > public class LogDayRowRenderer extends UIComponent implements
          > IListItemRenderer
          > {
          > public function LogDayRowRenderer()
          > {
          > super();
          > }
          >
          > // Internal variable for the property value.
          > private var _data:Object;
          >
          > // Make the data property bindable.
          > [Bindable("dataChange")]
          >
          > // Define the getter method.
          > public function get data():Object {
          > return _data;
          > }
          >
          > // Define the setter method, and dispatch an event when the property
          > // changes to support data binding.
          > public function set data(value:Object):void
          > {
          > _data = value;
          >
          > invalidateProperties();
          > dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
          > }
          >
          > private var myBreakBox:BreakDisplayBox;
          > private var myFeatureBox:FeatureDisplayBox;
          >
          > override protected function createChildren() : void
          > {
          > super.createChildren();
          >
          > myBreakBox = new BreakDisplayBox();
          > myBreakBox.visible = false;
          > addChild(myBreakBox);
          >
          > myFeatureBox = new FeatureDisplayBox();
          > myFeatureBox.visible = false;
          > addChild(myFeatureBox);
          > }
          >
          > override protected function commitProperties():void
          > {
          > super.commitProperties();
          > if (data is Break)
          > {
          > myBreakBox.myBreak = data as Break;
          > myFeatureBox.myFeature = null;
          >
          > myBreakBox.visible = true;
          > myFeatureBox.visible = false;
          > }
          > else if (data is LogItem)
          > {
          > myBreakBox.myBreak = null;
          > myFeatureBox.myFeature = data as LogItem;
          >
          > myBreakBox.visible = false;
          > myFeatureBox.visible = true;
          > }
          > }
          >
          >
          > override protected function updateDisplayList( unscaledWidth:Number,
          > unscaledHeight:Number ) : void
          > {
          > super.updateDisplayList(unscaledWidth, unscaledHeight);
          >
          > myBreakBox.move(0,0);
          > myBreakBox.setActualSize(unscaledWidth,unscaledHeight);
          >
          > myFeatureBox.move(0,0);
          > myFeatureBox.setActualSize(unscaledWidth, unscaledHeight);
          > }
          >
          > /**
          > * set the "measuredHeight" property based on the sum of the
          > * measuredHeights of the component's children
          > *
          > * Calculates the measured width and height of the component
          > * based on the rowCount, columnCount, rowHeight and columnWidth
          > properties.
          > */
          > protected override function measure():void
          > {
          > super.measure();
          > var h:int = 0;
          > var child:DisplayObject;
          > if (myBreakBox != null && myBreakBox.visible)
          > {
          > for each(child in myBreakBox.getChildren())
          > {
          > h += child.height;
          > }
          > this.height = h;
          > }
          > else if (myFeatureBox != null && myFeatureBox.visible)
          > {
          > for each(child in myBreakBox.getChildren())
          > {
          > h += child.height;
          > }
          > this.height = h;
          > }
          > }
          > }
          > }
          >


          • 2. Re: ItemRenderer 100% row height
            Level 7

            "Noreaster76" <webforumsuser@macromedia.com> wrote in message
            news:g81hcd$g6b$1@forums.macromedia.com...
            >I have an itemRenderer that I'm using to render rows in the following List:
            >
            > <mx:List id="logDayFeaturesAndBreaks" width="100%" height="100%"
            > dataProvider="{components}"
            > itemRenderer="com.plank.components.LogDayRowRenderer"
            > visible="{components.length > 0}"
            > variableRowHeight="true"
            > />

            > protected override function measure():void
            > {
            > super.measure();
            > var h:int = 0;
            > var child:DisplayObject;
            > if (myBreakBox != null && myBreakBox.visible)
            > {
            > for each(child in myBreakBox.getChildren())
            > {
            > h += child.height;
            > }
            > this.height = h;
            > }
            > else if (myFeatureBox != null && myFeatureBox.visible)
            > {
            > for each(child in myBreakBox.getChildren())
            > {
            > h += child.height;
            > }
            > this.height = h;
            > }
            > }
            > }
            > }

            Oops, hit send too fast. Your measure() function needs to set
            measuredHeight, measuredWidth, I think.

            HTH;

            Amy
            >


            • 3. Re: ItemRenderer 100% row height
              Noreaster76 Level 1
              Thanks for the help. Tried that (setting measuredHeight instead of height), but now there's good and bad news. The good news is, featureBoxes and breakBoxes now seem to be of different heights. The bad news is, featureBoxes are now ~zero height, and the breakBoxes are all the same size as each other. What now? See updated code posting.
              • 4. Re: ItemRenderer 100% row height
                Noreaster76 Level 1
                A friend helped me out and we got it to work. Updated code is attached. Also had to set rowCount in the BreakDisplayBox class's grid to the correct value, and then the BreakDisplayBoxes showed up the correct sizes.

                Thanks for the help.
                • 5. Re: ItemRenderer 100% row height
                  Level 7
                  Glad you got it to work :-)
                  "Noreaster76" <webforumsuser@macromedia.com> wrote in message
                  news:g8204n$2fd$1@forums.macromedia.com...
                  >A friend helped me out and we got it to work. Updated code is attached.
                  >Also
                  > had to set rowCount in the BreakDisplayBox class's grid to the correct
                  > value,
                  > and then the BreakDisplayBoxes showed up the correct sizes.
                  >
                  > Thanks for the help.
                  >
                  > package com.plank.components
                  > {
                  > import com.plank.model.Break;
                  > import com.plank.model.LogItem;
                  >
                  > import mx.containers.Canvas;
                  > import mx.controls.listClasses.IListItemRenderer;
                  > import mx.events.FlexEvent;
                  >
                  > public class LogDayRowRenderer extends Canvas implements
                  > IListItemRenderer
                  > {
                  > public function LogDayRowRenderer()
                  > {
                  > super();
                  > }
                  >
                  > // Internal variable for the property value.
                  > private var _data:Object;
                  >
                  > private var dataChanged:Boolean = false;
                  >
                  > // Make the data property bindable.
                  > [Bindable("dataChange")]
                  >
                  > // Define the getter method.
                  > override public function get data():Object {
                  > return _data;
                  > }
                  >
                  > // Define the setter method, and dispatch an event when the property
                  > // changes to support data binding.
                  > override public function set data(value:Object):void
                  > {
                  > _data = value;
                  > dataChanged = true;
                  > invalidateProperties();
                  > dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
                  > }
                  >
                  > private var myBreakBox:BreakDisplayBox;
                  > private var myFeatureBox:FeatureDisplayBox;
                  >
                  > override protected function commitProperties():void
                  > {
                  > super.commitProperties();
                  >
                  > if(dataChanged){
                  > this.removeAllChildren();
                  > //Re-add the correct children based on the contents of data
                  > if (data is Break)
                  > {
                  > myBreakBox = new BreakDisplayBox();
                  > myFeatureBox = null;
                  >
                  > myBreakBox.myBreak = data as Break;
                  > this.addChild(myBreakBox);
                  > }
                  > else if (data is LogItem)
                  > {
                  > myFeatureBox = new FeatureDisplayBox();
                  > myBreakBox = null;
                  >
                  > myFeatureBox.myFeature = data as LogItem;
                  > this.addChild(myFeatureBox);
                  > }
                  >
                  > this.invalidateSize();
                  > this.invalidateDisplayList();
                  > }
                  >
                  > }
                  >
                  >
                  > override protected function updateDisplayList( unscaledWidth:Number,
                  > unscaledHeight:Number ) : void
                  > {
                  > super.updateDisplayList(unscaledWidth, unscaledHeight);
                  >
                  > if (myBreakBox)
                  > {
                  > myBreakBox.move(0,0);
                  > myBreakBox.setActualSize(unscaledWidth,unscaledHeight);
                  > }
                  >
                  > if (myFeatureBox)
                  > {
                  > myFeatureBox.move(0,0);
                  > myFeatureBox.setActualSize(unscaledWidth, unscaledHeight);
                  > }
                  > }
                  >
                  > /**
                  > * set the "measuredHeight" property based on the sum of the
                  > * measuredHeights of the component's children
                  > *
                  > * never set anything explicit in your measure methods
                  > *
                  > * Calculates the measured width and height of the component
                  > * based on the rowCount, columnCount, rowHeight and columnWidth
                  > properties.
                  > */
                  > protected override function measure():void
                  > {
                  > super.measure();
                  > if (myBreakBox)
                  > {
                  > this.measuredHeight = myBreakBox.measuredHeight;
                  > }
                  > else if (myFeatureBox)
                  > {
                  > this.measuredHeight = myFeatureBox.measuredHeight;
                  > }
                  > }
                  > }
                  > }
                  >