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

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

1 голос
/ 01 февраля 2009

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

Ответы [ 2 ]

1 голос
/ 01 февраля 2009

Один из способов сделать это, поскольку подкомпоненты 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 - один, хотя его явное использование обычно не рекомендуется из соображений производительности), но это должно сработать для вас. Однако следует отметить, что, как вы увидите, когда копаетесь в источнике компонента, многие из кнопок в наборе кнопок по умолчанию на самом деле используют PNG (например, icon_style_bold.png), а не текст, поэтому мой пример вместо этого содержит ссылку на ComboBox, чтобы вы могли видеть, как применяются изменения цвета; если вы хотите изменить внешний вид кнопок, имейте в виду, что для их внешнего вида они используют свойство styleable icon, а не настройки стиля шрифта.

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

0 голосов
/ 02 февраля 2009

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

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;
}

Высокий. Еще раз спасибо!

...