当发生大规模重绘时,Flex Spark ItemRenderer 标签消失
我有一个带有 Google 地图、面积图和包含列表的手风琴的应用程序。当列表中的选择发生更改时,应用程序会从服务器获取数据并更新图表和地图,重新定位地图以包含其视口中的所有标记,并启动 SeriesEffect 以动画方式重新绘制图表数据。
当用户更改选择并在重新绘制地图和图表时继续将鼠标悬停在列表中的项目上时,项目渲染器上的标签会消失。
项目渲染器代码如下:
<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 [ :;<=>?@ ] */
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 [ :;<=>?@ ] */
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 [ :;<=>?@ ] */
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 [ :;<=>?@ ] */
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 框架 ToggleButton
和 ChangeWatcher
更新 dataChange
上的 Label.text
;覆盖 setStyle()
以确保没有 undefined
值传递给样式属性,覆盖 getCurrentRendererState()
以确保状态集是我已经介绍过的状态,以及在更新时尝试设置 Label
颜色的 updateDisplayList()
。
即使所有重绘完成后,Label
仍然消失并保持丢失状态。选择和取消选择项目时,填充会正确更改。有没有人遇到过这个问题和/或有人能想出我尚未尝试过的解决方法吗?
提前致谢...
I have an application with a Google Map, an Area Chart, and an accordion containing a list. When the selection in the list is changed, the application fetches data from the server and updates the chart and map, repositioning the map to contain all markers within its viewport and kicking off a SeriesEffect to animate the chart data redraw.
When a user changes selections and continues to mouse over the items in the list while the map and chart are redrawing, the labels on the item renderers disappear.
The item renderer code is the following:
<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>
It is styled using the following 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 [ :;<=>?@ ] */
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 [ :;<=>?@ ] */
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 [ :;<=>?@ ] */
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 [ :;<=>?@ ] */
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;
}
The expected behavior is that the label should always render.
I've tried using validateNow()
on dataChange
; removing all the states in the css and using only the component type selector in the css; putting the styles directly on the Label
in the ItemRenderer; using a Flex Framework ToggleButton
with a ChangeWatcher
updating the Label.text
on dataChange
; overriding setStyle()
to be sure that no undefined
values were being passed to the style properties, getCurrentRendererState()
to make sure the state set was a state I had covered, and updateDisplayList()
to try to set the Label
color while updating.
The Label
still disappears and stays missing even after all the redrawing is complete. The fills change correctly when items are selected and deselected. Has anyone ever ran into this issue and/or can anyone come up with a workaround that I have not yet attempted?
Thanks in advance...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在应用程序中的某个位置调用下一个代码(即initializeHandler):
这将解决问题。
Call somewhere in your Application the next code (i.e. initializeHandler):
This will fix the problem.
ItemRendererLabel
节点中删除includeIn
属性getCurrentRendererState()
并返回准确的状态字符串,因为ItemRenderer
返回很多更多状态字符串。includeIn
attribute fromItemRendererLabel
nodegetCurrentRendererState()
and returning the accurate state string becauseItemRenderer
returns much more state strings.尝试等待复杂组件上的 updateComplete() 事件,然后等待“消失”元素上的 validateNow() 事件。
Try to wait for the updateComplete() event on the complex component and then validateNow() on the "disappearing" element.