Адресация в CSS в Flex:Кнопки только в RichTextEditor?

StackOverflow https://stackoverflow.com/questions/500366

  •  20-08-2019
  •  | 
  •  

Вопрос

Я хочу изменить характеристики шрифта для кнопок на панели инструментов RichTextEditor, но я хочу, чтобы они отличались от других кнопок в моем приложении. Есть ли какой-нибудь способ сделать это только с помощью CSS? Я знаю, что могу сделать это с помощью setStyle, если это необходимо...

Это было полезно?

Решение

Один из способов сделать это, поскольку подкомпоненты RichTextEditor объявлены в MXML и, следовательно, общедоступны, - назначить их styleName свойства по отдельности во время выполнения (после того, как контейнер creationComplete срабатывает событие, чтобы убедиться, что редактор и все его дочерние элементы были созданы), вот так:

<mx:Style>

    .myRTECombo
    {
        color: #FF0000;
    }

</mx:Style>

<mx:Script>
    <![CDATA[

        private function creationCompleteHandler(event:Event):void
        {
            rte.fontFamilyCombo.styleName = "myRTECombo";
            rte.fontSizeCombo.styleName = "myRTECombo";
        }

    ]]>
</mx:Script>

<mx:RichTextEditor id="rte" />

Документы Flex не вызывают подкомпоненты ("boldButton", "fontSizeCombo" и др.) по идентификатору, но исходный код компонента доступен для просмотра, поэтому вы сможете получить всю необходимую информацию из самого исходного кода.Поскольку я использую FlexBuilder, я обычно использую сочетание клавиш Eclipse Ctrl + click на теге / имени класса, чтобы перейти к соответствующему файлу определения класса, но вы также можете открыть исходный файл непосредственно по адресу [installDir] /sdks / [version]/frameworks/src/mx/RichTextEditor.mxml, чтобы посмотреть самому.

Я уверен, что есть и другие подходы (setStyle быть единым целым, хотя его явное использование обычно не рекомендуется по соображениям производительности), но это должно сработать для вас.Однако следует отметить одну вещь, как вы увидите, когда углубитесь в исходный код компонента, это то, что многие кнопки в наборе кнопок по умолчанию на самом деле используют PNGS (например, icon_style_bold.png), а не текст, вот почему мой пример включает ссылку на поле со списком вместо этого, чтобы вы могли видеть, как применяются изменения цвета;если вы хотите изменить внешний вид кнопок, имейте в виду, что они используют styleable icon свойство, а не настройки стиля шрифта, для их внешнего вида.

Надеюсь, это поможет!

Другие советы

Спасибо @Christian Nunciato!Это мой окончательный код в моем компоненте, который является RichTextEditor (расширяет его).В creationComplete я называю это

private function setUpStyleNames():void {
    setUpStyleNamesInner(toolbar.getChildren());
    setUpStyleNamesInner(toolBar2.getChildren());
}

private function setUpStyleNamesInner(children:Array):void {
    for each (var child:DisplayObject in children) {
        if (child is UIComponent) {
            UIComponent(child).styleName = "rteInnards";
        }
    }
}

и затем в моей таблице стилей у меня есть это

.rteInnards {
    color: #FF0000;
    fontSize: 25px;
}

Потрясающе.Еще раз спасибо!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top