スタイルの継承について
ドキュメント内の 1 箇所でしかスタイルが定義されていなければ、Flex はその定義を使用してプロパティの値を設定します。しかし、アプリケーションでは、複数のスタイルシート、ローカルのスタイル定義、外部スタイルプロパティ、スタイルプロパティを直接コンポーネントのインスタンスに設定することができます。このため、Flex では特定の順序でこれらの定義を確認し、プロパティの値を決定します。
低いレベルのスタイルは、高いレベルのスタイルや外部スタイルよりも優先されます。インスタンスにスタイルを設定し、そのスタイルをグローバルに設定すると、ローカルスタイルを設定した後にグローバルスタイルを設定した場合でも、ローカルスタイルがグローバルスタイルによってオーバーライドされません。
スタイルの継承順序
Flex がスタイルを探す順序を理解することは、どのスタイルプロパティがどのコントロールに適用されるのかを把握するために重要です。
Flex は、コンポーネントインスタンスに対してインラインで設定されたスタイルプロパティを探します。インスタンスに対してインラインでスタイルが設定されていない場合、インスタンスの setStyle() メソッドを使用してスタイルが設定されているかどうかがチェックされます。インスタンスに対して直接スタイルが設定されていない場合、インスタンスの styleName プロパティにスタイル宣言が割り当てられているかどうかが調べられます。
スタイル宣言に styleName プロパティが割り当てられていない場合、Flex はタイプセレクタのスタイル宣言でプロパティを探します。タイプセレクタのスタイル宣言がない場合、global セレクタがチェックされます。以上のすべてのチェックが失敗した場合、プロパティは未定義となり、デフォルトスタイルが適用されます。
スタイルのチェックの初期段階では、コントロールの親コンテナのスタイル設定も調べられます。スタイルプロパティが定義されておらず、プロパティが継承不可能な場合、インスタンスの親コンテナのプロパティが調べられます。プロパティが親コンテナで定義されていなければ、親の親がチェックされ、以降同様にチェックされます。プロパティが継承不可能な場合、親コンテナのスタイル設定は無視されます。
スタイルプロパティの優先順位は、高い順番で次のとおりです。
- インライン
- クラスセレクタ
- タイプセレクタ（複数のセレクタで同じスタイルプロパティが適用されている場合は、最も近いクラスが優先）
- 祖先クラスのタイプセレクタ
- 親チェーン（スタイル継承のみ）
- global セレクタ
後でコンポーネントのインスタンスで setStyle() メソッドを呼び出すと、このメソッドは、インラインも含め、すべてのスタイル設定に優先します。
<mx:Style> タグ、外部スタイルシート、defaults.css スタイルシートのスタイル定義にも、優先順位があります。defaults.css 内の同一のスタイル定義は、<mx:Style source="stylesheet"/> タグで指定された外部スタイルシートでオーバーライドされます。外部スタイルシートは、<mx:Style> タグ内のスタイル定義によってオーバーライドされます。
次の例では、Panel のタイプセレクタを定義し、fontFamily プロパティを Times に、fontSize プロパティを 24 に、それぞれ設定します。この結果、Panel コンテナ内のすべてのコントロール、および Button や TextArea などのすべてのサブクラスがこのスタイルを継承します。ただし、button2 はインラインでスタイルを定義することにより、継承されたスタイルをオーバーライドします。アプリケーションがレンダリングされると、button2 にはフォント Arial、フォントサイズ 12 が使用されます。
<?xml version="1.0"?>
<!-- skins/MoreContainerInheritance.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Panel {
fontFamily: Times, "_serif";
fontSize: 24;
}
</mx:Style>
<mx:Panel title="My Panel">
<mx:Button id="button1" label="Button 1"/>
<mx:Button id="button2" label="Button 2" fontFamily="Arial" fontSize="12"/>
<mx:TextArea text="Flex has is own set of style properties which are
extensible so you can add to that list when you create a custom
component." width="425" height="400"/>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
サブコンポーネントスタイル
他のコンポーネントで構成される Flex コントロールもあります。例えば、DateField コントロールには DateChooser サブコンポーネントがあります。これは、DateField のアイコンをクリックしたときにポップアップ表示されるカレンダーです。DateChooser サブコンポーネント自体には、ナビゲーション用の Button サブコンポーネントとラベル用の TextField サブコンポーネントがあります。
親コントロールからサブコンポーネントに継承可能なスタイルが渡されます。これには、color や textDecoration のようなすべてのテキストスタイル、およびその他の継承可能なスタイルがあります。DateField コントロールで color スタイルプロパティを設定すると、その color が DateChooser サブコンポーネントのテキストにも適用されます。
継承可能なスタイルプロパティをサブコントロールに適用しない場合は、カスタムクラスセレクタを定義して、親のスタイルをオーバーライドします。例えば、ComboBox コントロールのサブコンポーネントにスタイルを適用するには、dropdownStyleName または textInputStyleName スタイルプロパティを使用してカスタムセレクタを定義します。
サブコンポーネントを持つコントロールのほとんどに、スタイルをサブコンポーネントに適用するカスタムクラスセレクタがあります。場合によっては、複数のサブコンポーネントでスタイルプロパティを設定できるように、コントロールには複数のカスタムクラスセレクタがあります。
次の例では、DateField コントロールで color スタイルプロパティを設定します。この色が DateChooser サブコンポーネントに適用されないようにするために、DCStyle カスタムクラスセレクタは color スタイルプロパティの値をオーバーライドします。このカスタムクラスセレクタは、dateChooserStyleName プロパティと共に DateField コントロールに適用されます。
<?xml version="1.0" encoding="utf-8"?>
<!-- styles/SubComponentStylesSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.DCStyle {
color:blue;
}
</mx:Style>
<mx:HBox>
<mx:VBox>
<mx:Label text="Overrides the color property of the subcontrol:"/>
<mx:DateField
id="dateField1"
yearNavigationEnabled="true"
color="red"
dateChooserStyleName="DCStyle"
/>
</mx:VBox>
<mx:VBox>
<mx:Label text="Applies the color property to the subcontrol:"/>
<mx:DateField
id="dateField2"
yearNavigationEnabled="true"
color="red"
/>
</mx:VBox>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
継承不可能なスタイルプロパティは、親コンポーネントからサブコンポーネントには渡されません。例えば、DateChooser コントロールで cornerRadius プロパティの値をカスタマイズしても、カレンダーのサブコンポーネントであるボタンには影響しません。その値をサブコンポーネントに渡すには、コントロールのフィルタを変更します。フィルタは、サブコンポーネントに渡すスタイルプロパティを指定します。フィルタは、親コントロールがサブコンポーネントに渡すスタイルプロパティを定義するオブジェクトの配列です。継承可能なスタイルプロパティは、必ず渡されるので、フィルタに定義できません。
サブコンポーネントを持つコントロールのほとんどに、少なくとも 1 つのフィルタがあります。例えば、ComboBox サブコントロールには、ComboBox がドロップダウンリストサブコンポーネントに渡すスタイルプロパティを定義する dropDownStyleFilters プロパティがあります。
サブコンポーネントを持ついくつかのコントロールには、複数のフィルタがあります。例えば、DateChooser コントロールには、カレンダーの前月ボタン（prevMonthStyleFilters）、次月ボタン（nextMonthStyleFilters）、前年ボタン（prevYearStyleFilters）および次年ボタン（nextYearStyleFilters）のそれぞれに個別のフィルタがあります。
フィルタプロパティは読み取り専用ですが、コントロールをサブクラス化し、フィルタ配列でオブジェクトを追加または削除することでカスタマイズできます。
次の例には、2 つの DateField コントロールがあります。最初の DateField コントロールはカスタムフィルタを使用しません。2 番目の DateField コントロールは、2 つのカスタムフィルタ（次月ボタンのプロパティ用と前月ボタンのプロパティ用）を使用するカスタムクラスです。
<?xml version="1.0" encoding="utf-8"?>
<!-- versioning/StyleFilterOverride.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="*">
<mx:HBox>
<mx:VBox>
<mx:Text text="Standard DateChooser control. Does not pass the cornerRadius property to the button subcomponents:"/>
<mx:DateChooser cornerRadius="10"/>
</mx:VBox>
<mx:VBox>
<mx:Text>
<mx:text>
Custom DateChooser control. Passes the cornerRadius property
to the button subcomponents:
</mx:text>
</mx:Text>
<comps:MyDateChooser cornerRadius="10"/>
</mx:VBox>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
次のクラスは DateChooser を拡張し、ボタンサブコンポーネントのうちの 2 つについてカスタムフィルタ配列を定義します。
package {
import mx.controls.DateChooser;
public class MyDateChooser extends DateChooser {
private static var myNextMonthStyleFilters:Object = {
"highlightAlphas" : "highlightAlphas",
"nextMonthUpSkin" : "nextMonthUpSkin",
"nextMonthOverSkin" : "nextMonthOverSkin",
"nextMonthDownSkin" : "nextMonthDownSkin",
"nextMonthDisabledSkin" : "nextMonthDisabledSkin",
"nextMonthSkin" : "nextMonthSkin",
"repeatDelay" : "repeatDelay",
"repeatInterval" : "repeatInterval",
"cornerRadius" : "cornerRadius" // This property is not normally included.
}
override protected function get nextMonthStyleFilters():Object {
return myNextMonthStyleFilters;
}
private static var myPrevMonthStyleFilters:Object = {
"highlightAlphas" : "highlightAlphas",
"prevMonthUpSkin" : "prevMonthUpSkin",
"prevMonthOverSkin" : "prevMonthOverSkin",
"prevMonthDownSkin" : "prevMonthDownSkin",
"prevMonthDisabledSkin" : "prevMonthDisabledSkin",
"prevMonthSkin" : "prevMonthSkin",
"repeatDelay" : "repeatDelay",
"repeatInterval" : "repeatInterval",
"cornerRadius" : "cornerRadius"
}
override protected function get prevMonthStyleFilters():Object {
return myPrevMonthStyleFilters;
}
}
}
カスタムフィルタにはそれぞれ、配列内に次の追加エントリがあります。
"cornerRadius" : "cornerRadius"
通常、cornerRadius プロパティは nextMonthStyleFilters 配列および myPrevMonthStyleFilters 配列にはリストされません。このプロパティをこれらのフィルタ配列に追加することで、プロパティが親コントロールからサブコントロールに渡され、前月ボタンと次月ボタンに適用されます。
フィルタを使用して、通常はサブコンポーネントを通じて渡されるプロパティを除外することもできます。これを行うには、サブクラス内のフィルタ配列からそのプロパティを削除します。
<?xml version="1.0"?>
<!-- skins/SubComponentInheritance.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
TextInput {
fontSize:15;
}
</mx:Style>
<mx:RichTextEditor/>
<mx:ComboBox>
<mx:dataProvider>
<mx:String>2005</mx:String>
<mx:String>2006</mx:String>
<mx:String>2007</mx:String>
</mx:dataProvider>
</mx:ComboBox>
<mx:NumericStepper/>
</mx:Application>
継承の例外
すべてのスタイルが継承可能というわけではなく、またすべてのコンポーネントとテーマでサポートされているわけではありません。一般的には、カラーとテキストのスタイルは、CSS またはスタイルプロパティを使用してどのように設定されているかに関わらず継承されます。それ以外のスタイルは、特に説明がない限り継承できません。
次の条件を満たす場合にのみ、スタイルは継承されます。
- スタイルが継承可能です。各コントロールで継承されるスタイルの一覧については、『Adobe Flex リファレンスガイド』でコントロールの項目を参照してください。静的メソッドである isInheritingStyle() や isInheritingTextFormatStyle() を StyleManager クラスで使用して、スタイルが継承可能であるかどうかをプログラムで判断できます。
- スタイルがテーマでサポートされています。Flex のデフォルトのテーマでサポートされるスタイルの一覧については、サポートされているスタイルについてを参照してください。
- スタイルがコントロールでサポートされています。各コントロールでサポートされるスタイルの詳細については、『Adobe Flex リファレンスガイド』でコントロールの説明を参照してください。
- スタイルがコントロールの親コンテナ、またはコンテナの親に設定されています。他のクラスがコントロールの親コンテナ、またはコントロールの親コンテナの親コンテナでない限り、スタイルは他のクラスから継承されません。タイプセレクタを使用してスタイルプロパティを適用している場合は、この条件に対する例外となります。この場合は、そのクラスのタイプセレクタに設定されているプロパティ、および基本クラスのタイプセレクタに設定されているあらゆるプロパティが適用されます。
- スタイルが低いレベルでオーバーライドされません。例えば、スタイルのタイプセレクタ（Button { color:red } など）を定義し、その後でコントロールにインスタンスプロパティ（<mx:Button color="blue"/> など）を設定した場合、タイプセレクタのスタイルが継承可能であっても、そのスタイルによってスタイルインスタンスプロパティがオーバーライドされることはありません。
global セレクタを使用すると、継承不可能なスタイルをすべてのコントロールに適用することができます。詳細については、グローバルセレクタの使用を参照してください。
サポートされているスタイルについて
継承可能および継承不可能なテキストスタイルは、両方ともすべてのテーマでサポートされますが、すべてのスタイルが全テーマでサポートされるわけではありません。コントロールにスタイルプロパティを設定しようとしても、現在のテーマでそのスタイルがサポートされていなければ、スタイルは適用されません。
スタイルには、テーマのスキンでのみ使用されるものや、コンポーネントのコード自体によって使用されるものがあります。コンポーネントの表示テキストにはスキンを適用できないので、テキストスタイルのサポートはテーマに依存しません。
|
テーマ |
スタイルタイプ |
スタイル |
|---|---|---|
|
すべて |
継承可 |
color fontFamily fontSize fontStyle fontWeight leading textAlign textDecoration textIndent |
|
すべて |
継承不可 |
paddingLeft paddingRight |
|
すべて |
コンポーネント定義による |
disabledColor headerHeight horizontalAlign horizontalGap paddingBottom paddingLeft paddingRight paddingTop rollOverColor selectionColor tabHeight tabWidth textRollOverColor textSelectedColor verticalAlign verticalGap |
|
Halo Aeon |
コンポーネント依存およびすべてのテキストスタイル |
backgroundGradientAlphas backgroundGradientColors borderAlpha borderColor borderSides borderThickness cornerRadius dateHeaderColor dateRollOverColor dropShadowEnabled fillAlphas fillColors footerColors headerColors highlightAlphas highlightColor roundedBottomCorners selectedDateColor shadowDirection shadowDistance strokeWidth themeColor todayColor |
詳細については、テーマについてを参照してください。
themeColor プロパティについて
デフォルトの Halo テーマの多くのアセットで、themeColor というプロパティがサポートされています。このプロパティは Application タグで設定できます。設定したカラーは、Flex アプリケーション全体のコンポーネントアセット（Button コントロールの境界線、Accordion コントロールのヘッダー、ToolTip コントロールの背景など）に適用されます。
0xCCCCCC（銀）や 0x0066FF（青）などのカラー値のほか、themeColor プロパティの次の値も有効です。
- haloOrange
- haloBlue
- haloSilver
- haloGreen
デフォルト値は haloBlue です。次の例では、themeColor の値を haloOrange に設定します。
<?xml version="1.0"?>
<!-- styles/ThemeColorExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" themeColor="haloOrange">
<mx:Button id="myButton" label="Click Me" toolTip="Click me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート