11

新しい Flex コンポーネント (Flex 3) を作成しています。デフォルトのスタイルにしたいです。.cs ファイルを既定のスタイルにするための命名規則などはありますか? 何か不足していますか？

4

6 に答える 6

10

CSS を適用することについては Christian の言う通りですが、プロジェクト全体でライブラリ内のコンポーネントを使用する予定がある場合は、そのライブラリ用のデフォルトの css ファイルを作成する必要があります。方法は次のとおりです。

  1. 「defaults.css」という名前の css ファイルを作成し (このファイル名のみが機能します!)、ライブラリの「src」フォルダーの下の最上位に配置します。css ファイルがアセットを参照する場合、それらも「src」の下にある必要があります。
  2. (重要!) ライブラリ プロジェクトの [プロパティ] > [Flex ライブラリ ビルド パス] > [アセット] に移動し、css ファイルとすべてのアセットを含めます。

これは、アドビ チームがすべてのデフォルト スタイルをセットアップする方法です。ちょうどこれを考え出した - 巨大

于 2010-03-20T17:22:54.510 に答える
8

一般的には 2 つの方法があります。1 つはクラス名を直接参照することです。たとえば、MyComponentActionScript で新しいコンポーネント クラスを作成した場合、または という別の UIComponent を拡張する MXML コンポーネントを作成して間接的に作成したMyComponent場合、どちらの場合も、コンポーネントは宣言されたスタイルを取得します。スタイルシートがアプリケーションにインポートされている場合 (例: 経由Style source):

MyComponent
{
     backgroundColor: #FFFFFF;
}

もう 1 つの方法は、UIComponent のstyleNameプロパティを (文字列として)設定することです。

public class MyComponent
{
     // ...

     this.styleName = "myStyle";

     // ...
}

...そしてCSSファイルでスタイルを次のように定義します（ドット表記に注意してください）：

.myStyle
{
     backgroundColor: #FFFFFF;
}

わかる？

于 2009-01-30T23:32:01.947 に答える
6

Christian Nunciato が提案したことに加えて、別のオプションとして、Flex コンポーネントのスタイルの静的初期化子を定義する方法があります。これにより、開発者が CSS ファイルを含める必要なく、デフォルトのスタイルを設定できます。

private static function initializeStyles():void
{
    var styles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("ExampleComponent");
    if(!styles)
    {
        styles = new CSSStyleDeclaration();
    }

    styles.defaultFactory = function():void
    {
        this.exampleNumericStyle = 4;
        this.exampleStringStyle = "word to your mother";
        this.exampleClassStyle = DefaultItemRenderer //make sure to import it!
    }

    StyleManager.setStyleDeclaration("ExampleComponent", styles, false);
}
//call the static function immediately after the declaration
initializeStyles();
于 2009-02-02T00:24:16.507 に答える
2

<fx:Style>タグなどを使用して、デフォルトのスタイルを上書きすることもできます。その場合、classConstructedがチェックされるまでにCSSStyleDeclarationがすでに存在している可能性があります。解決策は次のとおりです。

private static var classConstructed:Boolean = getClassConstructed ();
private static function getClassConstructed ():Boolean {
  var defaultCSSStyles:Object = {
    backgroundColorGood: 0x87E224, 
    backgroundColorBad: 0xFF4B4B, 
    backgroundColorInactive: 0xCCCCCC, 
    borderColorGood: 0x333333, 
    borderColorBad: 0x333333, 
    borderColorInactive: 0x666666, 
    borderWeightGood: 2, 
    borderWeightBad: 2, 
    borderWeightInactive: 2
  };
  var cssStyleDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration ("StatusIndicator");
  if (!cssStyleDeclaration) {
    cssStyleDeclaration = new CSSStyleDeclaration ("StatusIndicator", FlexGlobals.topLevelApplication.styleManager, true);
  }
  for (var i:String in defaultCSSStyles) {
    if (cssStyleDeclaration.getStyle (i) == undefined) {
      cssStyleDeclaration.setStyle (i, defaultCSSStyles [i]);
    }
  }
  return (true);
}
于 2011-08-10T21:15:19.753 に答える
2

joshtynjala が提案したものの改良:

public class CustomComponent extends UIComponent {
    private static var classConstructed:Boolean = classConstruct();

    private static function classConstruct():Boolean {
        if (!StyleManager.getStyleDeclaration("CustomComponent")) {
            var cssStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyle.defaultFactory = function():void {
                this.fontFamily = "Tahoma";
                this.backgroundColor = 0xFF0000;
                this.backgroundAlpha = 0.2;
            }
            StyleManager.setStyleDeclaration("CustomComponent", cssStyle, true);
        }
        return true;
    }
}

どこかのドキュメントでこれを読みました。classContruct メソッドが自動的に呼び出されます。

于 2010-01-14T17:28:58.467 に答える
1

デフォルトのスタイルを作成するには、クラスにプロパティを設定し、UIComponent の styleChanged() 関数をオーバーライドして、コンポーネントの幅の半分だけ背景色を描画することもできます。

// this metadata helps flex builder to give you auto complete when writing
// css for your CustomComponent
[Style(name="customBackgroundColor", type="uint", format="color", inherit="no")]

public class CustomComponent extends UIComponent {

    private static const DEFAULT_CUSTOM_COLOR:uint = 0x00FF00;

    private var customBackgroundColor:uint = DEFAULT_CUSTOM_COLOR;

    override public function styleChanged(styleProp:String):void
    {
        super.styleChanged(styleProp);

        var allStyles:Boolean = (!styleProp || styleProp == "styleName");

        if(allStyles || styleProp == "customBackgroundColor")
        {
            if(getStyle("customBackgroundColor") is uint);
            {
                customBackgroundColor = getStyle("customBackgroundColor");
            }
            else
            {
                customBackgroundColor = DEFAULT_CUSTOM_COLOR;
            }
            invalidateDisplayList();
        }

        // carry on setting any other properties you might like
        // check out UIComponent.styleChanged() for more examples
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        graphics.clear();
        graphics.beginFill(customBackgroundColor);
        graphics.drawRect(0,0,unscaledWidth/2,unscaledHeight);
    }
}

また、invalidateDisplayList() を呼び出す customBackgroundColor のセッターを作成することもできます。そのため、css だけでなく、プログラムでも customBackgroundColor プロパティを設定できます。

于 2010-04-23T03:38:52.513 に答える