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 platformの画面を構成する画面要素をデザインする機能を意味します。スタイルを適用することができる要素には、コンポーネント、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をチェックすると、下記のように処理します。 .Calendar { } |
2 | Class Selector | 特定のクラスを指定して、現在のセレクタの設定を反映します。 例えば、ButtonコンポーネントのTESTという名前のクラスを指定して、他のプロパティを作成することができます。このように作成されたセレクタは、コンポーネントのcssclassプロパティ値に「TEST」を指定すると、反映されます。 { background : aqua; } |
3
Use Attrubute
セレクタで使用するプロパティをエディタに追加するかを選択します。
該当項目をチェックすると、該当セレクタで使用できるプロパティリストにエディタに表示されます。
4
Status Combination
Status項目とUserStatus項目をすべて選択した場合、纏めて指定します。
例えば、Buttonコンポーネントのmouseover Status項目とselected UserStatus項目を選択した後、該当項目をチェックすると、下記のように処理します。.Button[status=mouseover][userstatus=selected]
{
}
Status項目選択時のプロパティセレクタを指定します。enabledの状態はデフォルト値として処理されて、別のプロパティセレクタを指定しません。
クラスセレクタ追加
Add SelectorウィンドウでClass Selectorを選択して、クラス名を入力します。コンポーネントをチェックして組み合わせられたクラスセレクタとしても生成することができます。
子セレクタ追加
子を持つセレクタをツリーから選択して、ツールバーのAdd Child Selectorをクリックすると、子セレクタを追加することができます。
nexacro platformで使用する子セレクタという表現は、CSSの子セレクタとは違います。形式は下位セレクタ(Descendant selectors)と似ています。
NavigatorBar
コンポーネント項目に直接移動もしくはサブトピックの中から目的の項目に直接移動する機能を提供します。「♦」ボタンをクリックすると、移動可能なすべてのコンポーネントリストが表示され、項目の選択時に、該当するコンポーネントコードに移動します。
セレクタもしくは子セレクタの横に表示されているボタンをクリックすると、サブ項目のリストが表示され、項目の選択時に、該当するコードに移動します。
該当項目がない場合は、「+」ボタンが表示されます。該当ボタンをクリックすると、サブ項目が追加されます。
コード編集
エディタでプロパティ値の入力時に自動的にプロパティ値の一覧と関連syntaxを表示します。エンターキーで目的のプロパティ値を選択すると、入力可能なプロパティ値のタイプを表示します。
入力可能なプロパティ値のタイプが2つ以上の場合、上／下の矢印キーを使ってプロパティ値のタイプを選択することができます。エンターキーを入力して、目的のプロパティ値のタイプを選択すると、関連する入力例を画面に表示します。
Style Quick Editor領域は展開または折りたたむことができます。必要により、Text Editor領域をより広く活用することができます。
XCSSエディタの下部のタブで「Text」を選択すると、全体コードを変更することができます。