8 Replies Latest reply on Jul 18, 2011 9:53 AM by ale2k4

    MXTreeItemRenderer autoDrawBackground property doesnt work

    raedatoui

      in Flex 4, the official release version (4.0.0.13495), the autoDrawBackground property doesnt seem to have an effect on the MXTreeItemRenderer.

      I wish to disable the default background drawing behavior, and when i set this property to false on the ItemRenderer, the rollOver highlight keeps showing up.

      Here is my test

       

      <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/mx" minWidth="955" minHeight="600">

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

       

       

       

       

      <mx:Tree width="100%" height="100%" labelField="@label" itemRenderer="TestRenderer">

      <mx:dataProvider>

      <s:XMLListCollection id="MailBox">

      <fx:XMLList>

      <folder label="Mail">

      <folder label="INBOX"/>

      <folder label="Personal Folder">

      <Pfolder label="Business" />

      <Pfolder label="Demo" />

      <Pfolder label="Personal" isBranch="true" />

      <Pfolder label="Saved Mail" />

      </folder>

      <folder label="Sent" />

      <folder label="Trash" />

      </folder>

      </fx:XMLList>

      </s:XMLListCollection>

      </mx:dataProvider>

      </mx:Tree>

      </s:Application>

       

       

      and the itemRenderer (TestRenderer.mxml)

       

      <s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"  autoDrawBackground="false"

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

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

       

      <s:states>

      <s:State name="normal" />           

      <s:State name="hovered" />

      <s:State name="selected" />

      </s:states>

      <s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">

      <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">

      <s:fill>

      <s:SolidColor color="0xFFFFFF" />

      </s:fill>

      </s:Rect>

      <s:Group id="disclosureGroup">

      <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />

      </s:Group>

      <s:BitmapImage source="{treeListData.icon}" />

      <s:Label id="labelField" text="{treeListData.label}" paddingTop="2" color="0"/>

      </s:HGroup>

      </s:MXTreeItemRenderer>

       

       

      has this been addressed in later verisons of the SDK?

      thanks

      Raed

        • 1. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
          Flex harUI Adobe Employee

          That is more or less true.  It will affect whether the renderer draws over

          itself, but the MX components draw their own highlights.  You have to

          override drawHighlightIndicator instead.

          • 2. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
            vmvmvmvmvm

            Hi Flex harUI

             

            MXTreeItemRenderer is a spark component. The autoDrawBackground property doesn't work and drawHighlightIndicator doesn't exist for this component.

            • 3. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
              UnfinishedDream

              I thought I'd resurrect this post.

               

              So, if autoDrawBackground=false doesn't work (at least in my tests), how can I create a custom rollover or selection style.  For example, I want a rounded box with a gradient to indicator selection. 

               

              Currently, I've created a MXTreeItemRenderer and I can get the custom styles to appear, but I can't turn off the default rollover and selection colored boxes. 

               

              Any thoughts?

               

              Thanks,

               

              dana.

              • 4. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
                Flex harUI Adobe Employee

                MX list classes like Tree draw the backgrounds, the renderers don't draw

                backgrounds.  You have to subclass and override drawHighlightIndicator and

                drawSelectionIndicator.

                • 5. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
                  UnfinishedDream Level 1

                  Thanks for the reply and pointing out which methods I need to override.  Normally I'd do this, but it turns out we need to keep all our visual skins and renderers separate from the main components for theme switching later. 

                   

                  I did figure out an alternate method by doing some trickery with states and mouseOver/Out events within the MXTreeItemRenderer for custom rollover and selection graphics.  Basically I needed to show the rollover style/outline overtop of a selected item.  Alas, I didn't find a combined selectedAndHovered state. 

                   

                  To hide the existing Tree rollover and selection states, I also used another trick I found online to set the alpha of the Tree rollOverColor and selectionColor to 0.  

                   

                       rollOverColor = "#FFFFFFFF" (The extra two digits being the alpha)

                       selectionColor  = "#FFFFFFFF" 

                   

                  Arcane science it all seems to me.  Thanks for the help. 

                   

                  dana.

                  • 6. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
                    ale2k4

                    hi . i am having the same problem. Could you post the code of the solution?

                     

                    thanks in advance,

                     

                    Alex

                    • 7. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
                      UnfinishedDream Level 1

                      Here is the code I used.  The key changes are the mouseOut and mouseOver events.  I also added different graphic elements for different states.

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                                      xmlns:s="library://ns.adobe.com/flex/spark"
                                                      xmlns:mx="library://ns.adobe.com/flex/mx"
                                                      mouseOver="{if (this.currentState == 'selected' || this.currentState =='hovered') rolloverIndictor.visible = true}"
                                                      mouseOut="{if (this.currentState == 'selected') rolloverIndictor.visible =false}"
                                                      >
                            <s:states>
                                  <s:State name="normal" />          
                                  <s:State name="hovered" />
                                  <s:State name="selected" />
                            </s:states>
                            <s:Group width="100%" height="100%">
                                  <!-- rollover indicator -->
                                  <s:Rect id="rolloverIndictor"
                                              radiusX="6" radiusY="6"
                                              top="0" right="0" bottom="0" left="0"
                                              includeIn="hovered, selected"
                                              >
                                        <s:stroke>
                                              <s:SolidColorStroke id="hoverIndicatorFill" color="#c800ff" weight="2"/>
                                        </s:stroke>
                                  </s:Rect>
                                  <!-- selection indicator -->
                                  <s:Rect radiusX="6" radiusY="6" top="0" right="0" bottom="0" left="0" includeIn="selected">
                                        <s:fill>
                                              <s:LinearGradient id="selectionIndicatorFill" rotation="90">
                                                    <s:entries>
                                                          <s:GradientEntry color="#c800ff" ratio="0" alpha=".2" />
                                                          <s:GradientEntry color="#c800ff" ratio="1" alpha=".5" />
                                                    </s:entries>
                                              </s:LinearGradient>
                                        </s:fill>              
                                  </s:Rect> 
                                  <!-- contents -->
                                  <s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle" gap="8">
                                        <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
                                              <s:fill>
                                                    <s:SolidColor color="0xFFFFFF" />
                                              </s:fill>
                                        </s:Rect>
                                        <s:Group id="disclosureGroup">
                                              <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}"/>
                                        </s:Group>
                                        <s:BitmapImage source="{treeListData.icon}"/>
                                        <s:Label id="labelField"
                                                     text="{treeListData.label}"
                                                     paddingTop="2"
                                                     paddingRight="3"
                                                    color.selected="#ffffff"
                                                     width="100%"
                                                     maxDisplayedLines="1" />
                                  </s:HGroup>
                            </s:Group>
                      </s:MXTreeItemRenderer>

                      • 8. Re: MXTreeItemRenderer autoDrawBackground property doesnt work
                        ale2k4 Level 1

                        thanks a lot, you really help me!!!!