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

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

0 голосов
/ 15 апреля 2011

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

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

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

Ответы [ 3 ]

2 голосов
/ 15 июня 2011

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

TextLineRecycler.textLineRecyclerEnabled = false;

Это решит проблему.

0 голосов
/ 06 мая 2013

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

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