Adobe Flex 3 ヘルプ

実行時のスタイルシートのロード

実行時にスタイルシートをロードするには、StyleManager を使用します。これらのスタイルシートは、Flex アプリケーションの実行中に動的にロードされる SWF ファイルの形式を取ります。

実行時にスタイルシートをロードすると、イメージ（グラフィカルスキン用）、フォント、タイプセレクタとクラスセレクタ、およびプログラムスキンを、コンパイル時に埋め込まずに Flex アプリケーションにロードできます。この方法では、スキンとフォントを、メインアプリケーションとは分離した別個の SWF ファイルに分割することができます。その結果、アプリケーションの SWF ファイルのサイズは縮小し、初期ダウンロードの時間は短縮されます。ただし、実行時スタイルシートを初めて使用するときは、<mx:Style> タグを使用してスタイルをロードする場合よりもスタイルおよびスキンの適用に時間がかかります。これは、アプリケーションの起動中または実行中に、必要な CSS ベースの SWF ファイルをダウンロードする必要があるためです。

実行時にスタイルシートをロードするには、次の 3 つの手順を実行します。

  1. アプリケーションの CSS ファイルを作成します。
  2. CSS ファイルを SWF ファイルにコンパイルします。
  3. Flex アプリケーションで StyleManager.loadStyleDeclarations() メソッドを呼び出します。このメソッドは、CSS ベースの SWF ファイルをアプリケーションにロードします。このメソッドが実行されると、新しい CSSStyleDeclarations が StyleManager にロードされます。

同一のスタイルを定義する複数のスタイルシートをロードできます。スタイルを設定すると、それ以降のスタイルシートが、共通のセレクタを持つ以前のスタイルシートを上書きすることがあります。ただし、実行時スタイルシートでロードされたスタイルが、コンパイル時のスタイルに完全に取って代わるわけではありません。実行時スタイルシートがアンロードされるまでオーバーライドするだけです。アンロードが実行されると、コンパイル時のスタイル設定に戻ります。コンパイル時のスタイル設定には、コンパイル時にロードされたデフォルトのスタイルシート、theme コンパイルオプションを使用してロードされたテーマファイル、MXML ファイル内で <mx:Style> ブロックを使用して設定されたスタイルなどが含まれます。

実行時に、コンパイルされていない CSS ファイルを Flex アプリケーションにロードすることはできません。CSS ファイルをロードする前に、必ず SWF ファイルにコンパイルしてください。

実行時スタイルシートの作成

実行時にスタイルシートをロードするには、最初に、SWF ファイルにコンパイルされたスタイルシートを作成する必要があります。実行時のスタイルシートは、他のスタイルシートと同様です。次の例に示すように、基本的なスタイルプロパティを設定するだけの簡単なスタイルシートにすることもできます。

/* styles/runtime/assets/BasicStyles.css */
Button {
    fontSize:    24;
    color: #FF9933;
}

Label {
    fontSize:    24;
    color: #FF9933;
}

あるいは、次の例に示すように、プログラムスキンやグラフィックスキン、フォントなどのスタイルプロパティが埋め込まれ、タイプセレクタやクラスセレクタを使用する複雑なスタイルシートにすることもできます。

/* styles/runtime/assets/ComplexStyles.css */
Application {
    backgroundImage: "greenBackground.gif";
    theme-color: #9DBAEB;
}
Button {
    fontFamily: Tahoma;
    color: #000000;
    fontSize: 11;
    fontWeight: normal;
    text-roll-over-color: #000000; 
    upSkin: Embed(source="orb_up_skin.gif");
    overSkin: Embed(source="orb_over_skin.gif");
    downSkin: Embed(source="orb_down_skin.gif");
}

.noMargins {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    horizontal-gap: 0;
    vertical-gap: 0;
}

Flex Builder で新しいスタイルシートを作成するには、ファイル／新規／CSS ファイルを選択します。プロジェクトのメインディレクトリまたは bin ディレクトリ以外の別のサブディレクトリに CSS ファイルを作成します。bin ディレクトリに CSS ファイルを作成しないでください。Flex Builder により、bin ディレクトリに SWF ファイルがコンパイルされます。

