nexacro platfromは、各OSに適切なデフォルトテーマを提供しています。ただし、業務環境に応じて適切なデザイン作業は、アプリケーションの開発時に必要な作業です。各コンポーネントに適切なスタイルプロパティ値を指定して、それを反映することができます。

デフォルトテーマの変更

デフォルトテーマ自体は、nexacro studioが提供する固定された内容であるため、そのものを変更して保存することはできません。

nexacro studioでデフォルトテーマを開いて変更することができます。ただし、変更した内容をデフォルトテーマとして保存することはできません。デフォルトテーマを変更して保存しようとすると、「名前を付けて保存」というダイアログが表示されます。

デフォルトテーマをコピーしてマイテーマ作成

テーマを新たに作成することもできます。ただし、テーマを作成するために指定する必要があるプロパティが多すぎるため、最初からテーマを作成するには容易ではない作業です。このような場合は、デフォルトテーマをコピーしておいて、それを基に必要な項目を修正して使用します。

nexacro studioのProject Explorerウィンドウにて、下部のResource Explorerタブをクリックします。

コピーするデフォルトテーマをマウスの左ボタンで押した状態でドラッグしてThemeフォルダに移動します。

Themeフォルダの下にdefault.xthemeファイルがコピーされました。そのまま使っても構いませんが、デフォルトテーマとファイル名が同じであれば混乱することがありますので、テーマ名を変更します。マウスの右ボタンをクリックし、コンテキストメニューから「Rename」項目を選択して、「test」に変更します。

default.xthemeファイルがそのままコピーされず、画像ファイルとXCSSファイルが解凍された状態でコピーされます。

[Project Explorer]に戻って、「Environment」項目を選択し、プロパティウィンドウのthemeidプロパティ値をThemeフォルダの下にコピーしたテーマに変更します。

themeidを変更した後、デザイン画面が変更されない場合があります。このような場合は、[Proejct Explorer]でプロジェクトをマウスの右ボタンでクリックし、コンテキストメニューから「Refresh」項目を選択します。

マイテーマでButtonコンポーネントの背景色を変更

Themeフォルダにコピーしたテーマファイルをマウスでダブルクリックします。ファイルが開かれて、theme.xcssファイルを編集することができるエディタが表示されます。

【Nexacro Style Sheet]項目からButtonをダブルクリックします。【Xcss Editor]には.Buttonのコードが表示され、[Preview]にはButtonコンポーネントのプレビュー画面が表示されます。

【Xcss Editor]に表示されたコードを直接編集したり、上部のツールバーから目的の項目を選択して変更することができます。上部のツールバーから「Color」項目を選択します。

希望する背景色を選択します。

コードでcolorプロパティ値と[Preview]に表示されるButtonコンポーネントの文字色の変更を確認できます。

デザイン画面で、Buttonコンポーネントを配置してみましょう。テーマから変更した背景色が反映されたのを確認します。既存に配置したButtonコンポーネントの色も全て変更されます。