Direccionamiento en CSS en Flex: ¿Botones solo en RichTextEditor?

Question

Quiero cambiar las características de fuente para los botones en la barra de herramientas del RichTextEditor, pero quiero que sean diferentes a otros botones en mi aplicación. ¿Hay alguna forma de hacerlo con solo CSS? Sé que puedo hacerlo con setStyle si es necesario ...

Answer 1

Una forma de hacerlo, ya que los subcomponentes del RichTextEditor se declaran en MXML y, por lo tanto, son de acceso público, es asignar sus propiedades styleName individualmente en tiempo de ejecución (después de que se active el evento creationComplete del contenedor, para asegurarse de que editor y todos sus elementos secundarios han sido creados), así:

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

Los documentos Flex no llaman a los subcomponentes (" boldButton " ;, " fontSizeCombo " ;, et al) por ID, pero la fuente del componente está disponible para ver, por lo que debería poder obtener toda la información que necesita del propio código fuente. Como uso FlexBuilder, generalmente uso el acceso directo Eclipse Ctrl + clic, en la etiqueta / nombre de clase, para saltar al archivo de definición de clase asociado, pero también puede abrir el archivo fuente directamente en [installDir] / sdks / [version ] /frameworks/src/mx/RichTextEditor.mxml para echar un vistazo por usted mismo.

Estoy seguro de que hay otros enfoques (setStyle siendo uno, aunque su uso explícito generalmente se desaconseja por razones de rendimiento), pero esto debería funcionar para usted. Sin embargo, una cosa a tener en cuenta, como verá cuando profundice en la fuente del componente, es que muchos de los botones en el conjunto de botones predeterminado en realidad usan PNG (por ejemplo, icon_style_bold.png), no texto, por eso mi ejemplo incluye una referencia al ComboBox en su lugar, para que pueda ver cómo se aplican los cambios de color; si desea cambiar el aspecto de los botones, tenga en cuenta que están utilizando la propiedad de estilo icon, no la configuración de estilo de fuente, para su apariencia.

¡Espero que ayude!

Answer 2

¡Gracias @Christian Nunciato! Este es mi código final, en mi componente que es un RichTextEditor (lo extiende). En la creación completa, llamo a esto

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

y luego en mi styleSheet, tengo esto

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

Impresionante. Gracias de nuevo!