发生大型重绘时,Flex Spark ItemRenderer标签会消失

时间:2011-04-14 23:48:22

标签: flex label itemrenderer flex-spark redraw

我的应用程序包含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;
}

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

我尝试在validateNow()上使用dataChange;删除css中的所有状态并仅使用css中的组件类型选择器;将样式直接放在ItemRenderer中的Label上;使用Flex Framework ToggleButton ChangeWatcher更新Label.text上的dataChange;重写setStyle(),以确保没有undefined值被传递到样式属性,getCurrentRendererState(),以确保状态设置为我所覆盖的状态,而updateDisplayList()到尝试在更新时设置Label颜色。

即使在重绘完成后,Label仍然会消失并且仍然缺失。选择和取消选择项目时,填充会正确更改。有没有人遇到过这个问题和/或任何人都可以想出一个我尚未尝试过的解决方法吗?

提前致谢...

3 个答案:

答案 0 :(得分:2)

在应用程序的某处调用下一个代码(即initializeHandler):

TextLineRecycler.textLineRecyclerEnabled = false;

这将解决问题。

答案 1 :(得分:0)

  1. 尝试从includeIn node
  2. 中删除ItemRendererLabel属性
  3. 尝试覆盖getCurrentRendererState()并返回准确的状态字符串,因为ItemRenderer会返回更多状态字符串。

答案 2 :(得分:0)

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