6 Replies Latest reply on Oct 20, 2009 5:04 PM by SPGAnne

    how to make items in a list word wrap as needed and be variable heights

    SPGAnne Level 1

      I am trying to build a custom itemrenderer for the List control.  The items in the list are variable lengths of text, some of the text items will have different colors determined at runtime base on some criteria (this works fine now with my custom itemrenderer).  What I need is for the items to word wrap, and therefore for the list to display items of varying heights.  Is this possible to do?  All my attempts seem to have failed.  If I can't do this with an item renderer any suggestions about how to do this?  Thanks very much in advance to any of you gurus who are able to help me.

        • 1. Re: how to make items in a list word wrap as needed and be variable heights
          Flex harUI Adobe Employee

          This usually requires an override of the measure() method.  The renderer must report the correct height based on the explicitWidth it has been given by the host List.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

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

          • 2. Re: how to make items in a list word wrap as needed and be variable heights
            SPGAnne Level 1

            Alex,

            Thanks very much for replying to my post.  I'm afraid I need more guidance as I have never done this before and really don't understand all the ins and outs of how measuring is done and how text wrapping happens.

             

            I have defined my item renderer in .mxml based on a Canvas component.  Inside I have a <mx:Text id="cueText" height="100%" width="100%"/>

             

            I added the override protected method measure() to the script section and put a breakpoint before and after the super.measure() call to see what was happening.  I never see a value in cueText.explicitWidth or cueText.explicitHeight.  I DO see values in cueText.measuredWidth and cueText.measuredHeight.  I see in these 2 that I have a very wide value and a height that is one line high.

             

            Could you be much more explicit about what I need to do to make sure the cueText content fits inside the width of the list which is using this item renderer and that the text wraps appropriately and is entirely visible.

             

            Thank you very much for your patient help.

             

            Anne

            • 3. Re: how to make items in a list word wrap as needed and be variable heights
              Subeesh Arakkan Level 4

              Trick here is not to specify any height for the renderer so that Flex will determine the height according to the content. Also set the variableRowHeight="true"

               

              Here is a simple example

              <mx:ArrayCollection id="dp">
                      <mx:Array>
                          <mx:Object label="some very long text"/>
                          <mx:Object label="some very loooooooooooooooooooooooooooooooooong text"/>
                          <mx:Object label="some very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"/>
                          <mx:Object label="some very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"/>
                          <mx:Object label="some very long text"/>
                      </mx:Array>
                  </mx:ArrayCollection>
                  <mx:List dataProvider="{dp}" variableRowHeight="true">
                      <mx:itemRenderer>
                          <mx:Component>
                              <mx:Canvas width="100%">
                                  <mx:Text width="100%" text="{data.label}"/>
                              </mx:Canvas>
                          </mx:Component>
                      </mx:itemRenderer>
                  </mx:List>

              1 person found this helpful
              • 4. Re: how to make items in a list word wrap as needed and be variable heights
                Flex harUI Adobe Employee

                I would not expect that example to work.  The Text's width is still not tied to the Canvas's explicitWidth.  You'd probably have to override measure() like this:

                 

                                <mx:Canvas width="100%">

                                 <mx:Script><![CDATA[

                                   override protected function measure():void

                                      {

                                    txt.explicitWidth = explicitWidth;

                                        super.measure();

                                    }

                                 ]]></mx:Script>

                                    <mx:Text id="txt" width="100%" text="{data.label}"/>

                                </mx:Canvas>

                 

                Alex Harui

                Flex SDK Developer

                Adobe Systems Inc.

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

                • 5. Re: how to make items in a list word wrap as needed and be variable heights
                  SPGAnne Level 1

                  Thank you for your helpful reply.  Your sample worked fine as is, but when I plugged it into my app, it didn't.  i seemed to need that additional statemnt that Alex provided i.e. text.explicitWidth = explicitWidth  before the super.measure();

                   

                  I really still don't understand why or what's really going on, but your stuff in combination with that did the trick!

                  • 6. Re: how to make items in a list word wrap as needed and be variable heights
                    SPGAnne Level 1

                    Thank you Alex.  the explicitWidth statement before the super.measure() in combination with the

                    variableRowHeight="true" being set on the list and the example of how to have the text="{data.label}" were all necessary pieces to solving my problem.

                     

                    I wish I really understood this whole measuring business better, but I've got a zillion other things to get done now, so I am just happy to get that little  feature working and behind me.