Theme

ThemeファイルはXCSSと画像ファイルで構成されたファイルをまとめたものです。デフォルトテーマは圧縮された形式で提供されますが、プロジェクトでは展開されて使用します。

テーマエディタは、Resource Explorerの「Theme」の下に表示されているテーマをダブルクリックするか、コンテキストメニューの[Edit]を選択して開くことができます。

Resource Explorerで「NexacroTheme」の下に表示されているテーマは、nexacro studioのインストール時に組み込まれているテーマです。該当テーマは、変更／削除することができません。テーマを変更するには、「Theme」の下にテーマを移す必要があります。「NexacroTheme」の下に表示されているテーマを選択し、ドラッグして、「Theme」の下に移すことができます。

「NexacroTheme」の下に表示されているテーマを編集すると、プロジェクトに該当テーマをコピーするかを確認するダイアログボックスが表示され、[Yes]を選択する場合、「Theme」の下にコピーされ、編集ウィンドウを実行します。

Image

Themeで使用する画像をツリー型で提供します。画像は追加と削除が可能であり、画像を選択すると、プレビュー画面で確認することができます。

ここで追加した画像ファイルは、XCSSソースにURL形式で入力して、テーマ画像として適用することができます。

XCSS

Themeのスタイルを定義することができるCSSを編集することができます。

XCSS

XCSSは、nexacroの画面を構成する画面要素をデザインする機能を意味します。スタイルを適用することができる要素には、コンポーネント、Form、Frame、TitleBar、StatusBar、ScrollBarなどがあります。

XCSSエディタは、Project ExplorerでXCSSファイルを選択するか、Resource ExplorerでXCSSファイルを選択してダブルクリックするか、ファイルを選択してコンテキストメニューから[Edit]を選択して編集することができます。

XCSSエディタは、セレクタ一覧をツリー型で提供します。

	名前	説明
1	Sort by Group	セレクタをコンポーネントグループで並べ替え
	Sort by Alphabet	セレクタをアルファベット順に並べ替え
	Add Selector	セレクタ追加
	Add Child Selector	選択したセレクタの子セレクタを追加
	Delete Selector (Delete)	選択したセレクタを削除
	Delete All Selector (Ctrl+Shift+Del)	すべてのセレクタを削除
	Options	Native Cssでジェネレートする対象ブラウザを選択
2	Selector Tree	セレクタリストをツリーで構成
3	Component Preview	選択した項目のプレビュー領域
4	Style Quick Editor	選択したセレクタに頻繁に変更されるスタイルの簡易編集を提供
5	xcss Editor	nexacro Style Sheetエディタ
6	Generated Code Preview	NRE/Browser別に変換されたテキストタイプのCSSプレビュー
7	Navigatorbar	目的のセレクタを順番通りに検索／追加

ツリーからセレクタをクリックすると、該当XCSSコードとNative CSSコード、プレビューイメージを表示します。また、セレクタの各Attributeは、プロパティウィンドウで変更できます。

セレクタを表示するツリー領域でマウス右ボタンをクリックして表示されるコンテキストメニューでは、使用しないセレクタのAttributeコードを削除する機能をサポートします。

名前	説明
View	XCSS Editor内で配置されたウィンドウの表示有無を設定します。
Add Selector	セレクタ追加
Add Child Selector	選択したセレクタの子セレクタを追加
Delete Selector	選択したセレクタを削除
Delete All Selector	すべてのセレクタを削除
Compress	選択したコンストラクタで使用しないAttributeコードを削除
UnCompress	選択したコンストラクタで削除されたAttributeコードを回復
Compress All	すべてのコンストラクタで使用しないAttributeコードを削除
UnCompress All	すべてのコンストラクタから削除されたAttributeコードを回復
Collapse All	セレクタツリーをすべて閉じる
Expand All	セレクタツリーをすべて開く

作成したスクリプトにエラーがある場合には、Error Listに表示され、エラーが発生したセレクタを表示します。

セレクタ追加

CSSエディタのツールバーで、「Add Selector」をクリックして、タイプセレクタを追加することができます。Componentsリストからチェックしたコンポーネントでタイプセレクタを追加することができます。

	名前	説明
