10 Replies Latest reply on Aug 28, 2006 9:48 AM by Flex harUI

    Tree & Datagrid highlight color bug?

    Opsware_Jeff
      I developed an application that's essentially a property sheet with a tree and dataGrid in it and it works just fine. Specifically, when I roll over a tree item or row in the dataGrid , color of the background automatically changes to the nice default "highlight" blue.

      Later I decide I want to have this property sheet application pop up by clicking on a button in a launcher app, so I build the launcher and change the property sheet application so it can be launched (replace Application with titleWindow, etc... very easy).

      Now when I launch the property sheet, the background color of the selected and rolled over tree items and dataGrid rows are black, and the text color is super dark gray!!!

      What gives? Is this a known bug and is there a work around?

      By the way, I'm not using any Style sheet or Style declarations. It's all very vanilla code, and everything else about the popped up property sheet works as before. It's just the highlight color that's wonky.

      Cheers,
      Jeff
        • 1. Re: Tree & Datagrid highlight color bug?
          ntsiii Level 3
          Are you using an itemRenderer and is it based on mx:Label?

          I had problems with the default highlight behaviors when I used Label, but wrapping that in a Canvas fixed it for me.

          I did not take the time to analyze the why.

          Tracy
          • 2. Re: Tree & Datagrid highlight color bug?
            Opsware_Jeff Level 1
            Hi Tracy,
            Thanks for the idea, but no, I'm not using any itemRenderers for anything. Just for grins I put my whole tree inside a canvas, but that didn't help.

            Still stuck on this if you or anyone else has any other suggestions.

            Cheers,
            Jeff
            • 3. Re: Tree & Datagrid highlight color bug?
              inlineblue Level 1
              Sounds odd. Haven't ran across this. Can you post an example TitleWindow with a wonky grid?
              • 4. Re: Tree & Datagrid highlight color bug?
                ntsiii Level 3
                Yeah. Abstract this into a minimal sample app that shows the issue. We'll look at it. (of course the dumb forum will corrupt the format of the posted code)

                The other thing that might happen is the process of creating a sample app will show you what is the problem
                • 5. Re: Tree & Datagrid highlight color bug?
                  Opsware_Jeff Level 1
                  Sure. Here is the boiled down Launcher Application, from a file named "WonkyDesktop.mxml":


                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

                  <mx:Script>
                  <![CDATA[
                  // Import the PopUpManager.
                  import mx.managers.PopUpManager;
                  import mx.core.IFlexDisplayObject;
                  ]]>
                  </mx:Script>

                  <mx:Button click="var appWindow:IFlexDisplayObject = PopUpManager.createPopUp(this, WonkyHighlight, false); PopUpManager.centerPopUp(appWindow);" label="Pop Up Window" width="160" height="24" verticalCenter="0" horizontalCenter="0"/>

                  </mx:Application>


                  Here is the code for the popped up window, from a file named "WonkyHighlight.mxml":


                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="382" height="226" title="Highlight Colors are Wonky!!!" showCloseButton="true" close="PopUpManager.removePopUp(this);" borderAlpha="1">

                  <mx:Script>
                  <![CDATA[
                  // Import the PopUpManager.
                  import mx.managers.PopUpManager;
                  ]]>
                  </mx:Script>

                  <mx:XMLListCollection id="viewTreeData">
                  <mx:XMLList xmlns="">
                  <viewName label="Tree Item 1"/>
                  <viewName label="Tree Item 2"/>
                  </mx:XMLList>
                  </mx:XMLListCollection>

                  <mx:ArrayCollection id="TestData">
                  <mx:Object label="Row 1"/>
                  <mx:Object label="Row 2"/>
                  </mx:ArrayCollection>

                  <mx:Tree x="10" dataProvider="{viewTreeData}" selectedIndex="0" labelField="@label" showRoot="false" enabled="true" y="10"/>
                  <mx:DataGrid dataProvider="{TestData}" editable="true" x="200" y="10">
                  <mx:columns>
                  <mx:DataGridColumn dataField="label" headerText="Wonky"/>
                  </mx:columns>
                  </mx:DataGrid>

                  </mx:TitleWindow>


                  Please just create these two files in your environment and try it out. If you see the standard default.css highlight and rollover colors (shades of blue) then there's something funky about my installation. Otherwise there's either something wrong with my code or a there's a bug in Flex.

                  Thanks so much!

                  Jeff
                  • 6. Re: Tree &amp; Datagrid highlight color bug?
                    ntsiii Level 3
                    Ok, they sure are Wonky! I'd say you found a bug. I don't have a solution, but I will poke around and see what I can uncover.

                    Tracy
                    • 7. Re: Tree &amp; Datagrid highlight color bug?
                      ntsiii Level 3
                      I DO have a solution:

                      Pull the code out of the click property an put it in a function, the problem goes away.

                      Now your code compiles ok, so maybe you aren't "wrong", but what were you thinking when you declared a variable in a click hanlder property? ;)

                      Tracy

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                      <mx:Script><![CDATA[
                      import mx.managers.PopUpManager;
                      import mx.core.IFlexDisplayObject;

                      private function showPopup():void
                      {
                      var appWindow:IFlexDisplayObject = PopUpManager.createPopUp(this, TreePopUp, false);
                      PopUpManager.centerPopUp(appWindow);
                      }//showPopup

                      ]]></mx:Script>
                      <mx:Button click="showPopup()" label="Pop Up Window" width="160" height="24" verticalCenter="0" horizontalCenter="0"/>
                      </mx:Application>
                      • 8. Re: Tree &amp; Datagrid highlight color bug?
                        ntsiii Level 3
                        A little further testing shows the problem happens any time you show the popup from within the click handler property, and is not related to the var or the centerPopup:

                        click="PopUpManager.createPopUp(this, TreePopUp, false)"

                        causes the problem.

                        Tracy
                        • 9. Re: Tree &amp; Datagrid highlight color bug?
                          inlineblue Level 1
                          Seems like a bug involving some kind of optimization by the code generator. If the code generator doesn't think you're using a certain component, it won't generate code to set that component's default styles. Specifically, in the generated method "<app_name>_StylesInit()", you would get this if the DataGrid is used:

                          var styleNames:Array = [ "fontWeight", "verticalGridLineColor", "textAlign", "disabledColor", "dropShadowColor", "fontThickness", "textIndent", "fontFamily", "errorColor", "modalTransparencyBlur", "backgroundDisabledColor", "barColor", "fontStyle", "modalTransparencyDuration", "horizontalGridLineColor", "fontGridFitType", "modalTransparencyColor", "alternatingItemColors", "fontSharpness", "rollOverColor", "textRollOverColor", "fontSize", "textSelectedColor", "selectionColor", "modalTransparency", "selectionDisabledColor", "fontAntiAliasType", "themeColor", "color", "headerColors", ];

                          But you get only this if the DataGrid is not used:

                          var styleNames:Array = [ "fontWeight", "textAlign", "disabledColor", "dropShadowColor", "fontThickness", "textIndent", "fontFamily", "errorColor", "modalTransparencyBlur", "backgroundDisabledColor", "barColor", "fontStyle", "modalTransparencyDuration", "fontGridFitType", "modalTransparencyColor", "fontSharpness", "textRollOverColor", "fontSize", "textSelectedColor", "modalTransparency", "fontAntiAliasType", "themeColor", "color", ];

                          Notice that the grid styles are missing, so the grid would look all black.

                          The problem is that I don't think the code generator checks its own generated code when making this decision. In the given example, the only reference to DataGrid comes from the reference to the WonkyHighlight class in the call to createPopUp(). By putting this call inside the click attribute, it effectively becomes "generated code", thus the only reference to the DataGrid is "lost". This would be why it works fine if the code is put inside a user-defined method.

                          Yes, I just had to find out what was going on. Hopefully someone at Adobe is reading this. :-)
                          • 10. Re: Tree &amp; Datagrid highlight color bug?
                            Flex harUI Adobe Employee
                            I opened a bug for this issue. Sorry for the inconvenience.