| | Web コンポーネントとテーマ | |
Web オブジェクトにはテーマを 1 つだけ割り当てることができます。ただし、Web Panel オブジェクトに Web コンポーネントが含まれており、それぞれに異なるテーマが関連付けられている場合、結果のページにはすべてのスタイルシート (各 Web コンポーネントのスタイルシート) が含まれます。
ここで重要なポイントは、クラスはテーマで区別されないということです。
たとえば、Web パネルに「WA」と「WB」というコンポーネントが含まれているとします。WA は ThA テーマに、WB は ThB テーマにそれぞれ関連付けられており、ThA と ThB には両方の Web コンポーネントで使用される同名のクラスが定義されています。これらのクラスはそれぞれ異なる設定を使用するとしても、実行時にクラスの違いを見分けることはできません。
異なるテーマを使用していて、クラスの特性が実際は異なる場合、クラスの名前は違うものにする必要があります。
ページに関連付けられている CSS の優先順位が考慮されます。
テーマに対応する CSS は、ページ内の Web コンポーネントの配置によって決められた順序で HTML ヘッダーに含まれます。
左から右、上から下の順になります。
次のようなスキーマがあるとします:
Webcomp1 -associated with thm01 Webcomp2 -associated with thm02
Webcomp3 -associated with thm03 Webcomp4 -associated with thm04
また、親 Web パネル (コンテナ) は「既定」のテーマに関連付けられており、そのヘッダーは次のようになるとします:
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="Default.css"/>
<link rel="stylesheet" type="text/css" href="Thm01.css"/>
<link rel="stylesheet" type="text/css" href="Thm02.css"/>
<link rel="stylesheet" type="text/css" href="Thm03.css"/>
<link rel="stylesheet" type="text/css" href="Thm04.css"/>
クラスのプロパティの値を決定する方法は、次のようになります。
すべての CSS で 1 つのクラスが共通の名前で使われている場合、プロパティの値は次の優先順位で決定されます。
1.最後に含まれている CSS から最初の CSS の順に考慮されます。
2.最後の CSS でプロパティが既定となっている場合、その 1 つ前の CSS で設定されている値を考慮します。
この例で、フォームクラスがすべての Web コンポーネントのフォームに関連付けられている場合、次のようになります。
- textcolor プロパティは、Thm04.css テーマと Thm03.css テーマで既定となっています。Thm02.css では rgb (128, 255, 128) と構成されています。
- backcolor プロパティは、Thm04.css、Thm03.css、および Thm02.css テーマで既定となっています。Thm01.css では rgb (255,128,128) と構成されています。
この場合、ページの背景色は Thm01.css から取得され、テキストの色は Thm02.css から取得されます。Thm01.css および Default.css で別のテキスト色が指定されていて、Default.css で別の背景色が指定されていたとしても、このようになります。
注: 「プロパティが既定」とは、プロパティに値がないことを意味します。
|
|
|
|
|