CSS ベースの SWF ファイルのコンパイル

実行時にスタイルシートをロードできるようにするには、事前にスタイルシートを SWF ファイルにコンパイルする必要があります。SWF ファイルにコンパイルするスタイルシートには、.css のファイル名拡張子が付いている必要があります。

CSS ファイルを SWF ファイルにコンパイルするには、mxmlc コマンドラインコンパイラまたは Flex Builder コンパイラを使用します。デフォルトでは、コンパイルの結果、CSS ファイルと同じ名前で拡張子が .swf の SWF ファイルが生成されます。

次の例では、mxmlc コマンドラインコンパイラを使用して BasicStyles.swf ファイルが作成されます。

mxmlc BasicStyles.css

Flex Builder で SWF ファイルをコンパイルするには、CSS ファイルを右クリックし、「CSS から SWF にコンパイルする」を選択します。プロジェクトの bin ディレクトリに SWF ファイルが保存されます。元の CSS ファイルが bin ディレクトリにある場合、SWF ファイルにコンパイルすることはできません。CSS ファイルを別のディレクトリに移動してからコンパイルする必要があります。

Flex アプリケーションをコンパイルするときに、コンパイルは、そのアプリケーションが使用する CSS ベースの SWF ファイルに対してコンパイル時のリンクチェックを実行しません。つまり、メインアプリケーションをコンパイルする前に SWF ファイルを作成する必要はありません。また、SWF ファイルの名前や場所を間違って入力した場合、または SWF ファイルが存在しない場合、アプリケーションはエラー通知なしで失敗します。アプリケーションは実行時にエラーをスローしません。

実行時のスタイルシートのロード

実行時に CSS ベースの SWF ファイルをロードするには、StyleManager の loadStyleDeclarations() メソッドを使用します。このメソッドを使用するには、mx.core.StyleManager クラスを読み込む必要があります。

次の例は、スタイルシート SWF ファイルのロードを示しています。

StyleManager.loadStyleDeclarations("../assets/MyStyles.swf");

loadStyleDeclarations() メソッドの第 1 パラメータは、ロードするスタイルシート SWF ファイルの場所を示します。ローカルまたはリモートの場所を指定できます。

2 番目のパラメータは update です。アプリケーションでスタイルシートを直ちに更新するかどうかによって、これを true または false に設定します。詳細については、CSS ベースの SWF ファイルの更新を参照してください。

次のパラメータ trustContent はオプションで、廃止されています。値を指定すると、false に設定されます。

最後の 2 つのパラメータは、applicationDomain および securityDomain です。これらのパラメータは、スタイルシート SWF ファイルがロードされるドメインを指定します。ほとんどの場合、これらのパラメータにはデフォルト値（null）をそのまま使用します。その結果、スタイルシートの SWF ファイルが現在のドメインの子ドメインにロードされます。これらのパラメータにデフォルト以外の値を使用する場合の詳細については、モジュールでの実行時スタイルシートの使用を参照してください。

次の例では、ボタンをクリックしたときに、スタイルシートをロードします。

<?xml version="1.0"?>
<!-- styles/BasicApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        import mx.styles.StyleManager;
        
        public function applyRuntimeStyleSheet():void {
            StyleManager.loadStyleDeclarations("../assets/BasicStyles.swf")
        }
        ]]>
    </mx:Script>    
    <mx:Label text="Click the button to load a new CSS-based SWF file"/>
    <mx:Button id="b1" label="Click Me" click="applyRuntimeStyleSheet()"/>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

リモートのスタイルシートをロードする場合、通常はロードするアプリケーションに SWF ファイルのロードを許可する crossdomain.xml ファイルが必要です。アプリケーションが local-trusted サンドボックスにある場合、crossdomain.xml ファイルなしでも実行できますが、これは通常、ローカルマシン上のアプリケーションとしてインストールされている SWF ファイルに限定されます。crossdomain.xml ファイルの詳細については、クロスドメインポリシーファイルの使用を参照してください。

