スタイルとは

スタイルは、nexacro platformで開発する画面を構成する各要素について、見た目を表す情報を定義したものです。

スタイルの中には、各コンポーネントの背景色や枠線や角の丸み、テキストの表示位置やサイズやフォント、余白などが含まれ、スタイルを指定できる画面要素には、コンポーネントのほかに画面フォーム、フレーム、タイトルバー、ステータスバー、スクロールバーなどがあります。

スタイルはコンポーネント個々に対するプロパティ設定のほかにThemeファイルやCSSファイルによる共通化が行え、それぞれ適用の優先度があるため、実装面で考慮する点が存在します。本章では、スタイル実装の基本からスタイル設定項目の一覧、ThemeやCSSファイルの作成方法などの技術情報を提供します。

スタイル適用の流れ

Themeファイルではアプリケーション全体で利用するスタイルの初期値を定義し、XCSSファイルではデフォルトスタイルやcssclassの参照としてスタイル情報をまとめて定義することができます。

スタイルに関連するThemeファイルやXCSSファイルは、nexacro studioのResource Explorerにて管理します。

Themeファイルの作成

ユーザが編集できるThemeファイルはTheme配下に格納されています。初期状態として「default」が表示されていますが、右クリック＞「New Theme」よりThemeを新規作成することができます。

XCSSファイルの作成

XCSSファイルはXCSSResourceを右クリック＞「New Nexacro Style Sheet」より新規作成することができます。

XCSSファイルはプロジェクトフォルダ配下の「\_resource_\_xcss_」フォルダに格納されますが、使用するアプリケーションを関連付ける作業が必要です。

下記の新規作成画面にて、Insert Targetのチェックボックスにより関連付けるアプリケーションを選択しますが、あとで設定することもできます。詳細についてはXCSSファイルの関連付けをご参照ください。

スタイルの作成

ThemeとXCSSファイルでのスタイル作成は、nexacro studioの専用の編集画面にて行います。

スタイルファイルの変換

nexacro studioにおけるスタイル情報のソースファイル(*.xcss)は、ジェネレートすることで変換が行われ、実行用ファイルとして各実行環境ごとのCSSファイルとスクリプト制御用のマップファイルが生成されます。

ジェネレートの結果として、Theme内のStyleとユーザが作成したXCSSファイルから下記のようなファイルが生成されます。