15 Replies Latest reply on Dec 12, 2008 12:10 PM by Newsgroup_User

    Changing itemRenderer width dynamically

    Santanu Karar Level 1
      Hello, here's my problem is..

      I've a TileList or HorizontalList component with a bindable Array. The TileList or HorizontalLilst is calling an external ItemRenderer file.

      A simple horizontalList code as:

      [Bindable] private var someArray:Array = new Array("short", "reallyLongTextHere");
      <mx:HorizontalList dataProvider="{someArray}" itemRenderer="myRenderer"/>

      My simple ItemRenderer as this:

      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" autoLayout="true" width="100%">
      <mx:Script>
      <![CDATA[
      [Bindable] private var someSize:int;

      override public function set data(value:Object):void {
      if (value) {
      super.data = value;
      // my other scripts are here...
      }
      }

      ]]>
      </mx:Script>
      <mx:Label text="{data}"/>
      </mx:VBox>

      Now, what I could not achieve is, I can not set the itemRenderers' widths dynamically as per the text length came in. Those list components always sets the all itemRenderers' width as per the first drawn itemRenderer's width. Is there any possible way that those list components can render those itemRenderers' width as per the input text lengths? So, what is expect is an itemRenderer could be small in width where another could be bigger than the previous one or smaller.

      Thanks.
        • 1. Re: Changing itemRenderer width dynamically
          Level 7

          "aSuitableBoy" <webforumsuser@macromedia.com> wrote in message
          news:ghnkd9$i5c$1@forums.macromedia.com...
          > Hello, here's my problem is..
          >
          > I've a TileList or HorizontalList component with a bindable Array. The
          > TileList or HorizontalLilst is calling an external ItemRenderer file.
          >
          > A simple horizontalList code as:
          >
          > private var someArray:Array = new Array("short", "reallyLongTextHere");
          > <mx:HorizontalList dataProvider="{someArray}" itemRenderer="myRenderer"/>
          >
          > My simple ItemRenderer as this:
          >
          > <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" autoLayout="true"
          > width="100%">
          > <mx:Script>
          > <![CDATA[
          > [Bindable] private var someSize:int;
          >
          > override public function set data(value:Object):void {
          > if (value) {
          > super.data = value;
          > // my other scripts are here...
          > }
          > }
          >
          > ]]>
          > </mx:Script>
          > <mx:Label text="{data}"/>
          > </mx:VBox>
          >
          > Now, what I could not achieve is, I can not set the itemRenderers' widths
          > dynamically as per the text length came in. Those list components always
          > sets
          > the all itemRenderers' width as per the first drawn itemRenderer's width.
          > Is
          > there any possible way that those list components can render those
          > itemRenderers' width as per the input text lengths? So, what is expect is
          > an
          > itemRenderer could be small in width where another could be bigger than
          > the
          > previous one or smaller.

          You could extend TileList or HorizontalList to add this behavior, but I
          think if you do you'll see why the developers just went with measuring the
          first one and going with its size.

          HTH;

          Amy


          • 2. Re: Changing itemRenderer width dynamically
            ntsiii Level 3
            Consider using Repeater.
            Tracy
            • 3. Re: Changing itemRenderer width dynamically
              Santanu Karar Level 1
              Ok, I'm trying with Repeater once.
              • 4. Re: Changing itemRenderer width dynamically
                ntsiii Level 3
                Also, it occurs to me that Tile will enforce the same width elements.

                Look into the FlowBox component as the container for the repeated items.

                Tracy
                • 5. Re: Changing itemRenderer width dynamically
                  Level 7

                  "ntsiii" <tspratt@lariatinc.com> wrote in message
                  news:ghrhnc$kha$1@forums.macromedia.com...
                  > Also, it occurs to me that Tile will enforce the same width elements.

                  I don't think it does. But it does enforce a "square" shape (number of rows
                  and/or columns will be the square root of the number of elements). I think
                  Legend overrides this, and it might actually work for this task...


                  • 7. Re: Changing itemRenderer width dynamically
                    Brent Lamborn Level 2
                    Also, look in this post of mine and some code I posted. It shows how to do it in actionscript by overloading the CreateItemRenderer method.

                    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1411262
                    • 9. Re: Changing itemRenderer width dynamically
                      Santanu Karar Level 1
                      quote:

                      Originally posted by: Newsgroup User

                      "ntsiii" <tspratt@lariatinc.com> wrote in message
                      news:ghrhnc$kha$1@forums.macromedia.com...
                      > Also, it occurs to me that Tile will enforce the same width elements.

                      I don't think it does. But it does enforce a "square" shape (number of rows
                      and/or columns will be the square root of the number of elements). I think
                      Legend overrides this, and it might actually work for this task...





                      I think Tracy was right about the Container in a Tile component take a amount of white spaces as the width of the each cells which you've mentioned as a border shaped boxes. I also liked the Flowbox Container, though yet to get a hand on this, but it looks good..!
                      • 10. Re: Changing itemRenderer width dynamically
                        Santanu Karar Level 1
                        quote:

                        Originally posted by: BrentLamborn
                        Also, look in this post of mine and some code I posted. It shows how to do it in actionscript by overloading the CreateItemRenderer method.

                        http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1411262


                        :) I've seen what you've did merging your codes and Adobe's codes to extend the List component. Thats good too. I'm thinking in my case, if I can manage the width of the each renderer items with this technique...
                        • 11. Changing itemRenderer width dynamically
                          Santanu Karar Level 1
                          Seen an interesting component FlowBox at Flexlib:

                          http://code.google.com/p/flexlib/wiki/ComponentList

                          Have a look!
                          • 12. Changing itemRenderer width dynamically
                            Brent Lamborn Level 2
                            You definately can. Here's what to do:

                            1. Make your someSize variable inside your itemRenderer public.
                            2. Add this method somewhere that your List based control can call it:

                            public static function createRendererWithProperties(renderer:Class,properties:Object ):IFactory { var factory:ClassFactory = new ClassFactory(renderer); factory.properties = properties; return factory;}


                            3. In your list control set it's itemRenderer property to this:

                            itemRenderer="{createRendererWithProperties(myRenderer, {someSize: mydata.Somesize})}"


                            That's it. That's all you need to do. myRenderer is the name of your renderer. someSize is the variable you want to set inside your renderer, and mydata.Somsize is that piece of data you want to bind to your itemRenderer property.
                            • 13. Re: Changing itemRenderer width dynamically
                              Level 7

                              "BrentLamborn" <webforumsuser@macromedia.com> wrote in message
                              news:ghtu0i$nuc$1@forums.macromedia.com...
                              > You definately can. Here's what to do:
                              >
                              > 1. Make your someSize variable inside your itemRenderer public.
                              > 2. Add this method somewhere that your List based control can call it:
                              >
                              > public static function
                              > createRendererWithProperties(renderer:Class,properties:Object ):IFactory
                              > { var
                              > factory:ClassFactory = new ClassFactory(renderer); factory.properties =
                              > properties; return factory;}
                              >
                              >
                              > 3. In you list control set your the itemRenderer property to this:
                              >
                              > itemRenderer="{createRendererWithProperties(myRenderer, {someSize:
                              > mydata.Somesize})}"
                              >
                              >
                              > That's it. That's all you need to do.

                              How is that going to make the TileList allocate enough space for it and lay
                              out everything properly? I'd love to see a working example posted if you
                              have one.


                              • 14. Changing itemRenderer width dynamically
                                Brent Lamborn Level 2
                                Amy -

                                You're right. I guess I hadn't worked with TileList enough to realize that won't work. I'm still confident it can be done, but as has been suggested here, the solution is more complex than what I had thought.

                                I think probably TileList just wasn't meant for this type of layout. It's best for displays items that can show in the same sized Tile.

                                • 15. Re: Changing itemRenderer width dynamically
                                  Level 7

                                  "BrentLamborn" <webforumsuser@macromedia.com> wrote in message
                                  news:ghudbd$dkn$1@forums.macromedia.com...
                                  > Amy -
                                  >
                                  > Your're right. I guess I hadn't worked with TileList enough to realize
                                  > that
                                  > won't work. I'm still confident it can be done, but as has been suggested
                                  > here, the solution is more complex than what I had thought.
                                  >
                                  > I think probably TileList just wasn't meant for this type of layout. It's
                                  > best
                                  > for displays items that can show in the same sized Tile.
                                  >
                                  >

                                  The problem is that there isn't anything that _is_ designed for this.
                                  FlowBox is cool, but it doesn't give you any sort of aligned grid. Tile
                                  gives you a wonky shape. Grid, you have to manage the alignment of
                                  everything yourself, which is not as simple as it sounds. Possibly a Canvas
                                  with constraints would work, but that presents its own challenges.

                                  So far I have not found a good solution to this. I'd considered extending
                                  TileList to have it run through all of the items and size the cell to the
                                  biggest instead of the first, but the performance hit on that could be
                                  pretty intense. And if you tried to just do it based on the ones in the
                                  first visible "page", then what do you do if the last item completely blows
                                  out the page because it's so big? And don't get me started on scrolling...