スタイルシート

Nexaweb のスタイルシートは、概念的には HTML CSS ファイルと似ています。Nexaweb のスタイルシートを使用すると、アプリケーションの外観と操作性をカスタマイズでき、このカスタマイズ設定を UI 定義自体とは別のファイルセットで集中管理できます。Nexaweb のスタイルシートには次の2 つのセクションがあります。

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

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

スタイルの概要

スタイルシートは、任意数の個別のスタイルで構成されます。各スタイルには次の内容が含まれています。

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

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

<style applyTo="link">
<normal cursor="hand" fontUnderline="true"/>
<mouseOver fontColor="red"/>
<focused fontColor="red"/>
</style>

この例で、link はターゲット要素、normalと mouseOver は状態を表します。スタイルに含まれる各状態は、任意の数の属性を定義します。これらの属性は、ターゲット要素が目的の状態である場合にその要素に適用されます。属性は、標準の NXML でターゲット要素に適用される属性の中から選択できます。ただし、フォント、カラー、境界線など、スタイル関連の属性のみを選択することをお勧めします。この例の<link> タグには、デフォルトの状態で、青のフォントと下線のスタイルを使用するハンドカーソルがあります。このスタイル定義は、NXML ですべての <link> を次のように定義することと機能的には同じです。

スタイルの適用

スタイルを特定の UI 要素のインスタンスすべてに適用するには、そのスタイルを UI 要素のタグ名に適用するよう指定します。

<style applyTo="button"> <normal bgColor="#0080FF" /> </style>
要素に設定されたクラスにスタイルを適用できます。
ピリオドで始まる applyTo 属性は、スタイルがタグ名ではなく、クラスに適用されることを示します。

<style applyTo=".my-style"> <normal bgColor="#FF0000" /> </style>

次の my-style クラスは、UI にある各 NXML 要素に設定可能なクラスを表しています (NXML 自体でのピリオドの使用はオプションです)。
<button class="my-style"/> または <button class=".my-style"/>
スタイルの applyTo 属性に、1 つのタグ名またはクラスではなく、タグ名およびクラスのコンマ区切りリストを指定できます。

<style applyTo="button,label,.my-style" > <normal bgColor="#0000FF" /> </style>

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

状態は、アプリケーションがスタイルシートの属性値を UI コンポーネントに適用するタイミングを制御します。各状態にはさまざまな属性が適用されます。

UI コンポーネントは、複数の状態において同時に存在することが可能です。コンポーネントは常に normal の状態にあり、押されたボタンは mouseOver の状態と mouseDown の状態の両方にあります。UI 要素が複数の状態に存在する場合、重複している属性は、優先順位の最も高い状態から値を選択することによって解決されます。次のリストは、使用可能な状態をその優先順 (最高～最低) に示します。

disabled
focused
selected (checkBox、radioButton などに適用)
mouseDown
mouseOver
normal

上に示したスタイル定義の例で、<link>のスタイルは異なる fontColor を normal と focused の状態に定義します。focused の状態は優先順位が最も高いため、<link> がフォーカスを持つと、常に赤く表示されます。また、mouseOver の状態は normal の状態に比べて優先順位が高いため、マウスポインタが上に置かれると、<link>が赤く表示されます。すべての使用可能な状態において、テキストには下線が付きます。これは、normal の状態に定義されており、normal より優先順位の高い他の状態によってオーバーライドされないためです。

スタイルの優先順位

同じ要素に複数のスタイルを適用することができます。また、NXML 自体で要素に指定されている属性がスタイルの属性と競合していてもかまいません。このような優先度に関する問題は、次の規則によって解決されます。

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

スタイルシートの設定

Nexaweb Platform はデフォルトのスタイルシートを自動的に適用して、さまざまな UI 要素に標準的な外観と操作性を与えます。デフォルトのスタイルシートはオーバーライドすることができます。また、デフォルトのスタイルシートの代わりに別のスタイルシートを使用するのではなく、デフォルトのスタイルシートを補足する追加のスタイルシートを使用することも可能です。追加のスタイルシートを使用する場合は、アプリケーションの nexaweb-client.xml コンフィギュレーションファイルで次のように指定します。

<style-sheets>
<default-style-sheet>DefaultStylesheet.xss</default-style-sheet> <!-- 既存のデフォルトスタイルシートを置き換えます。 -->
<style-sheet>MyStylesheet.xss</style-sheet> <!-- a supplemental stylesheet -->
</style-sheets>

また、NXML ファイル内でスタイルシートを宣言的にロードすることもできます。次の例では、MCO の実行命令により、com.nexaweb.client.displayservice.DisplayServiceオブジェクトの loadStyleSheet メソッドを使用してスタイルシートをロードします。

<mco:execute>mco://DisplayService.loadStyleSheet("MyStylesheet.xss")</mco:execute>

次に、MCO イベントハンドラ内でプログラムを使用して実行する場合の例を示します。

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