9 Replies Latest reply on Aug 21, 2009 12:05 PM by bgyg

    Tree with itemRenderer can have variable row (not String data) height ?

    bgyg

      Is it possible to create a Tree that uses itemRenderer to have variable row height?

       

      In my itemRenderer, I create a HBox for each row.

       

      For some rows, I want to show VBox having multiple objects like ComboBoxes as its children.

       

      The VBox overlaps with the next row.

        • 1. Re: Tree with itemRenderer can have variable row (not String data) height ?
          paul.williams Level 4

          Have you tried setting the variableRowHeight property to true?

          1 person found this helpful
          • 2. Re: Tree with itemRenderer can have variable row (not String data) height ?
            Flex harUI Adobe Employee

            Set variableRowHeight=true

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui

            • 3. Re: Tree with itemRenderer can have variable row (not String data) height ?
              bgyg Level 1

              Yes, I tried.

               

              VariableRowHeight does not seem to be working for my case.

               

              I have seen it work in the case where dataprovider contains long String data and itemRenderer is Label.

              • 4. Re: Tree with itemRenderer can have variable row (not String data) height ?
                Flex harUI Adobe Employee

                Show us the code for your renderer

                 

                 

                Alex Harui

                Flex SDK Developer

                Adobe Systems Inc.

                Blog: http://blogs.adobe.com/aharui

                1 person found this helpful
                • 5. Re: Tree with itemRenderer can have variable row (not String data) height ?
                  bgyg Level 1

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                  package

                   

                   

                  com.certusoft.ui.renderer

                  {

                   

                   

                  import

                  com.certusoft.domain.Parameter;

                   

                   

                  import

                  com.certusoft.event.AddParameterEvent;

                   

                   

                  import

                  com.certusoft.event.EditParameterEvent;

                   

                   

                  import

                  com.certusoft.event.RemoveParameterEvent;

                   

                   

                  import

                  com.certusoft.ui.FeatureSelectionHBox;

                   

                   

                  import

                  com.certusoft.ui.ParameterSelectionHBox;

                   

                   

                  import

                  com.certusoft.util.Properties;

                   

                   

                   

                  import

                  flash.events.ContextMenuEvent;

                   

                   

                  import

                  flash.ui.ContextMenu;

                   

                   

                  import

                  flash.ui.ContextMenuItem;

                   

                   

                   

                  import

                  mx.controls.treeClasses.TreeItemRenderer;

                   

                   

                  import

                  mx.controls.treeClasses.TreeListData;

                   

                   

                  import

                  mx.core.IFactory;

                   

                   

                   

                  public class FeatureTreeItemRenderer extends TreeItemRenderer implements

                  IFactory

                  {

                   

                   

                  private var

                  _parameterSelectionHBox:ParameterSelectionHBox;

                   

                   

                  private var

                  _featureSelectionHBox:FeatureSelectionHBox;

                   

                   

                  private var

                  _featureSelectionHBoxLeaf:FeatureSelectionHBox;

                   

                   

                  private var _dataChanged:Boolean = false

                  ;

                   

                   

                   

                  private var add:ContextMenuItem = new ContextMenuItem("Add at End"

                  );

                   

                   

                  private var addBefore:ContextMenuItem = new ContextMenuItem("Add Before"

                  );

                   

                   

                  private var addAfter:ContextMenuItem = new ContextMenuItem("Add After"

                  );

                   

                   

                  private var remove:ContextMenuItem = new ContextMenuItem("Remove"

                  );

                   

                   

                  private var edit:ContextMenuItem = new ContextMenuItem("Edit"

                  );

                   

                   

                   

                  public function

                  newInstance():*

                  {

                   

                   

                  return new

                  FeatureTreeItemRenderer();

                  }

                   

                   

                   

                  public function

                  FeatureTreeItemRenderer()

                  {

                   

                   

                  super

                  ();

                   

                   

                   

                  // Context menu

                   

                   

                  var contextMenu:ContextMenu = new

                  ContextMenu();

                   

                   

                  var

                  menuItems:Array = [];

                   

                  add.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, addParamHandler);

                  menuItems.push(add);

                   

                  addBefore.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, addParamHandler);

                  menuItems.push(addBefore);

                   

                  addAfter.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, addParamHandler);

                  menuItems.push(addAfter);

                   

                  remove.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, removeParamHandler);

                  menuItems.push(remove);

                   

                  edit.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, editParamHandler);

                  menuItems.push(edit);

                   

                  contextMenu.customItems = menuItems;

                  contextMenu.hideBuiltInItems();

                   

                   

                   

                  this

                  .contextMenu = contextMenu;

                  }

                   

                   

                   

                  private function editParamHandler(event:ContextMenuEvent):void

                  {

                   

                   

                  var

                  dataObj:Object = data;

                   

                   

                   

                  if (data instanceof

                  Parameter)

                  {

                   

                   

                  var dataParam:Parameter = data as

                  Parameter;

                  dispatchEvent(

                   

                  new EditParameterEvent(dataParam, true

                  ));

                  }

                  }

                   

                   

                   

                  private function removeParamHandler(event:ContextMenuEvent):void

                  {

                   

                   

                  var

                  dataObj:Object = data;

                   

                   

                   

                  if (data instanceof

                  Parameter)

                  {

                   

                   

                  var dataParam:Parameter = data as

                  Parameter;

                  dispatchEvent(

                   

                  new RemoveParameterEvent(dataParam, true

                  ));

                  }

                  }

                   

                   

                   

                  private function addParamHandler(event:ContextMenuEvent):void

                  {

                   

                   

                  var

                  dataObj:Object = data;

                   

                   

                   

                  if (data instanceof

                  Parameter)

                  {

                   

                   

                  var dataParam:Parameter = data as

                  Parameter;

                   

                   

                  var menuItem:ContextMenuItem = event.target as

                  ContextMenuItem;

                  dispatchEvent(

                   

                  new AddParameterEvent(dataParam, menuItem.caption, true

                  ));

                  }

                  }

                   

                   

                   

                  private function

                  hasChildren():Boolean

                  {

                   

                   

                  return (TreeListData(super.listData).item as

                  Parameter).hasChildren();

                  }

                   

                   

                   

                  override public function set data(value:Object):

                  void

                  {

                   

                   

                  // setting the data property of the parent will also trigger:

                   

                   

                  // call to invalidateProperties()

                   

                   

                  // dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

                   

                   

                  if

                  (data != value)

                  {

                  _dataChanged =

                   

                  true

                  ;

                   

                   

                  super

                  .data = value;

                   

                   

                   

                  if

                  (hasChildren())

                  {

                   

                   

                  var isSelectableByName:Boolean = Properties.getBindVal(data as Parameter, Properties.isSelectableByName) as

                  Boolean;

                   

                   

                   

                  if

                  (isSelectableByName)

                  {

                  styleName =

                   

                  "headerItem"

                  ;

                  _parameterSelectionHBox.visible =

                   

                  false

                  ;

                  _featureSelectionHBox.visible =

                   

                  true

                  ;

                  _featureSelectionHBoxLeaf.visible =

                   

                  false

                  ;

                   

                  addBefore.enabled =

                   

                  true

                  ;

                  addAfter.enabled =

                   

                  true

                  ;

                  add.enabled =

                   

                  true

                  ;

                  remove.enabled =

                   

                  true

                  ;

                  edit.enabled =

                   

                  true

                  ;

                  }

                   

                   

                  else

                  {

                  styleName =

                   

                  "headerItem"

                  ;

                  _parameterSelectionHBox.visible =

                   

                  false

                  ;

                  _featureSelectionHBox.visible =

                   

                  false

                  ;

                  _featureSelectionHBoxLeaf.visible =

                   

                  false

                  ;

                   

                  addBefore.enabled =

                   

                  false

                  ;

                  addAfter.enabled =

                   

                  false

                  ;

                  add.enabled =

                   

                  false

                  ;

                  remove.enabled =

                   

                  false

                  ;

                  edit.enabled =

                   

                  false

                  ;

                  }

                  }

                   

                   

                  else

                  {

                   

                   

                  var isSelectableByName:Boolean = Properties.getBindVal(data as Parameter, Properties.isSelectableByName) as

                  Boolean;

                   

                   

                   

                  if

                  (isSelectableByName)

                  {

                  styleName =

                   

                  "parameterItem"

                  ;

                  _parameterSelectionHBox.visible =

                   

                  false

                  ;

                  _featureSelectionHBox.visible =

                   

                  false

                  ;

                  _featureSelectionHBoxLeaf.visible =

                   

                  true

                  ;

                   

                  addBefore.enabled =

                   

                  true

                  ;

                  addAfter.enabled =

                   

                  true

                  ;

                  add.enabled =

                   

                  true

                  ;

                  remove.enabled =

                   

                  true

                  ;

                  edit.enabled =

                   

                  true

                  ;

                  }

                   

                   

                  else

                  {

                  styleName =

                   

                  "parameterItem"

                  ;

                  _parameterSelectionHBox.visible =

                   

                  true

                  ;

                  _featureSelectionHBox.visible =

                   

                  false

                  ;

                  _featureSelectionHBoxLeaf.visible =

                   

                  false

                  ;

                   

                  addBefore.enabled =

                   

                  false

                  ;

                  addAfter.enabled =

                   

                  false

                  ;

                  add.enabled =

                   

                  false

                  ;

                  remove.enabled =

                   

                  false

                  ;

                  edit.enabled =

                   

                  false

                  ;

                  }

                  }

                  }

                   

                   

                  else

                  {

                  _dataChanged =

                   

                  false

                  ;

                  }

                  }

                   

                   

                   

                  /**

                  * Create child objects of the component.

                  * From within an override of the createChildren() method, you call the addChild() method to add each child object.

                  * You do not call this method directly.

                  * Flex calls the createChildren() method in response to the call to the addChild() method to add the component to its parent.

                  */

                   

                   

                  override protected function createChildren():

                  void

                  {

                   

                   

                  super

                  .createChildren();

                   

                  _parameterSelectionHBox =

                   

                  new

                  ParameterSelectionHBox()

                  addChild(_parameterSelectionHBox);

                  _featureSelectionHBox =

                   

                  new FeatureSelectionHBox(false

                  )

                  addChild(_featureSelectionHBox);

                  _featureSelectionHBoxLeaf =

                   

                  new FeatureSelectionHBox(true

                  )

                  addChild(_featureSelectionHBoxLeaf);

                  }

                   

                   

                   

                  /**

                  * Processes the properties set on the component.

                  * To coordinate the modifications of multiple properties so that the modifications occur synchronously.

                  * The commitProperties() method executes during the next render event after a call to the invalidateProperties() method

                  * Calls to the commitProperties() method occur before calls to the measure() method.

                  * This lets you set property values that the measure() method might use.

                  */

                   

                   

                  override protected function commitProperties():

                  void

                  {

                   

                   

                  super

                  .commitProperties();

                   

                   

                  if

                  (_dataChanged)

                  {

                   

                   

                  var isSelectableByName:Boolean = Properties.getBindVal(data as Parameter, Properties.isSelectableByName) as

                  Boolean;

                   

                   

                   

                  if

                  (isSelectableByName)

                  {

                  _featureSelectionHBox.parameter = data

                   

                  as

                  Parameter;

                  _featureSelectionHBoxLeaf.parameter = data

                   

                  as

                  Parameter;

                  }

                   

                   

                  else

                  {

                  _parameterSelectionHBox.parameter = data

                   

                  as

                  Parameter;

                  }

                  }

                  }

                   

                   

                   

                  /**

                  * The measure() method sets the default component size, in pixels, and optionally sets the component's default minimum size.

                  * When you set a specific height and width of a component, Flex does not call the measure() method, even if you explicitly

                  * call the invalidateSize() method. That is, Flex calls the measure() method only if the explicitWidth property or the

                  * explicitHeight property of the component is NaN.

                  */

                   

                   

                  override protected function measure():

                  void

                  {

                   

                   

                  super

                  .measure();

                  // var lineMetrics:TextLineMetrics = measureText("Measure Me");

                  // measuredWidth=100;

                  // measuredMinWidth=50;

                  // measuredHeight=50;

                  // measuredMinHeight=25;

                  }

                   

                   

                   

                  /**

                  * Draws the object and/or sizes and positions its children.

                  * If the component has no children, this method is where you would do programmatic drawing.

                  * If the component has children, this method is where you would call the move() and setActualSize() methods on its children.

                  *

                  * @param unscaledWidth Specifies the width of the component, in pixels,

                  * in the component's coordinates, regardless of the value of the

                  * <code>scaleX</code> property of the component. This is the width of

                  * the component as determined by its parent container.

                  *

                  * @param unscaledHeight Specifies the height of the component, in pixels,

                  * in the component's coordinates, regardless of the value of the

                  * <code>scaleY</code> property of the component. This is the height of

                  * the component as determined by its parent container.

                  *

                  */

                   

                   

                   

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):

                  void

                  {

                   

                   

                  super

                  .updateDisplayList(unscaledWidth, unscaledHeight);

                   

                   

                   

                   

                  if (super

                  .data)

                  {

                   

                   

                  if

                  (hasChildren())

                  {

                   

                   

                  var isSelectableByName:Boolean = Properties.getBindVal(data as Parameter, Properties.isSelectableByName) as

                  Boolean;

                   

                   

                   

                  if

                  (isSelectableByName)

                  {

                  _featureSelectionHBox.move(TreeListData(

                   

                  super

                  .listData).indent + 150, 0);

                  _featureSelectionHBox.setActualSize(unscaledWidth, unscaledHeight);

                  }

                   

                   

                  else

                  {

                  _parameterSelectionHBox.move(TreeListData(

                   

                  super

                  .listData).indent, 0);

                  _parameterSelectionHBox.setActualSize(unscaledWidth, unscaledHeight);

                  // var children:int = (TreeListData(super.listData).item as Parameter).children.length;

                  // super.label.text = TreeListData(super.listData).label + " (" + children + ")";

                  }

                  }

                   

                   

                  else

                  {

                   

                   

                  var isSelectableByName:Boolean = Properties.getBindVal(data as Parameter, Properties.isSelectableByName) as

                  Boolean;

                   

                   

                  super.label.text = ""

                  ;

                   

                   

                   

                  if

                  (!isSelectableByName)

                  {

                  _parameterSelectionHBox.move(TreeListData(

                   

                  super

                  .listData).indent, 0);

                  _parameterSelectionHBox.setActualSize(unscaledWidth, unscaledHeight);

                  }

                   

                   

                  else

                  {

                  _featureSelectionHBoxLeaf.move(TreeListData(

                   

                  super

                  .listData).indent, 0);

                  • 6. Re: Tree with itemRenderer can have variable row (not String data) height ?
                    bgyg Level 1

                    In the code, each row of tree shows one HBox. I want to be able to change dynamically the contents of featureSelectionHBox -- which is currently HBox containing checkbox and combobox and label -- so that it becomes a VBox containg multiple HBoxes.

                    • 7. Re: Tree with itemRenderer can have variable row (not String data) height ?
                      bgyg Level 1

                      And here is my Tree.

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                      _tree =

                       

                      new

                      Tree();

                       

                      // _tree.percentHeight = 100;

                      _tree.percentWidth = 100;

                      // _tree.rowHeight = 26;

                      _tree.setStyle(

                       

                      "left"

                      , 2);

                      _tree.setStyle(

                       

                      "right"

                      , 2);

                      _tree.setStyle(

                       

                      "top"

                      , 2);

                      _tree.setStyle(

                       

                      "bottom"

                      , 2);

                      _tree.selectable =

                       

                      true

                      ;

                      _tree.labelFunction = treeLabelFunction;

                      _tree.styleName =

                       

                      "featureTree"

                      ;

                      _product = _treeDao.treeStructure;

                      _tree.dataProvider = _product;

                      _tree.itemRenderer = _renderer;

                      _tree.variableRowHeight =

                       

                      true

                      ;

                      _vBox.addChild(_tree);

                       

                       

                       

                      this

                      .addChild(_vBox);

                      • 8. Re: Tree with itemRenderer can have variable row (not String data) height ?
                        Flex harUI Adobe Employee

                        You will need to modify the measure() method to properly measure your component.

                         

                        Alex Harui

                        Flex SDK Developer

                        Adobe Systems Inc.

                        Blog: http://blogs.adobe.com/aharui