2011-04-14 74 views
0

我有一个包含Google Map,Area Chart和一个包含列表的手风琴的应用程序。当列表中的选择发生变化时,应用程序将从服务器获取数据并更新图表和地图,重新定位地图以在其视口中包含所有标记,并启动SeriesEffect以动画图表数据重绘。Flex Spark ItemRenderer标签在大幅重绘时消失

当用户更改所选内容并在地图和图表重绘时继续将鼠标悬停在列表中的项目上时,项目渲染器上的标签消失。

的项目渲染器的代码如下:

<s:ItemRenderer xmlns:fx = "http://ns.adobe.com/mxml/2009" 
      xmlns:s = "library://ns.adobe.com/flex/spark" 
      xmlns:mx = "library://ns.adobe.com/flex/mx" 
      autoDrawBackground = "false" 
      xmlns:components = "com.ibenergy.components.*"> 
<s:layout> 
    <s:BasicLayout> 

    </s:BasicLayout> 
</s:layout> 

<s:states> 
    <s:State name = "hovered" /> 

    <s:State name = "selected" /> 

    <s:State name = "normal" /> 

</s:states> 

<fx:Script> 
    <![CDATA[ 
     import mx.core.UIComponent; 
     import mx.states.OverrideBase; 
     import spark.components.DataGroup; 
     import valueObjects.DateRange_type; 
     import valueObjects.Utilities_type; 

     private var _data : Object; 

     private var _dataLabel : String; 

     [Bindable("dataChanged")] 
     override public function get data() : Object { 
      return _data; 
     } 

     override public function set data (value : Object) : void { 
      _data = value; 

      if (value is String) { 
       dataLabel = String (value); 
      } else if (value is Utilities_type) { 
       dataLabel = Utilities_type (value).Name; 
      } else if (value is DateRange_type) { 
       dataLabel = DateRange_type (value).QueryName; 
      } 
      dispatchEvent (new Event ("dataChanged")); 
     } 

     [Bindable] 
     public function get dataLabel() : String { 
      return _dataLabel; 
     } 

     public function set dataLabel (value : String) : void { 
      _dataLabel = value; 
     } 
    ]]> 
</fx:Script> 

<!-- layer 2: fill --> 

<!--- @private --> 
<s:Rect id = "fill" 
     left = "1" 
     top = "1" 
     width = "24" 
     height = "24" 
     radiusX = "2"> 
    <s:fill> 
     <s:LinearGradient rotation = "90"> 
      <s:GradientEntry color = "0x3F3F40" color.selected = "0x999999" alpha = "1.00" ratio = "0.00" /> 

      <s:GradientEntry color = "0x999999" color.selected = "0x72A94A" alpha = "1.00" ratio = "1.00" /> 
     </s:LinearGradient> 
    </s:fill> 
</s:Rect> 

<!-- layer 4: fill highlight --> 

<!--- @private --> 
<s:Rect id = "highlight" 
     left = "1" 
     top = "1" 
     width = "24" 
     height = "24" 
     radiusX = "2"> 
    <s:fill> 
     <s:LinearGradient rotation = "90"> 
      <s:GradientEntry color = "0x3F3F40" 
          ratio = "0.0" 
          alpha = "1.0" 
          alpha.selected = "0.22" 
          alpha.hovered = "0.22" /> 

      <s:GradientEntry color = "0xBBBDBF" ratio = "0.125" alpha = "1.0" /> 

      <s:GradientEntry color = "0xFFFFFF" ratio = "0.25" alpha = "0" /> 
     </s:LinearGradient> 
    </s:fill> 
</s:Rect> 

<!-- layer 5: highlight stroke (all states except down) --> 

<!--- @private --> 
<s:Rect id = "highlightStroke" 
     left = "1" 
     top = "1" 
     width = "24" 
     height = "24" 
     radiusX = "2" 
     excludeFrom = "selected"> 
    <s:stroke> 
     <s:LinearGradientStroke rotation = "90" weight = "1"> 
      <s:GradientEntry color = "0x3F3F40" alpha = "1.0" /> 

      <s:GradientEntry color = "0xBBBDBF" alpha = "1.0" /> 
     </s:LinearGradientStroke> 
    </s:stroke> 
</s:Rect> 


<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> 

<!--- @private --> 
<s:Rect id = "border" 
     left = "0" 
     right = "0" 
     top = "0" 
     bottom = "0" 
     width = "69" 
     height = "20" 
     radiusX = "2"> 
    <s:stroke> 
     <s:LinearGradientStroke rotation = "90" weight = "1"> 
      <s:GradientEntry color = "0x000000" alpha = "0.00" /> 

      <s:GradientEntry color = "0x000000" alpha = "0.00" /> 
     </s:LinearGradientStroke> 
    </s:stroke> 
