2

どの CSS スタイルが UIComponent に影響を与えているのか、どこから影響を受けているのかを知りたいです。

したがって、ソリューションは、指定されたコンポーネントのスタイルと値をリストします。

<s:Label id="myLabel" />

<s:Group id="myLabel" fontFamily="Tahoma"/>
    <s:Label id="myOtherLabel" />
</s:Group>

次にコード：

var styles:Object = StyleManager.getStyles(myLabel);
trace(styles);

fontFamily - Arial
の色 - 0
fontSize - 12
textAlign - 左
など

そして、スタイルがどこから値を取得しているかを見つけることができました:

var styleParent:Object = StyleManager.getStyle(myLabel, "fontFamily");
trace(styleParent); // "s|Label" declaration or global?

そしてスタイルルックアップ：

var styleParents:Array = StyleManager.getStyleInheritence(myOtherLabel, "fontFamily");
trace(styleParent); // inline which overrides "s|Group fontFamily" which overrides "s|Label" which overrides global

オーバーライドと言うときは、特異性を意味します。インライン fontFamily 宣言は、ラベル親グループのインライン fontFamily 宣言よりも具体的です。これは、グローバル fontFamily 宣言よりも具体的な s|Label タイプ宣言よりも具体的です。

この画像は、Firebug が選択したオブジェクトのスタイル情報をどのように提供するかを示しています。

ここに画像の説明を入力

例えば： 

var myInheritenceChain:Array = getStylesInheritanceForTarget(myButton);

trace(myInheritanceChain); // output is an array of 

[0] {subject:instance, type:inline, styles: {fontFamily:"Noteworthy", color:"blue"}
[1] {subject:spark.components.Button, type:type, styles: {fontFamily:"Bidoni", color:"red"...}
[2] {subject:#myButton, type:id, styles: {fontFamily:"Futura", color:"green"}
[3] {subject:.myClassStyle, type:class, styles: {fontFamily:"Times New Roman", color:"yellow"...}
[4] {subject:global, type:something, styles: {fontFamily:"Helvetica", color:"black"...}
[5] {subject:*, type:something, styles: {fontFamily:"Bauhaus", color:"black"...}

fontFamily などのスタイルが、設定されている値に設定されている理由と方法を確認できるように、次のようにします。 

var myInheritenceChain:Array = getStylesInheritanceForTarget(myButton, "fontFamily");
4

2 に答える 2

0

を作成できますpackage mx.styles。このパッケージファイルStyleProtoChain、CSSStyleDeclaration、CSSMergedStyleDeclarationにコピーし、このクラスで必要な機能を実装します。

たとえば、オーバーライドできます

override mx_internal function addStyleToProtoChain(chain:Object,
                                          target:DisplayObject,
                                          filterMap:Object = null):Object
{
    // If we have a local style, then add only it to the chain. It will
    // take are of adding its parent to the chain.
    // If then is no style, but a parentStyle, then add the parent Style
    // to the chain.
    if (style)
        return style.addStyleToProtoChain(chain, target, filterMap);
    else if (parentStyle)
        return parentStyle.addStyleToProtoChain(chain, target, filterMap);
    else
        return chain;
}
于 2012-09-12T15:09:02.163 に答える
0

静的な ObjectUtil.toString() メソッドを使用してコンポーネントの inheritingStyles プロパティを表示することにより、コンポーネントの継承スタイルをデバッグできます。

デモ: http://blog.flexexamples.com/2007/12/24/displaying-a-combobox-controls-inherited-styles-in-flex/

<mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private function init():void {
                textArea.text = ObjectUtil.toString(comboBox.inheritingStyles);
            }
        ]]>
    </mx:Script>
于 2012-09-17T14:37:43.857 に答える