Flex の CSS でのアドレス指定:ボタンはリッチテキストエディターのみですか?

StackOverflow https://stackoverflow.com/questions/500366

  •  20-08-2019
  •  | 
  •  

質問

リッチテキストエディターのツールバーのボタンのフォント特性を変更したいのですが、アプリケーション内の他のボタンとは異なるものにしたいと考えています。 CSSだけでこれを行う方法はありますか？ 必要に応じて setStyle で実行できることはわかっています...

役に立ちましたか？

解決

リッチテキストエディタのサブコンポーネントは MXML で宣言されており、パブリックにアクセスできるため、そのための 1 つの方法は、そのサブコンポーネントに styleName 実行時 (コンテナーの実行後) にプロパティを個別に設定する creationComplete イベントが発生し、エディターとそのすべての子が作成されたことを確認します)。次のようになります。

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

Flex ドキュメントでは、サブコンポーネント (「boldButton」、「fontSizeCombo」など) を ID で呼び出していませんが、コンポーネントのソースは表示できるため、ソース コードから必要な情報をすべて取得できるはずです。自体。私は FlexBuilder を使用しているため、通常は Eclipse の Ctrl キーを押しながらタグ/クラス名をクリックするショートカットを使用して、関連するクラス定義ファイルにジャンプしますが、[installDir]/sdks/[version] にあるソース ファイルを直接開くこともできます。 ]/frameworks/src/mx/RichTextEditor.mxml を参照してご確認ください。

他のアプローチもあると思います（setStyle ただし、パフォーマンス上の理由から、明示的な使用は一般的に推奨されません)。しかし、これでうまくいくはずです。ただし、コンポーネントのソースを詳しく調べてみるとわかるように、デフォルトのボタン セットのボタンの多くは実際には PNG を使用していることに注意してください (例: icon_style_bold.png)、テキストではなく、この例では代わりに ComboBox への参照が含まれているため、色の変更がどのように適用されるかを確認できます。ボタンの外観を変更したい場合は、スタイル可能なプロパティを使用していることに注意してください。 icon フォント スタイルの設定ではなく、外観と操作性を決めるプロパティです。

それが役に立てば幸い！

他のヒント

ありがとう@Christian Nunciato!これは、RichTextEditor (拡張) であるコンポーネントの最終コードです。CreationComplete では、これを呼び出します

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

そして私のスタイルシートにはこれがあります

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

素晴らしい。再度、感謝します！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top