Flex Spark ItemRenderer labels disappear when large redraws occur

0
votes

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...

3
apache-flexlabelitemrendererflex-sparkredraw

3 Answers

2
votes

Call somewhere in your Application the next code (i.e. initializeHandler):

TextLineRecycler.textLineRecyclerEnabled = false;

This will fix the problem.

0
votes
  1. Try removing includeIn attribute from ItemRendererLabel node
  2. Try overriding getCurrentRendererState() and returning the accurate state string because ItemRenderer returns much more state strings.
0
votes

Try to wait for the updateComplete() event on the complex component and then validateNow() on the "disappearing" element.