また、リモートのスタイルシートを使用するには、ネットワークアクセスが可能なロードアプリケーション（use-network コンパイラプロパティがデフォルトの true に設定されている）をコンパイルする必要があります。アプリケーションをローカルファイルシステムでコンパイルして実行すると、リモートアクセスが可能な SWF ファイルをロードできなくなることがあります。

loadStyleDeclarations() メソッドは非同期です。IEventDispatcher クラスのインスタンスを返します。このオブジェクトを使用すると、スタイルシートのロードが成功したかどうかに応じてイベントをトリガできます。ロードプロセスの StyleEvent.PROGRESS、StyleEvent.COMPLETE、StyleEvent.ERROR の各イベントにアクセスできます。

次のアプリケーションは、スタイルシートのロードが終了したときにメソッドを呼び出します。

<?xml version="1.0"?>
<!-- styles/StylesEventApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script>
        <![CDATA[
        import mx.styles.StyleManager;
        import mx.events.StyleEvent;
        
        public function init():void {
            var myEvent:IEventDispatcher = 
                StyleManager.loadStyleDeclarations("../assets/ACBStyles.swf");
            myEvent.addEventListener(StyleEvent.COMPLETE, getImage);
        }

        private function getImage(event:StyleEvent):void {
            map1.source = acb.getStyle("dottedMap");
        }        
        ]]>
    </mx:Script>    
    
    <mx:ApplicationControlBar id="acb" width="100%" styleName="homeMap">
        <mx:Image id="map1"/>
        <mx:Button label="Submit"/>
    </mx:ApplicationControlBar>
    
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

この例で使用されるスタイルシートは、PNG ファイルを埋め込みます。

/* styles/runtime/assets/ACBStyles.css */
ApplicationControlBar {
    borderStyle:     "solid";
    cornerRadius:    10;
    backgroundColor: #FF9933;
    alpha:           1;
    dottedMap:       Embed(source="beige_dotted_map.png");
}

CSS ベースの SWF ファイルの更新

CSS ベースの新しい SWF ファイルをロードするときに、アプリケーション内のすべてのスタイルを強制的に即時更新できます。必要に応じて、更新を遅延することもできます。

loadStyleDeclarations() メソッドの第 2 パラメータは、update です。update パラメータを true に設定すると、即時にスタイルが強制的に適用されます。アプリケーションのスタイルを強制的に即時更新しないようにするには、false に設定します。スタイルは、次回、このメソッドまたは、update プロパティが true 設定されている unloadStyleDeclarations() メソッドを呼び出したときに更新されます。

update パラメータを true に設定して loadStyleDeclarations() メソッドを呼び出すと、そのたびにすべてのスタイルが表示リストに再適用され、これが原因でパフォーマンスが低下することがあります。同時に複数の CSS ベースの SWF ファイルをロードする場合は、最後の呼び出しを除くこのメソッドへのすべての呼び出しで、update パラメータを false に設定する必要があります。これにより、Flash Player および AIRでは、新しいスタイル SWF ファイルごとにスタイルを適用するのではなく、すべての新しい SWF ファイルに対して一度にスタイルが適用されます。

次の例では、3 種類のスタイルの SWF ファイルをロードしますが、3 番目のファイルがロードされるまでスタイルは適用されません。

<?xml version="1.0"?>
<!-- styles/DelayUpdates.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script> 
        <![CDATA[
        import mx.styles.StyleManager;
        import mx.events.StyleEvent;
        
        public function init():void {
            StyleManager.loadStyleDeclarations("../assets/ButtonStyles.swf", false);
            var myEvent:IEventDispatcher = 
                StyleManager.loadStyleDeclarations("../assets/LabelStyles.swf", false);            
            myEvent.addEventListener(StyleEvent.COMPLETE, doUpdate);
        }

        public function doUpdate(event:StyleEvent):void {
            StyleManager.loadStyleDeclarations("../assets/ACBStyles.swf", true);
        }
        ]]>
    </mx:Script>    
    
    <mx:Label text="This is a label"/>

    <mx:ApplicationControlBar id="acb" width="100%">
        <mx:Button label="Submit"/>
    </mx:ApplicationControlBar>
    
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

