Java Client Styling
Nexaweb stylesheets are similar in concept to HTML CSS files. Nexaweb stylesheets allow you to customize the look and feel of your application and centralize those customizations in a set of files separate from the UI definitions themselves. Nexaweb stylesheets can include two sections:
| Section | Description |
| <defs> | Stylesheets can contain a single <defs> section. This section defines gradients such as for the <linearGradient> and <popup> tags referenced in the stylesheet. |
| <style> | Stylesheets can contain any number of <style> tags that store similar component attributes that you can apply globally across all components or locally to a certain set of components. |
Nexaweb stylesheets are XML-based and use a .XSS extension. You can create and edit them using the Nexaweb Studio stylesheet editor or by editing the source directly in an XML editor.
Style Overview
A stylesheet consists of any number of individual styles. Each style contains the following:
- A set of target elements to which the style applies, specified by the applyTo attribute
- A set of states for which the style defines attributes. That is, Nexaweb applies the specified attributes when a target is in the given state.
- The attributes specified for each state
The following shows an example style definition:Nexaweb スタイルシートの概念はHTML CSS ファイルに似ています。Nexaweb スタイルシートを使用すると、アプリケーションのルックアンドフィールをカスタマイズし、そのカスタマイズをUI 定義自体から分離した一連のファイルにまとめることができます。Nexaweb スタイルシートには次の2 つのセクションを含めることができます。
| セクション | 説明 |
| <defs> | スタイルシートには、単一の<defs> セクションを含めることができます。このセクションでは、スタイルシートで参照される<linearGradient> や<popup> タグなどのグラデーションが定義されます。 |
| <style> | スタイルシートには任意の数の<style> タグを含めることができます。<style> タグには類似したコンポーネントの属性が格納され、すべてのコンポーネントに対してグローバルに、または特定のコンポーネントのセットに対してローカルに適用できます。 |
Nexaweb スタイルシートはXML ベースで、.XSS拡張子が使用されます。Nexaweb Studio スタイルシートエディタを使用してNexaweb スタイルシートを作成および編集するか、XML エディタで直接ソースを編集することができます。
スタイルの概要
スタイルシートは、任意の数の個々のスタイルから構成されます。各スタイルには、次の要素が含まれています。
- スタイルが適用されるターゲット要素のセット。applyTo属性によって指定されます。
- スタイルが属性を定義する状態のセット。つまり、Nexaweb ではターゲットが特定の状態にある場合に指定した属性が適用されます。
- 状態ごとに指定された属性。
スタイル定義の例を次に示します。
| Code Block |
|---|
<style applyTo="link"> |
...
<normal cursor="hand" color="blue" textDecoration="underline"/> |
...
<mouseOver color="red"/> |
...
<focused color="red"/> < /style> |
...
In this example, link represents the target element and normal and mouseOver represent states. Each state included in a style defines any number of attributes that apply to a target element when it is in that state. You can choose attributes from the range of attributes that apply to the target in standard XAL; however, Nexaweb recommends that you restrict your attribute selection to style-related attributes such as fonts, colors and borders. In this example, a <link> tag has a hand cursor with a blue font and an underline style in the default state. This style definition is functionally identical to defining every <link> in your XAL as:
...
この例では、linkはターゲット要素を表し、normalおよびmouseOver は状態を表します。スタイルに含まれる各状態により任意の数の属性が定義され、ターゲット要素がその状態にある場合に適用されます。属性は、標準のXAL のターゲットに適用される属性の範囲から選択できます。ただし、Nexaweb では、フォント、色、枠線などスタイルに関連した属性だけから属性を選択することをお勧めします。この例では、<link> タグにはデフォルトの状態で手のカーソル、青いフォント、および下線を引かれたスタイルが定義されています。このスタイル定義は、XAL ですべての<link> に次のように定義するのと同様に機能します。
<link cursor="hand"
...
fontColor="blue"
...
fontUnderline="true/>
...
Applying Styles
...
スタイルの適用
スタイルがUI 要素のタグ名に適用されるように指定することで、特定のUI 要素のすべてのインスタンスにスタイルを適用できます。
Code Block <style applyTo="button">
...
<normal backgroundColor="#0080FF" /> </style>
...
...
- 要素のセットとしてクラスに対してスタイルを適用できます。
ピリオドで始まるapplyTo 属性は、スタイルがタグ名ではなくクラスに適用されることを示します。
Code Block <style applyTo=".my-style">
...
<normal backgroundColor="#FF0000" />
...
</style>
...
...
次の例のmy-style
...
クラスは、UI 内の個々のXAL 要素に対して設定できるクラスを表します(XAL 自体ではピリオドは省略可能)。
<button class="my-style"/
...
> or <button class=".my-style"/>
...
スタイルのapplyTo 属性には、単一のタグ名またはクラスの代わりに、カンマ区切りのタグ名およびクラスのリストを指定できます。
Code Block <style applyTo="button,label,.my-style" >
...
<normal backgroundColor="#0000FF" /> </style>>
Customizable UI States
States control when the application applies the stylesheet attribute values to a UI component. Different attributes apply to each state.
A UI component can exist in multiple states at the same time. A component is always in the normal state, and a pressed button will also be in both the mouseOver and mouseDown states. If a UI element exists in multiple states, overlapping attributes will be resolved by choosing the value from the state with the highest precedence. The following list shows the possible states, from highest to lowest precedence:
- disabled
- focused
- selected (applies to checkBox, radioButton, etc)
- mouseDown
- mouseOver
- normal
In the example style definition shown above, the style for <link> defines a different fontColor for normal and focused. The focused state has the highest precedence, so when a <link> is focused it will always appear red. The mouseOver state also takes precedence over the normal state, so the <link> is also red when the mouse hovers over it. In all possible states the text will be underlined, because that is defined in the normal state and not overriden by any states with higher precedence.
Style Precedence
It is possible for multiple styles to apply to the same element, and also possible that attributes specified for elements in the XAL itself to collide with attributes in styles. The following rules resolve these issues of priority:
- Nexaweb always honors attribute values specified in the XAL itself. Nexaweb uses any attribute values specified in a XAL file over any styles.
- Nexaweb uses any styles matching the element's class.
- Nexaweb uses any styles matching the element's tag name.
Configuring Stylesheets
Nexaweb platform automatically applies a default stylesheet, giving a standard look and feel to the various UI elements. You can override the default style sheet or use additional stylesheets that supplement the default one rather than replacing it. You specify any addtional stylesheets within your application's nexaweb-client.xml configuration file as follows:
...
カスタマイズ可能な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 コンフィギュレーションファイルで、次のように任意の追加スタイルシートを指定します。
| Code Block |
|---|
<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 object's loadStyleSheet method.オブジェクトのloadStyleSheet メソッドを使用してスタイルシートをロードします。
<mco:
...
execute>mco://DisplayService.loadStyleSheet("MyStylesheet.xss")
...
</mco:execute>
...
Here is the same example executed programmatically within an MCO event handler:
ここでは、イベントハンドラ内で同じ例をプログラマチックに実行しています。
| Code Block |
|---|
public void myHandler () {
ClientSession clientSession = McoContainer.getClientSessionFromMco(this);
DisplayService displayService = clientSession.getDisplayService();
displayService.loadStylesheet("MyStylesheet.xss");
} |