Indirizzamento in CSS in Flex: pulsanti solo in RichTextEditor?

Question

Voglio cambiare le caratteristiche del carattere per i pulsanti nella barra degli strumenti di RichTextEditor, ma voglio che siano diversi dagli altri pulsanti nella mia applicazione. Esiste un modo per farlo con solo CSS? So che posso farlo con setStyle se necessario ...

Answer 1

Un modo per farlo, poiché i sottocomponenti di RichTextEditor sono dichiarati in MXML e quindi accessibili al pubblico, è quello di assegnare le loro styleName proprietà singolarmente in fase di esecuzione (dopo che l'evento del contenitore creationComplete viene attivato, per essere sicuri che il editore e tutti i suoi figli sono stati creati), in questo modo:

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

I documenti Flex non richiamano i sottocomponenti (" boldButton " ;, " fontSizeCombo " ;, et al) per ID, ma l'origine del componente è disponibile per la visualizzazione, quindi dovresti essere in grado di ottenere tutte le informazioni necessarie dal codice sorgente stesso. Dato che utilizzo FlexBuilder, di solito uso il collegamento Eclipse Ctrl + clic, sul nome della tag / classe, per saltare al file di definizione della classe associato, ma puoi anche aprire il file sorgente direttamente su [installDir] / sdks / [versione ] /frameworks/src/mx/RichTextEditor.mxml per dare un'occhiata.

Sono sicuro che ci sono altri approcci (setStyle essendo uno, sebbene il suo uso esplicito sia generalmente sconsigliato per motivi di prestazioni), ma questo dovrebbe funzionare per te. Una cosa da notare, tuttavia, come vedrai quando scavi nella sorgente del componente, è che molti dei pulsanti nel set di pulsanti predefinito utilizzano effettivamente i PNG (ad esempio, icon_style_bold.png), non il testo, motivo per cui il mio esempio include invece un riferimento a ComboBox, in modo da poter vedere come si applicano i cambiamenti di colore; se si desidera modificare l'aspetto dei pulsanti, tenere presente che utilizzano la proprietà icon adattabile, non le impostazioni di stile del carattere, per il loro aspetto.

Spero che sia d'aiuto!

Answer 2

Grazie @Christian Nunciato! Questo è il mio codice finale, nel mio componente che è un RichTextEditor (lo estende). In creationComplete, lo chiamo

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 poi nel mio foglio di stile, ho questo

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

Impressionante. Grazie ancora!