1	Multi Selector	同じ値を持つ複数のセレクタを纏めて指定します。 2つ以上のコンポーネントを選択するか、Statusを2つ以上選択した場合、チェックボックスの領域が活性化され、チェックすると、Multi Selectorに処理します。例えば、Button、Calendarコンポーネントを選択して、Multi Selectorをチェックすると、下記のように処理します。 `.Button,` .Calendar { }
2	Class Selector	任意のClass名で現在のセレクターの設定値を適用します。例えば、Buttonコンポーネントに対して「TEST」というClass名でスタイルを設定します。対象のコンポーネントのcssclassプロパティ値として「TEST」を指定すると、スタイルが適用されます。 `.Button.TEST` { background : aqua; }

名前

説明

Multi Selector

同じ値を持つ複数のセレクタを纏めて指定します。

2つ以上のコンポーネントを選択するか、Statusを2つ以上選択した場合、チェックボックスの領域が活性化され、チェックすると、Multi Selectorに処理します。例えば、Button、Calendarコンポーネントを選択して、Multi Selectorをチェックすると、下記のように処理します。

.Button,

.Calendar

{

}

Class Selector

任意のClass名で現在のセレクターの設定値を適用します。

例えば、Buttonコンポーネントに対して「TEST」というClass名でスタイルを設定します。対象のコンポーネントのcssclassプロパティ値として「TEST」を指定すると、スタイルが適用されます。

.Button.TEST

{

background : aqua;

}

Use Attribute

セレクターで使用するプロパティをエディターに追加するかどうかを選択します。

チェックを入れると、該当のセレクターで使用できるプロパティの一覧がエディターに表示されます。

Status Combination

Status項目とUserStatus項目を両方とも選択した場合、１つに纏めて作成することができます。

例えば、Buttonコンポーネントのmouseover Statusとselected UserStatusを両方とも選択した後チェックを入れると、以下のように処理されます。（マウスオバー状態と選択状態が両方とも該当する場合）

.Button[status=mouseover][userstatus=selected]

{

}

Status項目選択時のプロパティセレクタを指定します。enabledの状態はデフォルト値として処理されて、別のプロパティセレクタを指定しません。

クラスセレクタ追加

Add SelectorウィンドウでClass Selectorを選択して、クラス名を入力します。コンポーネントをチェックして組み合わせられたクラスセレクタとしても生成することができます。

Components一覧よりControl項目を選択している場合はClass Selectorを追加することができません。

子セレクタ追加

子を持つセレクタをツリーから選択して、ツールバーのAdd Child Selectorをクリックすると、子セレクタを追加することができます。

nexacroで使用する子セレクタという表現は、CSSの子セレクタとは違います。形式は下位セレクタ(Descendant selectors)と似ています。

NavigatorBar

コンポーネント項目に直接移動もしくはサブトピックの中から目的の項目に直接移動する機能を提供します。「♦」ボタンをクリックすると、移動可能なすべてのコンポーネントリストが表示され、項目の選択時に、該当するコンポーネントコードに移動します。

セレクタもしくは子セレクタの横に表示されているボタンをクリックすると、サブ項目のリストが表示され、項目の選択時に、該当するコードに移動します。

該当項目がない場合は、「+」ボタンが表示されます。該当ボタンをクリックすると、サブ項目が追加されます。

コード編集

エディタでプロパティ値の入力時に自動的にプロパティ値の一覧と関連syntaxを表示します。エンターキーで目的のプロパティ値を選択すると、入力可能なプロパティ値のタイプを表示します。

入力可能なプロパティ値のタイプが2つ以上の場合、上／下の矢印キーを使ってプロパティ値のタイプを選択することができます。エンターキーを入力して、目的のプロパティ値のタイプを選択すると、関連する入力例を画面に表示します。

Style Quick Editor領域は展開または折りたたむことができます。必要により、Text Editor領域をより広く活用することができます。

XCSSエディタの下部のタブで「Text」を選択すると、全体コードを変更することができます。

変数宣言およびプロパティ値としての利用（Predefine）