実行時のスタイルシートのアンロード

実行時にロードしたスタイルシートをアンロードすることができます。そのためには、StyleManager の unloadStyleDeclarations() メソッドを使用します。このメソッドの結果、指定したスタイルの SWF ファイルで設定されたすべてのスタイルプロパティが、デフォルト値に戻されます。

次の例では、チェックボックスを切り替えたときに、スタイル SWF をロードまたはアンロードします。

<?xml version="1.0"?>
<!-- styles/UnloadStyleSheets.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script> 
        <![CDATA[
        import mx.styles.StyleManager;
        
        public function toggleStyleSheet():void {
            if (cb1.selected == true) {
                StyleManager.loadStyleDeclarations("../assets/ButtonStyles.swf", true);
                StyleManager.loadStyleDeclarations("../assets/LabelStyles.swf", true);
            } else {
                StyleManager.unloadStyleDeclarations("../assets/ButtonStyles.swf", true);
                StyleManager.unloadStyleDeclarations("../assets/LabelStyles.swf", true);
            }                       
        }
        ]]>
    </mx:Script>    

    <mx:Button id="b1" label="Click Me"/>
    
    <mx:Label id="l1" text="Click the button"/>
    
    <mx:CheckBox id="cb1" 
        label="Load style sheet" 
        click="toggleStyleSheet()" 
        selected="false"
    />
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

unloadStyleDeclarations() メソッドは、2 番目のパラメータ update を使用します。スタイルシートのロードと同様に、update パラメータの値を false に設定した場合、Flash Player および AIR ではスタイルを再適用しません（この場合、ロードされたスタイルをアンロードしたときにデフォルトのスタイルを再適用します）。update パラメータの詳細については、実行時のスタイルシートのロードを参照してください。

カスタムコンポーネントでの実行時スタイルシートの使用

実行時スタイルシートは、カスタムコンポーネントでも使用できます。そのためには、通常、コンポーネントが初期化された後に loadStyleDeclaration() メソッドを呼び出します。スタイルシートにクラスセレクタがある場合は、styleName プロパティを設定することにより適用します。

次の例では、specialStyle という名前のクラスセレクタにスタイルプロパティとスキンを定義します。

/* styles/runtime/assets/CustomComponentStyles.css */
.specialStyle {
    fontSize:    24;
    color: #FF9933;
    upSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyUpSkin");
    overSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyOverSkin");
    downSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyDownSkin");
}

次の例では、カスタムコンポーネントがこのスタイルシートをロードし、初期化中に specialStyle クラスセレクタをそれ自体に適用します。

// styles/runtime/MyButton.as -->
package {

    import mx.controls.Button;
    import mx.events.*;
    import mx.styles.StyleManager;
    
    public class MyButton extends Button {
   
        public function MyButton() {
            addEventListener(FlexEvent.INITIALIZE, 
                initializeHandler);
        }

         // Gets called when the component has been initialized
        private function initializeHandler(event:FlexEvent):void {
            StyleManager.loadStyleDeclarations(
                "assets/CustomComponentStyles.swf");
            this.styleName = "specialStyle";
        }
    }    
}

このカスタムボタンを使用するサンプルアプリケーションの例を次に示します。

<?xml version="1.0"?>
<!-- styles/MyButtonApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="*">
  
  <custom:MyButton/>
  
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

実行時スタイルシートとしてのテーマ SWC ファイルの使用

既存のテーマ SWC ファイルがある場合は、そのファイルを実行時スタイルシートとして使用できます。そのためには、テーマ SWC ファイルから CSS ファイルを抽出する必要があります。その後に、残りの SWC ファイルを 1 つのライブラリとして渡すことにより、スタイル SWF ファイルをコンパイルします。

