3 Replies Latest reply on Oct 7, 2011 10:10 AM by Shongrunden

    custom iconitemrenderer opaqueBackground property transparent results in black background

    RonaldKamp

      Hi,

       

      I'm a Junior Java/Flex Developer at Ordina Belgium. Currently, I'm working on a mobile project. I need to have a list element with a gradient background. However, the list needs custom iconitemrenderers. The background of these renderers need to be transparent so that you can see the gradient color of the list background color. I have set the opaqueBackground property for the iconItemRenderer to 'Transparent' but when I run the application, it results in a black background. I have also tried with the alpha property, but then it sets the complete renderer to transparent, including the labels.

       

      Does anyone have a solution for this?

       

      Thanks in advance!!

       

      Kind regards,

       

      Ronald Kamp

      Junior Java/Flex Developer at Ordina Belgium

        • 1. Re: custom iconitemrenderer opaqueBackground property transparent results in black background
          Shongrunden Adobe Employee

          You'll want to override drawBackground and set opaqueBackground to null:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark">

             

              <s:List id="tripList" width="100%" height="100%" top="50">

                  <s:dataProvider>

                      <s:ArrayList>

                          <fx:Object name="test" />

                      </s:ArrayList>

                  </s:dataProvider>

                  <s:itemRenderer>

                      <fx:Component>

                          <s:IconItemRenderer labelField="name" messageField="desc" alpha="0.5">

                              <fx:Script>

                                  <![CDATA[

                                      override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void

                                      {

                                          super.drawBackground(unscaledWidth, unscaledHeight);

                                          opaqueBackground = null;

                                      }

                                  ]]>

                              </fx:Script>

                          </s:IconItemRenderer>

                      </fx:Component>

                  </s:itemRenderer>

              </s:List>

             

          </s:Application>

          • 2. Re: custom iconitemrenderer opaqueBackground property transparent results in black background
            RonaldKamp Level 1

            That didn't work. It just made the background white in stead of black. I still wasn't able to see the blue background of my list.

            • 3. Re: custom iconitemrenderer opaqueBackground property transparent results in black background
              Shongrunden Adobe Employee

              You probably want to tweak drawBackground():

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark">

                 

                  <s:Rect width="100%" height="100%">

                      <s:fill>

                          <s:LinearGradient rotation="90">

                              <s:GradientEntry color="white" />

                              <s:GradientEntry color="blue" />

                          </s:LinearGradient>

                      </s:fill>

                  </s:Rect>

                 

                  <s:List id="tripList" width="100%" height="100%" contentBackgroundAlpha="0">

                      <s:dataProvider>

                          <s:ArrayList>

                              <s:source>

                                  [0,1,2,3,4,5,6,7,8,9]

                              </s:source>

                          </s:ArrayList>

                      </s:dataProvider>

                      <s:itemRenderer>

                          <fx:Component>

                              <s:IconItemRenderer>

                                  <fx:Script>

                                      <![CDATA[

                                          override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void

                                          {

                                              // transparent background for hit detection

                                              graphics.beginFill(0xFFFFFF, 0);

                                              graphics.lineStyle();

                                              graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

                                              graphics.endFill();

                                             

                                              // turn off opaqueBackground since this renderer has some transparency

                                              opaqueBackground = null;

                                          }

                                      ]]>

                                  </fx:Script>

                              </s:IconItemRenderer>

                          </fx:Component>

                      </s:itemRenderer>

                  </s:List>

                 

              </s:Application>