XCSSの編集時にプロパティ値として繰り返し使用する値を変数のように予め宣言しておき、プロパティ値を直接指定する代わりに該当の変数（id）を指定することができます。プロパティ値を変更する必要がある場合はPredefine項目の中から対象のItemのvalue値を修正することでプロパティ値を反映できます。

Predefine機能はnexacro studioでのみ利用可能な機能です。

XCSSの編集時にのみ設定でき、スクリプトでItem valueにアクセスしたり変更することはできません。

CSS custom properties (variables)とは異なる機能です。

XCSSの編集時にはCSS custom properties (variables)をサポートしません。

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

変数宣言

XCSSの編集画面のプロパティウィンドウでPredefineタブに切り替えます。 Group項目を追加し、変数として使用するItem項目を追加します。

	名前	説明
1	Add Group	Group項目を追加します。 Group項目はItem項目を種類ごとに区別するための用途でのみ使用します。 Predefineを設定する際に1つ以上のGroup項目が必要です。
2	Add Item	id、valueで構成された変数です。 Item項目の中でidの値はXCSSでプロパティ値を設定する際に使用します。同じXCSSファイル内でidはユニークである必要があります。
3	Delete	選択したGroupもしくはItemを削除します。 Groupの削除時にGroupに含まれたItemも一緒に削除されます。 2つ以上の項目を選択した後に削除することができます。 1つのGroupもしくはItemのみ削除する場合は各項目の先頭の「-」ボタンにより削除することが出います。
4	Group選択フィルター	一覧より選択したGroupに含まれたItemのみ表示されます。「All」項目を選択した場合は全てのGroup、Itemが表示されます。
5	id検索フィルター	検索ワードを入力すると、該当の文字列が含まれたidを持つItemのみ表示されます。

他のGroupにItemを移動することができます。

Group内で宣言されたItemの順序は動作に影響がなく、順序を変更することはできません。

Predefineタブで宣言した変数（Item）はXCSSプロパティ値の編集時に利用することができます。

宣言した変数をプロパティ値として利用（XCSS Editor）

XCSSの編集時にインテリジェンス機能によりPredefineタブで宣言したItemを候補として表示し、選択することができます。

Itemを選択すると、下記の形式に自動変換されてプロパティ値として設定されます。

宣言した変数をプロパティ値として利用（プロパティウィンドウ）

プロパティウィンドウのPredefineタブで宣言したItemを選択するには、プロパティリストの各項目にある「Predefine」ボタンをクリックしてボタンの表示を切り替えた後に「Predefine List」ボタンで表示される画面からItemを選択します。

プロパティリストでPredefine機能を利用する場合、プロパティ単位でのみ設定することができます。

例えば、backgroundプロパティを設定する場合はPredefine機能を利用できますが、下位項目であるbackground-colorでは「Predefine」ボタンが表示されず利用できません。

Generate結果の確認

Predefine機能を利用した値はGenerateする際に該当のvalue値に変換されて反映されます。XCSSの編集時にComponent PreviewウィンドウもしくはプロパティウィンドウのComputed Styleタブより変換後の値が確認できます。

Predefineプロパティ値の共有

Predefineプロパティ値はTheme内のXCSSもしくはXCSSファイル内でのみ適用されます。設定値を共有するには、外部のテキストエディタよりXCSSファイルを開き、Predefinesタグ内の項目をコピーします。

<?xml version="1.0" encoding="utf-8"?>
<XCSS version="1.1">
  <Predefines>
    <Group id="Color">
      <Define id="main_color" value="blue"/>
      <Define id="font_color" value="yellow"/>
      <Define id="sub_color" value="red"/>
    </Group>
  </Predefines>
  <CSSData><![CDATA[.Button
{
	background : -nexa-define(--main_color);
}
]]></CSSData>
</XCSS>

使用例：gray Themeの色の変更

gray Themeでは下記の通りに選択された項目に対する色がPredefine項目に定義されています。

maincolor: #BBAAFF
subcolor: #EEEBFF

Predefine項目値を任意の値（blue系の色）に変更して保存すると、変更後の値が反映されることが確認できます。

maincolor: #3E86FF
subcolor: #DEF1FE