4 Replies Latest reply on Nov 13, 2009 2:45 PM by Shongrunden

    List/ItemRenderer troubles

    mewk Level 3

      Hey,

       

      I just submitted a bug here: http://bugs.adobe.com/jira/browse/SDK-24069 and thought I would see if the community had a workaround. Like always, I could just be missing something really basic. Thanks,

       

      - e

       

      Oh, the code (and playable swf) is posted at jira, but I'll reproduce it here (must use latest SDK build...).

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo">
        <fx:Script>
          <![CDATA[
            [Bindable] public var itemRenderersHeight:int = 60;
          ]]>
        </fx:Script>
        
        <s:HGroup gap="20" y="100" x="100">
          <s:List id="myList" borderVisible="false">
            <!--<s:layout><s:VerticalLayout /></s:layout>-->
            <s:ArrayCollection>
              <fx:Object label="hello"  color="0xff0000" />
              <fx:Object label="cruel"  color="0x00ff00" />
              <fx:Object label="world!" color="0x0000ff" />
            </s:ArrayCollection>
            <s:itemRenderer >
              <fx:Component>
                <s:ItemRenderer width="100%" height="{myItemRenderersHeight}"
                        mouseOver="{myBorder.setStyle('backgroundAlpha',.8)}"
                        mouseOut="{myBorder.setStyle('backgroundAlpha', .5)}"
                        creationComplete="init()">
                  <fx:Script>
                    <![CDATA[
                      import mx.binding.utils.BindingUtils;
                      import mx.binding.utils.ChangeWatcher;
                      [Bindable] public var myItemRenderersHeight:int = 60;
                      protected function init():void {
                        myItemRenderersHeight = this.parentApplication.itemRenderersHeight;
                        var watcherSetter:ChangeWatcher =
                          BindingUtils.bindSetter(updateHeight, this.parentApplication, "itemRenderersHeight");
                      }
                      public function updateHeight(val:int):void {
                        this.height = val;
                      }
                    ]]>
                  </fx:Script>
                  
                  <s:Border id="myBorder" width="100%" height="100%"
                        borderColor="green" borderWeight="2"
                        backgroundColor="{data.color}" backgroundAlpha=".5">
                    <s:Label id="myLabel" text="{data.label}" verticalCenter="0" horizontalCenter="0" />
                  </s:Border>
                </s:ItemRenderer>
              </fx:Component>
            </s:itemRenderer>
          </s:List>
          <s:Label height="{itemRenderersHeight}" width="100"
               text="height: {itemRenderersHeight}px" backgroundAlpha=".6" backgroundColor="black" color="white"
               verticalAlign="middle" textAlign="center"/>
          <s:NumericStepper stepSize="5" minimum="10" maximum="130" value="@{itemRenderersHeight}"/>
        </s:HGroup>
        
      </s:Application>
      

        • 1. Re: List/ItemRenderer troubles
          mewk Level 3

          grrrrr, super simple solution -- remove height/width properties of <s:ItemRenderer> and paste them into the <s:Border> class (the uicomponent wrapped by the itemrenderer). Also for a cleaner look, uncomment the list's layout property and set gap to -1.

           

          my understanding is that <s:itemRenderer> (pay attention to case) is a factory class, which churns out the contents of <s:ItemRenderer> (a subclass of the Group UIComponent), so I'm confused why I can't set the dimensions directly on <s:ItemRenderer>.

           

          Anyway, here is the fixed code:

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/halo">
          
            <fx:Script>
              <![CDATA[
                [Bindable] public var itemRenderersHeight:int = 60;
              ]]>
            </fx:Script>
          
            <s:HGroup gap="20" y="100" x="100">
              <s:List id="myList" borderVisible="false">
                <s:layout><s:VerticalLayout gap="-1"/></s:layout>
                <s:ArrayCollection>
                  <fx:Object label="hello"  color="0xff0000" />
                  <fx:Object label="cruel"  color="0x00ff00" />
                  <fx:Object label="world!" color="0x0000ff" />
                </s:ArrayCollection>
                <s:itemRenderer >
                  <fx:Component>
                    <s:ItemRenderer initialize="init()">
                      <fx:Script>
                        <![CDATA[
                          import mx.binding.utils.BindingUtils;
                          import mx.binding.utils.ChangeWatcher;
          
                          protected function init():void {
                            var watcherSetter:ChangeWatcher =
                              BindingUtils.bindSetter(updateHeight, this.parentApplication, "itemRenderersHeight");
                          }
                          public function updateHeight(val:int):void {
                            myBorder.height = val;
                          }
                        ]]>
                      </fx:Script>
                      <s:states>
                        <s:State name="normal" />
                        <s:State name="hovered" />
                      </s:states>
                      <s:Border id="myBorder" width="200"
                            borderColor="green" borderWeight="2"
                            backgroundColor="{data.color}"
                            backgroundAlpha=".5" backgroundAlpha.hovered=".9">
                        <s:Label id="myLabel" text="{data.label}" verticalCenter="0" horizontalCenter="0" />
                      </s:Border>
                    </s:ItemRenderer>
                  </fx:Component>
                </s:itemRenderer>
              </s:List>
              <s:Label height="{itemRenderersHeight}" width="100"
                   text="height: {itemRenderersHeight}px" backgroundAlpha=".6" backgroundColor="black" color="white"
                   verticalAlign="middle" textAlign="center"/>
              <s:NumericStepper stepSize="5" minimum="10" maximum="130" value="@{itemRenderersHeight}"/>
            </s:HGroup>
          
          </s:Application>
          

          - e

          • 2. Re: List/ItemRenderer troubles
            Shongrunden Adobe Employee

            Your original code seems to work if you use a SkinnableContainer instead of a Border.  That makes me think that it's a Border resizing issue, maybe even related to SDK-23824?

            1 person found this helpful
            • 3. Re: List/ItemRenderer troubles
              mewk Level 3

              Shongrunden,

               

              Could definitely be related. I took a peak into the sdk and noticed that the border's skin constructor sets the minWidth/minHeight to 112px, which is right about where the breakdown occurs in the test case I provided.

               

              Tried to debug further, but the border class files I could find in the sdk don't match up with the classes one actually gets from the spark.swc. However, if I do create a custom component from the source files I could find (Border.as and BorderSkin.as) and add some missing styles into the Border class, like [Style(name="bacgroundColor")], and run the code, the app works more or less as it should (well some styles were still missing...).

               

              Anyway, should have suspected problems with the Border class when I began! Thanks for your input,

               

              - e

              • 4. Re: List/ItemRenderer troubles
                Shongrunden Adobe Employee

                The fix to SDK-23824 did not solve this issue.

                 

                You're right, looks like it's the minWidth/minHeight of Border getting in the way.  Setting minWidth="0" and minHeight="0" will get the sample behaving as you are expecting.