4 Replies Latest reply on Mar 31, 2009 9:34 AM by nnmmooppqq

    List ItemRenderer not resizing

    nnmmooppqq
      In a course application, I have a page with a list component that has a custom itemRenderer implementing IDropInListItemRenderer. The dataProvider for the list changes depending on where the student is in the course.

      The first time the page renders, the itemRenderers are sized properly. But if the student returns to the page, some of the the item renderers are missized -- way too big. As soon as I scroll the list, the itemRenderers resize properly (the scroll bar disappears).

      How can I get the itemRenderers or the list to redraw when the data changes, including a return to the same page with the same data?

      I've tried setting validateNow() at the list level immediately after the list dataProvider is set -- no luck.

      Any ideas? Code is attached.
        • 1. Re: List ItemRenderer not resizing
          Level 7

          "nnmmooppqq" <webforumsuser@macromedia.com> wrote in message
          news:gqosq1$8ff$1@forums.macromedia.com...
          > In a course application, I have a page with a list component that has a
          > custom
          > itemRenderer implementing IDropInListItemRenderer. The dataProvider for
          > the
          > list changes depending on where the student is in the course.
          >
          > The first time the page renders, the itemRenderers are sized properly. But
          > if
          > the student returns to the page, some of the the item renderers are
          > missized --
          > way too big. As soon as I scroll the list, the itemRenderers resize
          > properly
          > (the scroll bar disappears).
          >
          > How can I get the itemRenderers or the list to redraw when the data
          > changes,
          > including a return to the same page with the same data?

          You're implementing IDropInListItemRenderer, but just barely. You're not
          handling the data change in such a way that invalidateSize on the renderers
          gets called.

          For more information about how to write a renderer more effectively, check
          out the links int the answer to Q2 here
          http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf


          • 2. Re: List ItemRenderer not resizing
            nnmmooppqq Level 1
            Thanks for your help! I'm sure that it's something I'm doing in the itemRenderer, but I can't figure it out. I've read Peter's articles about 4 times (and learned alot each time!), but I still can't figure out where to put the invalidateSize() function.

            I've tried it on get and set functions -- neither worked.

            Please help me understand a little more how to get the data change event to resize the renderers.

            Thanks!
            • 3. Re: List ItemRenderer not resizing
              Level 7

              "nnmmooppqq" <webforumsuser@macromedia.com> wrote in message
              news:gqosq1$8ff$1@forums.macromedia.com...
              > In a course application, I have a page with a list component that has a
              > custom
              > itemRenderer implementing IDropInListItemRenderer. The dataProvider for
              > the
              > list changes depending on where the student is in the course.
              >
              > The first time the page renders, the itemRenderers are sized properly. But
              > if
              > the student returns to the page, some of the the item renderers are
              > missized --
              > way too big. As soon as I scroll the list, the itemRenderers resize
              > properly
              > (the scroll bar disappears).
              >
              > How can I get the itemRenderers or the list to redraw when the data
              > changes,
              > including a return to the same page with the same data?
              >
              > I've tried setting validateNow() at the list level immediately after the
              > list
              > dataProvider is set -- no luck.
              >
              > Any ideas? Code is attached.
              >
              > Code for list component itself:
              > <mx:HBox id="listContainer" width="95%" height="95%"
              > styleName="contentTextBox" verticalGap="0" verticalAlign="top"
              > paddingLeft="0"
              > paddingRight="0" paddingTop="0" paddingBottom="5">
              > <mx:VBox id="titleslist" height="95%" width="100%">
              > <mx:List id="optionList" styleName="listItemTextBox"
              > variableRowHeight="true" allowMultipleSelection="false"
              > height="100%" width="100%" verticalScrollPolicy="auto"
              > itemRenderer="customComponents.lsItemRenderer"
              > paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0"
              > scroll="checkRenderer()"/>
              > </mx:VBox>
              > </mx:HBox>
              >
              > Code for checkRenderer:
              > public function checkRenderer():void {
              > optionList.validateNow();
              > }
              >
              > This function is also called as soon as I set the dataProvider for the
              > list
              > component.
              >
              > Code for itemRenderer:
              > <?xml version="1.0" encoding="utf-8"?>
              > <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%"
              > mouseChildren="true" verticalScrollPolicy="off"
              > horizontalScrollPolicy="off"
              > implements="mx.controls.listClasses.IDropInListItemRenderer" >
              > <mx:Script >
              > <![CDATA[
              > import mx.controls.Alert;
              > import mx.controls.listClasses.BaseListData;
              > private var _listData:BaseListData;
              >
              > override public function set data( value:Object ) : void
              > {
              > super.data = value;
              > }
              > public function get listData() : BaseListData
              > {
              > return _listData;
              > }
              > public function set listData( value:BaseListData ) : void
              > {
              > _listData = value;
              >
              > }
              > public function doChange(event:Event):void {
              > var thisIndex:int = parentDocument.optionList.selectedIndex;
              > if (event.currentTarget.selected) {
              > parentDocument.optionList.dataProvider[thisIndex].isSelected = "1";
              > } else {
              > parentDocument.optionList.dataProvider[thisIndex].isSelected = "0";
              > }
              > }
              >
              > ]]>
              > </mx:Script>
              >
              > <mx:Text id="dorder" text="{data.displayOrder+'.'}" width="5%" />
              > <mx:Text id="optionTextVal" htmlText="{data.optionText}"
              > selectable="false"
              > width="65%" />
              > <mx:HBox id="hr1" horizontalAlign="center" width="10%" >
              > <mx:CheckBox label="" change="doChange(event)" />
              >
              > </mx:HBox>
              >
              > </mx:HBox>

              It would be something like this:

              private var _data:YourCustomType;
              private var _dataChanged:Boolean=false;

              override public function set data( value:Object ) : void
              {
              if (value != null && value !=_data) {
              _data=value;
              super.data = value;
              _dataChanged=true;
              invalidateProperties();
              }
              }

              override protected function commitProperties():void {
              super.commitProperties();
              if (_dataChanged) {
              //note you'll want to remove the bindings if you do this
              if (dorder.text <> _data.displayOrder + '.') {
              dorder.text = _data.displayOrder + '.';
              invalidateDisplayList();
              invalidateSize();
              }

              if (optionTextVal.htmlText<> _data.optionText) {
              optionTextVal.htmlText= _data.optionText;
              invalidateDisplayList();
              invalidateSize();
              }
              }

              HTH;

              Amy


              • 4. Re: List ItemRenderer not resizing
                nnmmooppqq Level 1
                Amy,

                Thanks again for your suggestions. I couldn't get your code to work for me. But I found a different way: I nulled the dataProvider for the list when I leave the template. That way, the renderers get reset each time I return to the list (at least I think this is what's happening!).

                I learned a lot from this exchange. Again, my thanks.