Adressage en CSS dans Flex: des boutons dans RichTextEditor uniquement?

Question

Je souhaite modifier les caractéristiques de police des boutons de la barre d'outils de RichTextEditor, mais je souhaite qu'elles soient différentes des autres boutons de mon application. Y a-t-il un moyen de faire cela uniquement avec du CSS? Je sais que je peux le faire avec setStyle si nécessaire ...

Answer 1

Une façon de le faire, car les sous-composants de RichTextEditor sont déclarés en MXML et sont donc publiquement accessibles, consiste à affecter leurs propriétés styleName individuellement au moment de l'exécution (après le déclenchement de l'événement creationComplete du conteneur, pour être sûr que le éditeur et tous ses enfants ont été créés), comme suit:

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

Les documents Flex n'appellent pas les sous-composants (& "boldButton &"; & "fontSizeCombo &"; et autres) par ID, mais la source du composant est disponible. pour la visualisation, vous devriez donc pouvoir obtenir toutes les informations dont vous avez besoin à partir du code source lui-même. Depuis que j'utilise FlexBuilder, j’utilise habituellement le raccourci Eclipse Ctrl + clic sur le nom de balise / classe pour accéder au fichier de définition de classe associé. Vous pouvez également ouvrir le fichier source directement à [répInstall] / sdks / [version. ] /frameworks/src/mx/RichTextEditor.mxml pour vous-même.

Je suis sûr qu'il existe d'autres approches (setStyle en étant une, bien que son utilisation explicite soit généralement déconseillée pour des raisons de performances), mais cela devrait marcher pour vous. Une chose à noter, cependant, comme vous le constaterez plus en détail dans la source du composant, est que bon nombre des boutons du jeu de boutons par défaut utilisent des fichiers PNG (par exemple, icon_style_bold.png), et non du texte. C'est pourquoi mon exemple inclut à la place une référence à la ComboBox afin que vous puissiez voir comment les changements de couleur s'appliquent; Si vous souhaitez modifier l'aspect des boutons, sachez qu'ils utilisent la propriété stylable icon, et non les paramètres de style de police, pour leur apparence.

J'espère que ça aide!

Answer 2

Merci @Christian Nunciato! Ceci est mon code final, dans mon composant qui est un RichTextEditor (l’étend). Dans la creationComplete, j'appelle cela

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

puis dans ma feuille de style, j'ai ce

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

Génial. Merci encore!