次の手順は、コマンドラインを使用してこのプロセスを実行する方法を示しています。

  1. 次の例のように、PKZip などのアーカイブユーティリティを使用して、SWC ファイルから CSS ファイルを抽出します。
    $ unzip haloclassic.swc defaults.css
  2. （オプション）CSS ファイルの名前を、意味のある名前に変更します。この名前がスタイル SWF ファイルの名前になります。次の例では、ファイル名を defaults.css から haloclassic.css に変更します。
    $ mv defaults.css haloclassic.css
  3. スタイル SWF ファイルをコンパイルします。テーマ SWC ファイルをスタイル SWF ファイルに追加するには、次の例に示すように、include-libraries オプションを使用します。
    $ mxmlc -include-libraries=haloclassic.swc haloclassic.css

テーマ SWC ファイル内に複数の CSS ファイルがある場合は、スタイル SWF ファイルをコンパイルする前に CSS ファイルをすべて抽出する必要があります。

モジュールでの実行時スタイルシートの使用

メインアプリケーションで使用する場合と同じように、モジュールまたは子アプリケーション内で StyleManager クラスを使用できます。モジュールによってロードされた実行時スタイルシートは、モジュールに加えてメインアプリケーションにも適用できます。そのためには、applicationDomain パラメータが loadStyleDeclarations() メソッド内の ApplicationDomain.currentDomain になるように指定して、スタイルシートを現在のアプリケーションドメインにロードする必要があります。StyleManager はメインアプリケーションが所有しているため、モジュールからメソッドを呼び出していても、現在のアプリケーションドメインはメインアプリケーションのドメインです。

次の例は、モジュール内の Style.swf ファイルを現在のアプリケーションドメインにロードします。

StyleManager.loadStyleDeclaration("Style.swf",true,false, ApplicationDomain.currentDomain)

SWF ファイルを同じアプリケーションドメインにロードすると、そのクラスに直接アクセスできます。この場合、実行時スタイルシートをメインアプリケーションと同じアプリケーションドメインにロードすることで、スタイルをメインアプリケーションとモジュールの両方に適用できます。

次の例は、子アプリケーションドメインと現在のアプリケーションドメインへの実行時スタイルシートのロードを示しています。

éqÉAÉvÉäÉPÅ[ÉVÉáÉìÉhÉÅÉCÉìÇýåªç›ÇÃÉAÉvÉäÉPÅ[ÉVÉáÉìÉhÉÅÉCÉìÇ÷ÇÃé¿çséûÉXÉ^ÉCÉãÉVÅ[ÉgÇÃÉçÅ[Éh

最初のアプローチでは、モジュールと実行時スタイルシートが個別の子アプリケーションドメイン（アプリケーションドメイン 2 と 3）にロードされます。スタイルが適用されるのは、親ドメインとその子ドメイン内のアプリケーションのみのため、別の子ドメインにあるモジュールにはスタイルは正しく適用されません。2 番目のアプローチでは、モジュールを子アプリケーションドメインにロードし、実行時スタイルシートをメインアプリケーションと同じドメインにロードします。この場合、スタイルはモジュールとメインアプリケーションに正しく適用されます。

2 番目のアプローチを使用する必要があるのは、ModuleManager クラスがすべてのモジュール（CSS SWF ファイルを含む）をロードするためです。このクラスは、メインアプリケーションで定義されるシングルトンです。モジュール内から ModuleManager でメソッドを呼び出しても、メインアプリケーションのコンテキスト内からそのメソッドを呼び出していることになります。その結果、ModuleManager が SWF ファイルをロードするデフォルトのドメインは、メインアプリケーションのドメインの子であり、メソッドが実行される SWF ファイルの子ドメインではありません。

兄弟アプリケーションドメイン内の SWF ファイルは通信できないため、ある子アプリケーションドメインにロードされたスタイルを、別の子アプリケーションドメインにロードされた SWF ファイルに正しく適用することはできません。loadStyleDeclarations() メソッドで ApplicationDomain.currentDomain を指定することで、CSS SWF ファイルを新しい子アプリケーションドメインにロードしないように ModuleManager に指示できますが、メインアプリケーションのアプリケーションドメインにロードすることで、メインアプリケーションとモジュールの両方で使用できます。

アプリケーションドメインの詳細については、ApplicationDomain クラスの使用を参照してください。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート