Adressierung in CSS in Flex: Buttons in Rich nur?

Question

Ich möchte die Schriftmerkmale für Schaltflächen in der Symbolleiste des Richtexteditor ändern, aber ich möchte, dass sie als andere Schaltflächen in meiner Anwendung, anders zu sein. Gibt es eine Möglichkeit, dies mit nur CSS zu tun? Ich weiß, dass ich es mit setStyle bei Bedarf tun kann ...

Answer 1

Eine Möglichkeit, dies zu tun, da die Rich der Subkomponenten in MXML deklariert werden und sind daher öffentlich zugänglich sind, ist ihre styleName Eigenschaften zuweisen einzeln zur Laufzeit (nach dem creationComplete Ereignis ausgelöst wird der Behälter, sicher zu sein, der Herausgeber und alle seine Kinder geschaffen) worden, etwa 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" />

Die Flex docs die Subkomponenten nicht rufen ( „boldButton“, „fontSizeCombo“, et al) von ID, aber die Quelle der Komponente für die Anzeige zur Verfügung steht, so sollten Sie in der Lage sein, alle Informationen, die Sie benötigen aus die Quellcode selbst. Da ich Flexbuilder verwenden, verwende ich in der Regel des Eclipse-Ctrl + Verknüpfung klicken, auf den Tag / Klassennamen, in die zugehörigen Klasse-Definitionsdatei zu springen, aber Sie können auch die Quelldatei direkt an öffnen [installDir] / SDKs / [Version ] /frameworks/src/mx/RichTextEditor.mxml für sich selbst einen Blick haben.

Ich bin sicher, es gibt auch andere Ansätze (setStyle eines ist, obwohl seine explizite Verwendung im Allgemeinen aus Leistungsgründen abgeraten), aber dies sollte für Sie erarbeiten. Eine Sache zu beachten, wenn es, wie Sie sehen, wenn Sie in die Quelle der Komponente graben, ist, dass viele der Schaltflächen in der Standardschaltfläche gesetzt tatsächlich nutzen PNGs (zB icon_style_bold.png), nicht Text, weshalb mein Beispiel ein enthält Bezug auf die ComboBox stattdessen so können Sie sehen, wie die Farbänderungen gelten; wenn Sie das Aussehen der Tasten ändern möchten, beachten sie die styleable icon Eigenschaft verwenden, nicht font-style-Einstellungen für ihre Optik und Haptik.

Hoffe, es hilft!

Answer 2

Danke @Christian Nunciato! Dies ist mein letzter Code in meiner Komponente, die eine Richtexteditor ist (erweitert sie). Im creationComplete-, nenne ich diese

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

und dann in meinem Sheet Ich habe diese

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

Awesome. Nochmals vielen Dank!