Abordando o CSS no Flex: Buttons apenas no RichTexteDitor?

Question

Quero alterar as características da fonte para os botões na barra de ferramentas do RichTexteDitor, mas quero que eles sejam diferentes de outros botões do meu aplicativo. Existe alguma maneira de fazer isso apenas com CSS? Eu sei que posso fazer isso com o SetStyle, se necessário ...

Answer 1

Uma maneira de fazê-lo, já que os subcomponentes do RichTexteditor são declarados em MXML e, portanto, são acessíveis ao público, é atribuir seus styleName propriedades individualmente em tempo de execução (após o contêiner do contêiner creationComplete Eventos incêndios, para ter certeza de que o editor e todos os seus filhos foram criados), assim:

<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" />

Os documentos Flex não chamam os subcomponentes ("Boldbutton", "Fontsizecombo", et al) por ID, mas a fonte do componente está disponível para visualização, para que você possa obter todas as informações necessárias do código -fonte em si. Como eu uso o FlexBuilder, geralmente uso o atalho Eclipse CTRL+Click, no nome da tag/classe, para entrar no arquivo de definição de classe associado, mas você também pode abrir o arquivo de origem diretamente em [installdir]/sdks/[versão ] /frameworks/src/mx/richtexteditor.mxml para dar uma olhada por si mesmo.

Tenho certeza de que existem outras abordagens (setStyle Ser um, embora seu uso explícito geralmente seja desencorajado por razões de desempenho), mas isso deve se exercitar para você. Uma coisa a observar, no entanto, como você verá quando se aproxima da fonte do componente, é que muitos dos botões no conjunto de botões padrão realmente usam PNGs (por exemplo, icon_style_bold.png), não o texto, e é por isso que meu exemplo inclui uma referência ao ComboBox, para que você possa ver como as mudanças de cor se aplicam; Se você quiser alterar a aparência dos botões, esteja ciente de que eles estão usando o estilível icon Propriedade, não configurações no estilo de fonte, para sua aparência.

Espero que ajude!

Answer 2

Obrigado @Christian Nunciato! Este é o meu código final, no meu componente que é um RichTexteditor (estende -o). No CreationComplete, eu chamo isso

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

E então na minha folha de estilo, eu tenho isso

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

Incrível. Obrigado novamente!