Блог

Главная - Вопросы по программированию - Метки Flex Spark ItemRenderer исчезают при больших перерисовках

Метки Flex Spark ItemRenderer исчезают при больших перерисовках

#apache-flex #label #itemrenderer #flex-spark #redraw

#apache-flex #метка #itemrenderer #flex-spark #перерисовка

Вопрос:

У меня есть приложение с картой 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 [ !"#$%amp;'()* ,- ] */
        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 [ !"#$%amp;'()* ,- ] */
        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 [ !"#$%amp;'()* ,- ] */
        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 [ !"#$%amp;'()* ,- ] */
        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() on dataChange ; удаляя все состояния в css и используя только селектор типов компонентов в css; помещая стили непосредственно на Label в ItemRenderer; используя Flex Framework ToggleButton с ChangeWatcher обновлением Label.text on dataChange ; переопределяя setStyle() , чтобы убедиться, что в свойства стиля не передавались никакие undefined значения, getCurrentRendererState() чтобы убедиться, что установленное состояние соответствует состоянию, которое я охватил, и updateDisplayList() чтобы попытаться установить Label цвет при обновлении.

Label По-прежнему исчезают и остаются отсутствующими даже после завершения всех перерисовок. Заливки правильно изменяются при выборе и отмене выбора элементов. Кто-нибудь когда-нибудь сталкивался с этой проблемой и / или кто-нибудь может предложить обходной путь, который я еще не пробовал?

Заранее спасибо…

Ответ №1:

Вызовите где-нибудь в вашем приложении следующий код (например, initializeHandler):

 TextLineRecycler.textLineRecyclerEnabled = false;

Это устранит проблему.

Ответ №2:

  1. Попробуйте удалить includeIn атрибут из ItemRendererLabel узла
  2. Попробуйте переопределить getCurrentRendererState() и вернуть точную строку состояния, потому что ItemRenderer возвращает гораздо больше строк состояния.

Комментарии:

1. Максим, я пробовал оба варианта. Ни то, ни другое не сработало. Хотя спасибо за помощь.

2. Попробуйте добавить removedFromStage прослушиватель к метке и поместите точку останова внутри нее. Вы будете знать, кто удаляет вашу метку.

Ответ №3:

Попробуйте дождаться события updateComplete() для сложного компонента, а затем validateNow() для «исчезающего» элемента.