</s:Rect> 

<!-- layer 8: text --> 

<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay --> 

<!-- font-weight:bold; 
font-size:8; 
color:#000000;--> 
<components:ItemRendererLabel id = "labelDisplay" 
           renderingMode = "cff" 
           textAlign = "left" 
           left = "29" 
           verticalAlign = "middle" 
           right = "2" 
           top = "2" 
           bottom = "2" 
           text = "{ dataLabel }" 
           includeIn = "hovered,normal,selected"> 

</components:ItemRendererLabel> 

它是使用下面的CSS样式:

@font-face { 
    src: url("com/ibenergy/fonts/Myriad/MyriadWebPro.ttf") ; 
    fontFamily: MyriadHalo; 
    embed-as-cff:false; 
    font-weight:normal; 
    font-style:normal; 
    unicodeRange: 
     U+0041-U+005A, /* Upper-Case [A..Z] */ 
     U+0061-U+007A, /* Lower-Case a-z */ 
     U+0030-U+003F, /* Numbers [0..9] */ 
     U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */ 
     U+003A-U+0040, /* Special Chars [ :;<=>[email protected] ] */ 
     U+005B-U+0060, /* Special Chars [ [\]^_` ] */ 
     U+007B-U+007E, /* Special Chars [ {|}~ ] */ 
     U+00A3-U+00A3, /* British Pound Symbol */ 
     U+00A9-U+00A9, /* Copyright Symbol */ 
     U+00AE-U+00AE, /* Registered Symbol */ 
     U+00B0-U+00B0, /* Degrees Symbol */ 
     U+00BC-U+00BE, /* Fractions Symbols */ 
     U+00A1-U+00A1, /* Latin Character: ¡ */ 
     U+00BF-U+00BF, /* Latin Character: ¿ */ 
     U+00C0-U+00FF, /* Latin Characters */ 
     U+2013-U+2014, /* EN Dash, EM Dash */ 
     U+2018-U+2019, /* Directional Single Quotes */ 
     U+201C-U+201D, /* Directional Double Quotes */ 
     U+2022-U+2023, /* Bullets */ 
     U+2120-U+2120, /* SM */ 
     U+2122-U+2122; /* Trade mark (TM) */ 
} 

@font-face { 
    src: url("com/ibenergy/fonts/Myriad/MyriadWebPro-Bold.ttf") ; 
    fontFamily: MyriadHalo; 
    embed-as-cff:false; 
    fontWeight: bold; 
    font-style:normal; 
    unicodeRange: 
     U+0041-U+005A, /* Upper-Case [A..Z] */ 
     U+0061-U+007A, /* Lower-Case a-z */ 
     U+0030-U+003F, /* Numbers [0..9] */ 
     U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */ 
     U+003A-U+0040, /* Special Chars [ :;<=>[email protected] ] */ 
     U+005B-U+0060, /* Special Chars [ [\]^_` ] */ 
     U+007B-U+007E, /* Special Chars [ {|}~ ] */ 
     U+00A3-U+00A3, /* British Pound Symbol */ 
     U+00A9-U+00A9, /* Copyright Symbol */ 
     U+00AE-U+00AE, /* Registered Symbol */ 
     U+00B0-U+00B0, /* Degrees Symbol */ 
     U+00BC-U+00BE, /* Fractions Symbols */ 
     U+00A1-U+00A1, /* Latin Character: ¡ */ 
     U+00BF-U+00BF, /* Latin Character: ¿ */ 
     U+00C0-U+00FF, /* Latin Characters */ 
     U+2013-U+2014, /* EN Dash, EM Dash */ 
     U+2018-U+2019, /* Directional Single Quotes */ 
     U+201C-U+201D, /* Directional Double Quotes */ 
     U+2022-U+2023, /* Bullets */ 
     U+2120-U+2120, /* SM */ 
     U+2122-U+2122; /* Trade mark (TM) */ 
} 

