Style sheets

Nexaweb スタイルシートの概念はHTML CSS ファイルに似ています。Nexaweb スタイルシートを使用すると、アプリケーションのルックアンドフィールをカスタマイズし、そのカスタマイズをUI 定義自体から分離した一連のファイルにまとめることができます。Nexaweb スタイルシートには次の2 つのセクションを含めることができます。

セクション	説明
<defs>	スタイルシートには、単一の<defs> セクションを含めることができます。このセクションでは、スタイルシートで参照される<linearGradient> や<popup> タグなどのグラデーションが定義されます。
<style>	スタイルシートには任意の数の<style> タグを含めることができます。<style> タグには類似したコンポーネントの属性が格納され、すべてのコンポーネントに対してグローバルに、または特定のコンポーネントのセットに対してローカルに適用できます。

Nexaweb スタイルシートはXML ベースで、.XSS拡張子が使用されます。Nexaweb Studio スタイルシートエディタを使用してNexaweb スタイルシートを作成および編集するか、XML エディタで直接ソースを編集することができます。

スタイルの概要

スタイルシートは、任意の数の個々のスタイルから構成されます。各スタイルには、次の要素が含まれています。

スタイルが適用されるターゲット要素のセット。applyTo属性によって指定されます。
スタイルが属性を定義する状態のセット。つまり、Nexaweb ではターゲットが特定の状態にある場合に指定した属性が適用されます。
状態ごとに指定された属性。

スタイル定義の例を次に示します。

<style applyTo="link">
<normal cursor="hand" color="blue" textDecoration="underline"/>
<mouseOver color="red"/>
<focused color="red"/>
< /style>

この例では、linkはターゲット要素を表し、normalおよびmouseOver は状態を表します。スタイルに含まれる各状態により任意の数の属性が定義され、ターゲット要素がその状態にある場合に適用されます。属性は、標準のXAL のターゲットに適用される属性の範囲から選択できます。ただし、Nexaweb では、フォント、色、枠線などスタイルに関連した属性だけから属性を選択することをお勧めします。この例では、<link> タグにはデフォルトの状態で手のカーソル、青いフォント、および下線を引かれたスタイルが定義されています。このスタイル定義は、XAL ですべての<link> に次のように定義するのと同様に機能します。

スタイルの適用

スタイルがUI 要素のタグ名に適用されるように指定することで、特定のUI 要素のすべてのインスタンスにスタイルを適用できます。
```
<style applyTo="button">
<normal backgroundColor="#0080FF" />
</style>
```

要素のセットとしてクラスに対してスタイルを適用できます。
ピリオドで始まるapplyTo 属性は、スタイルがタグ名ではなくクラスに適用されることを示します。
```
<style applyTo=".my-style">
<normal backgroundColor="#FF0000" />
</style>
```
次の例のmy-styleクラスは、UI 内の個々のXAL 要素に対して設定できるクラスを表します(XAL 自体ではピリオドは省略可能)。
<button class="my-style"/> or <button class=".my-style"/>

スタイルのapplyTo 属性には、単一のタグ名またはクラスの代わりに、カンマ区切りのタグ名およびクラスのリストを指定できます。
```
<style applyTo="button,label,.my-style" >
<normal backgroundColor="#0000FF" />
</style>
```
>

カスタマイズ可能なUI の状態

アプリケーションでUI コンポーネントにスタイルシートの属性値が適用される条件は、状態により制御されます。状態ごとにさまざまな属性が適用されます。
UI コンポーネントは、同時に複数の状態を取ることができます。あるコンポーネントは常にnormal の状態にあり、ボタンを押されるとmouseOver およびmouseDown の両方の状態も取ります。UI 要素が複数の状態にある場合、優先順位が最も高い状態の値を選択することにより重複した属性が解決されます。次の一覧では、使用可能な状態を優先順位の高いものから順に示します。

1. disabled
2. focused
3. selected (checkBox、radioButton などに適用)
4. mouseDown
5. mouseOver
6. normal

上で示したスタイル定義の例では、<link>のスタイルはnormal およびfocused に対して異なるfontColor が定義されています。focused の状態の優先順位が最も高いため、<link> がフォーカスされている場合は常に赤く表示されます。mouseOver の状態もnormal の状態よりも優先順位が高いため、マウスを上に移動した場合も<link> は赤くなります。normal の状態でテキストに下線が引かれるように定義され、優先順位の高い状態でオーバーライドされていないため、どの状態でもテキストには下線が引かれます。

スタイルの優先順位

同じ要素に複数のスタイルが適用される場合があります。また、XAL 自体の要素に対して指定された属性がスタイルの属性と衝突することもあります。これらの優先順位の問題は、次のルールで解決されます。

Nexaweb では、常にXAL 自体で指定された属性値が優先されます。Nexaweb は、XAL ファイルで指定された属性値をすべてのスタイルに優先して使用します。
Nexaweb Nexaweb は、要素のクラスに一致するスタイルを使用します。
Nexaweb は、要素のタグ名に一致するスタイルを使用します。

スタイルシートの構成

Nexaweb Platform では、デフォルトのスタイルシートが自動的に適用され、さまざまなUI 要素に標準的なルックアンドフィールを提供します。デフォルトのスタイルシートをオーバーライドするか、デフォルトのスタイルシートを置き換える代わりに、補足する追加のスタイルシートを使用することができます。アプリケーションのnexaweb-client.xml コンフィギュレーションファイルで、次のように任意の追加スタイルシートを指定します。

<style-sheets>
<default-style-sheet>DefaultStylesheet.xss</default-style-sheet> <!-- replaces the existing default -->
<style-sheet>MyStylesheet.xss</style-sheet> <!-- a supplemental stylesheet -->
< /style-sheets>

XAL ファイル内で宣言的にスタイルシートをロードすることもできます。次の例では、MCO execute 命令を使用して、

com.nexaweb.client.displayservice.DisplayServiceオブジェクトのloadStyleSheet メソッドを使用してスタイルシートをロードします。
<mco:execute>mco://DisplayService.loadStyleSheet("MyStylesheet.xss")</mco:execute>

ここでは、イベントハンドラ内で同じ例をプログラマチックに実行しています。

public void myHandler () {
ClientSession clientSession = McoContainer.getClientSessionFromMco(this);
DisplayService displayService = clientSession.getDisplayService();
displayService.loadStylesheet("MyStylesheet.xss");
}