nexacroスタイルシート（XCSS）はnexacro platformアプリケーションの画面要素をデザインするときに使用するnexacro platformのCSSです。Webドキュメントのスタイルを定義するCSS（Cascading Style Sheets）と基本的な使い方とスタイル属性は類似しており、CSS作成の経験のある開発者やデザイナーであれば容易に開発することができます。XCSSはテーマとは別にスタイルを適用するときに便利です。クラスセレクタとコンポーネントのcssclass属性を使用すると、特定のコンポーネントのみのスタイル効果を与えることができます。テーマも内部的にはXCSSと画像で構成されています。

この章では、nexacro studioを使用してXCSSを作成および使用する方法について説明します。

nexacroスタイルシート（XCSS）作成

nexacro platformアプリケーションの画面要素を設計する際にXCSSを使用することができます。XCSSは次のような手順で作成します。

ちなみにProject Explorerでも次のようにApplication名を選択した後、マウスの右ボタンをクリックして、コンテキストメニューから[Add > Style]を選択すると、同じ結果を得ることができます。

Finishボタンをクリックすると、次のようにProject Explorerで新たに作成されたXCSSファイルを確認することができます。作成されたファイルは、XCSS Editorで自動的にオープンされます。

生成されたXCSSは空のファイルです。スタイル効果を設定するには、コンポーネントに該当するセレクタを追加する必要があります。XCSS Editorの左上からAdd Selector（Insert）ボタンをクリックして、新しいセレクタを追加します。

選択したコンポーネントにどのようなスタイルプロパティがあるかを確認するには、Use Attributeチェックボックスをクリックします。Use Attributeをチェックすると、選択したコンポーネントで使用可能なすべてのスタイルプロパティが生成されます。ただし、値が設定されていない空のプロパティであるため、プロパティ値は次のステップである編集モードでユーザーが直接入力する必要があります。

XCSS Editorの上部のメニューを利用すると、自動的にスタイルコードが生成され、Previewウィンドウですぐに効果を確認することができます。ユーザーがXCSS Editorにコードを直接入力する方法も可能です。

上記のように.Buttonセレクタのスタイルコードを作成した後、HelloWorld.xcssファイルを保存します。

XCSSファイルの再利用

インポートに成功した場合、Project ExplorerでインポートしたXCSSファイルを確認することができます。XCSSはプロジェクトアプリケーションのStylesの下に、下図のように追加されます。

cssclass属性を使用してButtonコンポーネントの背景色変更

XCSSとコンポーネントのcssclass属性を利用して、目的のコンポーネントにのみスタイル効果を与えることができます。cssclass属性にXCSSで定義したクラスセレクタ（Class Selector）を設定すると、XCSSで該当クラスセレクタ名に定義したスタイルがすぐに適用されます。

cssclass属性を使用するには、まずButtonコンポーネントに適用するXCSSファイルを作成して、クラスセレクタを定義する必要があります。下記からはXCSSを作成するプロセスは省略し、クラスセレクタを宣言する部分から説明します。

生成されたXCSSは空のファイルです。スタイル効果を設定するには、コンポーネントに該当するセレクタを追加する必要があります。XCSS Editorの左上からAdd Selector（Insert）ボタンをクリックして、新しいセレクタを追加します。

該当コンポーネントにどのようなスタイルプロパティがあるかわからない場合には、Use Attributeチェックボックスを選択して、選択したコンポーネントで使用可能なスタイルプロパティをすべて生成します。ただし、値が設定されていない空のプロパティが生成されます。

XCSS Editorを使用して、下図のようにbackgroundプロパティを#c3d69bに、-nexa-text-alignプロパティをcenterに設定した後、XCSSファイルを保存します。

.Button.bg_green
{
	background : #c3d69b;
	-nexa-text-align : center;
}

Buttonコンポーネントにbg_greenセレクタに定義したスタイルが適用されるかどうかを確認します。