@font-face { 
    src: url("com/ibenergy/fonts/Myriad/MyriadPro-It.otf") ; 
    fontFamily: MyriadHalo; 
    embed-as-cff:false; 
    fontStyle: italic; 
    fontWeight: normal; 
    unicodeRange: 
     U+0041-U+005A, /* Upper-Case [A..Z] */ 
     U+0061-U+007A, /* Lower-Case a-z */ 
     U+0030-U+003F, /* Numbers [0..9] */ 
     U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */ 
     U+003A-U+0040, /* Special Chars [ :;<=>[email protected] ] */ 
     U+005B-U+0060, /* Special Chars [ [\]^_` ] */ 
     U+007B-U+007E, /* Special Chars [ {|}~ ] */ 
     U+00A3-U+00A3, /* British Pound Symbol */ 
     U+00A9-U+00A9, /* Copyright Symbol */ 
     U+00AE-U+00AE, /* Registered Symbol */ 
     U+00B0-U+00B0, /* Degrees Symbol */ 
     U+00BC-U+00BE, /* Fractions Symbols */ 
     U+00A1-U+00A1, /* Latin Character: ¡ */ 
     U+00BF-U+00BF, /* Latin Character: ¿ */ 
     U+00C0-U+00FF, /* Latin Characters */ 
     U+2013-U+2014, /* EN Dash, EM Dash */ 
     U+2018-U+2019, /* Directional Single Quotes */ 
     U+201C-U+201D, /* Directional Double Quotes */ 
     U+2022-U+2023, /* Bullets */ 
     U+2120-U+2120, /* SM */ 
     U+2122-U+2122; /* Trade mark (TM) */ 
} 

@font-face { 
    src: url("com/ibenergy/fonts/Myriad/MyriadPro-BoldIt.otf") ; 
    fontFamily: MyriadHalo; 
    fontStyle: italic; 
    embed-as-cff:false; 
    fontWeight: bold; 
    unicodeRange: 
     U+0041-U+005A, /* Upper-Case [A..Z] */ 
     U+0061-U+007A, /* Lower-Case a-z */ 
     U+0030-U+003F, /* Numbers [0..9] */ 
     U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */ 
     U+003A-U+0040, /* Special Chars [ :;<=>[email protected] ] */ 
     U+005B-U+0060, /* Special Chars [ [\]^_` ] */ 
     U+007B-U+007E, /* Special Chars [ {|}~ ] */ 
     U+00A3-U+00A3, /* British Pound Symbol */ 
     U+00A9-U+00A9, /* Copyright Symbol */ 
     U+00AE-U+00AE, /* Registered Symbol */ 
     U+00B0-U+00B0, /* Degrees Symbol */ 
     U+00BC-U+00BE, /* Fractions Symbols */ 
     U+00A1-U+00A1, /* Latin Character: ¡ */ 
     U+00BF-U+00BF, /* Latin Character: ¿ */ 
     U+00C0-U+00FF, /* Latin Characters */ 
     U+2013-U+2014, /* EN Dash, EM Dash */ 
     U+2018-U+2019, /* Directional Single Quotes */ 
     U+201C-U+201D, /* Directional Double Quotes */ 
     U+2022-U+2023, /* Bullets */ 
     U+2120-U+2120, /* SM */ 
     U+2122-U+2122; /* Trade mark (TM) */ 
} 
controls|PrecisionOptionRenderer{ 
    font-family:MyriadHalo; 
    rendering-mode:normal; 
} 
controls|PrecisionOptionRenderer:normal, 
controls|PrecisionOptionRenderer:hovered, 
controls|PrecisionOptionRenderer:selected{ 
    font-weight:bold; 
    font-size:8; 
    color:#000000; 
} 

预期的行为是,标签应始终呈现。

我试过在dataChange上使用validateNow();删除css中的所有状态并仅使用css中的组件类型选择器;将样式直接放在ItemRenderer中的Label;使用Flex框架ToggleButtonChangeWatcher更新Label.textdataChange;覆盖setStyle()以确保没有undefined值正在传递到样式属性,getCurrentRendererState()以确保状态集是我已经覆盖的状态,并且updateDisplayList()尝试在更新时设置Label颜色。

即使完成所有重绘,Label仍会消失并保持丢失状态。选择和取消选择项目时,填充会正确更改。有没有人遇到这个问题和/或任何人都可以想出一个我还没有尝试过的解决方法?

在此先感谢...

回答

2

呼叫某处你的应用程序的下一个代码(即initializeHandler):

TextLineRecycler.textLineRecyclerEnabled = false; 

这将解决这个问题。

0
  1. 尝试从ItemRendererLabel节点中删除includeIn属性
  2. 尝试重写getCurrentRendererState()并返回准确的状态字符串,因为ItemRenderer回报更加状态的字符串。
+0

马克西姆,我试过这两个。都没有工作。感谢您的帮助。 – 2011-04-18 15:14:53

+0

尝试添加'removedFromStage'侦听器来标记并在其中放置断点。你会知道谁删除了你的标签。 – 2011-04-23 05:41:21

0

尝试等待复杂组件上的updateComplete()事件,然后尝试在“消失”元素上使用validateNow()。