Addressing in CSS in Flex: Buttons in RichTextEditor only?

Question

I want to change the font characteristics for buttons in the toolbar of the RichTextEditor, but I want them to be different than other buttons in my application. Is there any way to do this with just CSS? I know that I can do it with setStyle if necessary...

Answer 1

One way to do it, since the RichTextEditor's sub-components are declared in MXML and are therefore publicly accessible, is to assign their styleName properties individually at runtime (after the container's creationComplete event fires, to be sure the editor and all its children have been created), like so:

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

The Flex docs don't call out the subcomponents ("boldButton", "fontSizeCombo", et al) by ID, but the component's source is available for viewing, so you should be able to get all the info you need from the source code itself. Since I use FlexBuilder, I usually use the Eclipse Ctrl+click shortcut, on the tag/class name, to jump into the associated class-definition file, but you can also open the source file directly at [installDir]/sdks/[version]/frameworks/src/mx/RichTextEditor.mxml to have a look for yourself.

I'm sure there are other approaches (setStyle being one, although its explicit use is generally discouraged for performance reasons), but this ought to work out for you. One thing to note, though, as you'll see when you dig into the component's source, is that many of the buttons in the default button set actually use PNGs (e.g., icon_style_bold.png), not text, which is why my example includes a reference to the ComboBox instead, so you can see how the color changes apply; if you want to change the look of the buttons, be aware they're using the styleable icon property, not font-style settings, for their look and feel.

Hope it helps!

Answer 2

Thanks @Christian Nunciato! This is my final code, in my component that is a RichTextEditor (extends it). In the creationComplete, I call this

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

and then in my styleSheet, I have this

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

Awesome. Thanks again!