スタイルの適用方法

スタイルの適用方法

スタイルの適用は、以下の3つの方法にて行います。

コンポーネントのプロパティによる設定

nexacro studioにて各コンポーネントのプロパティリストより、スタイルのプロパティを設定します。また、ロジックによって動的にプロパティを変更することも可能です。

CSSファイルの参照

スタイルの定義情報をまとめたCSSファイルを作成し、デフォルトスタイルとしての参照やcssclassを指定して利用します。CSSファイルはApplication単位に関連付けることができます。

Themeファイルの参照

Themeファイルは、スタイル情報と画像ファイルで構成されたファイルです。Themeファイルには、アプリケーション全体で利用するスタイルの初期値を定義します。

スタイル適用の優先度

スタイルの適用には優先度が定められており、3段階の優先度があります。

適用の優先度は、下記の図の３＞２＞１となっており、コンポーネントのプロパティ設定が一番高く、同じ項目に複数の定義があった場合には優先度が高いスタイルが適用されます。

Style優先度

優先度が一番高いコンポーネントのプロパティ値を設定した場合、その項目に関してはThemeやCSSを利用したスタイルの指定ができなくなります。ThemeやCSSを使ったスタイルの共通化や一括管理を行うために、プロトタイプの作成段階からCSSを利用して、スタイルの共通化を意識した開発を行うことで製造工程への移行がスムーズに行えます。

Styleプロパティによる設定

nexacro studioのプロパティリストによる設定

プロパティリストのStyleカテゴリを編集します。

StylePropertyList

プロパティペインにて、Computed Styleタブに切り替えると、実行時に最終的に適用されるスタイルの設定値が表示されます。（照会のみ）


ロジックによる動的なスタイル設定

一般的なプロパティと同様に、下記のようなロジックによって設定を行います。

//設定値の取得
var val = this.Button00.color;

//スタイルの変更
this.Button00.set_background("silver");

先頭に「-nexa-」付きのベンダープレフィックス項目は、スクリプトによる設定時に別のプロパティ名を使用する必要があります。

プロパティ名

スクリプト

設定例

-nexa-border

border

this.Button00.set_border("1px solid #999999");

-nexa-edge

edge

this.Button00.set_edge('URL("./images/border.png") 5px 5px');

-nexa-icon

icon

this.Button.set_icon( 'URL("./images/smile.gif")' );

-nexa-icon-position

iconPosition

this.Button.set_iconPosition("left");

-nexa-padding

padding

this.Button00.set_padding( "5px 5px 5px 5px" );

-nexa-text-align

textAlign

this.Button.set_textAlign("center");

-nexa-text-decoration

textDecoration

this.Button00.set_textDecoration("underline");

-nexa-text-padding

textPadding

this.Button00.set_textPadding("5px 5px 5px 5px");

-nexa-vertical-align

verticalAlign

this.Button00.set_verticalAlign("middle");

-nexa-word-wrap

wordWrap

this.Button.set_wordWrap( "char" );

CSSファイルによる設定

新規XCSSファイルの作成

トップメニューのFileから、New＞Nexacro Style Sheet(.xcss) を選択します。

NewXCSSFile

表示されたXCSSファイル作成ダイアログにて、ファイル名と関連付けるアプリケーションを指定します。

この段階でまだ関連付けるアプリケーションが決まっていない場合には、ファイルの作成のみ行い、関連付けはあとで設定することができます。詳細についてはXCSSファイルの関連付けをご参照ください。

格納先フォルダは、[プロジェクトフォルダ]\_resource_\_xcss_\になっており、nexacro studio上ではResource Explorerよりアクセスできます。

NewXCSS

スタイルの作成と編集

スタイルエディター

style_editor1

Selector Explorer

CSSセレクターを新規登録したり、既存のCSSセレクターを削除することができます。

また、作成したスタイルのCSSセレクターの情報が一覧表示されます。選択することでその内容がPreview、Source Code、Propertiesエリアに表示されます。

Component Preview

編集中のスタイルの外観が確認できます。

※編集内容によってはPreviewエリアに表示されない項目もあります。

Navigatorbar

１つ以上のセレクターを指定している場合、各要素のドロップダウンボタンによってセレクターやステータスを選択することができます。すでに存在する場合は該当のセレクターに移動します。

存在しない場合は末端の右側に「＋」ボタンが表示され、該当のセレクターを追加することができます。

Navigatorbar

Style Quick Editor

よく使われるスタイル項目をアイコン化し、マウスのクリック操作によってスタイルの値を簡単に設定できます。

xcss Editor

選択されているセレクターに対して、ソースコードを表示し、編集することができます。

Border Editor

borderEditor

Font Editor

font

Color Picker

ColorPicker

XCSSファイルの関連付け

XCSSファイルはApplication情報と関連付けを行います。

XCSSファイルの新規作成画面にて、対象のApplicationを指定することが可能ですが、XCSSファイルの作成段階でまだ決まっていない場合には、ファイルの作成のみ行い、あとで関連付けを行うことができます。

Project Explorerから、Application Information＞Applications＞[対象のアプリケーション]を右クリックし、Insert＞Styleを選択します。

ファイル選択ダイアログより、対象のXCSSファイルを選択します。

XCSS02

対象のアプリケーション配下の「Styles」項目に、XCSSファイルが追加されます。

XCSS03

関連付けを解除する場合には、XCSSファイルを右クリック＞Removeを選択します。

XCSS04

下記の確認ダイアログにて、「Remove」を選択します。

「Delete」を選択すると、XCSSファイルが削除されてしまいますのでご注意ください。

XCSS05

Themeファイルによる設定

Themeファイルの作成

新規Themeファイルの作成

トップメニューのFileから、New＞Theme を選択します。

NewTheme1

NewTheme1-2

表示されたTheme作成ダイアログにて、ファイル名を指定します。

格納先フォルダは、[プロジェクトフォルダ]\_resource_\_theme_\になっており、nexacro studio上ではResource Explorerよりアクセスできます。

ThemeはResource Explorerからでも作成できます。

Themeを右クリック＞New Themeを選択します。


作成済のThemeファイルのインポート

Resouce Explorer上で、Themeを右クリック＞Import Theme を選択することで、作成済のThemeファイルをプロジェクトへ追加できます。

ImportTheme

Themeファイルの編集

Themeファイルの構造

Themeファイルはスタイルとイメージで構成されていて、各一覧が表示されます。上部の「Style」と「Image」をクリックして切り替えます。

Theme

Styleの編集

ThemeのStyleもXCSSファイルの編集と手順は同じです。詳細は「スタイルの作成と編集」を参照してください。

Imageの編集

イメージファイルの追加や削除などの編集は上部のアイコンにて行います。

theme_img0

各アイコンの機能一覧

メニュー

説明

New Folder

フォルダを追加します。

Import Images (Insert)

Themeにイメージファイルを追加します。

Remove Images (Del)

Themeからイメージファイルを削除します。

Import Images from Folder

指定したフォルダからイメージファイルをインポートします。

Export Images to Folder

選択したフォルダもしくはTheme単位でイメージファイルを指定したフォルダへエクスポートします。

Themeファイルの関連付け

ThemeはScreen情報と関連付けを行います。

Project Explorerから、Environment＞ScreenDefinition配下の各Screen情報を選択し、Specified environment by screenペインにてthemeidプロパティ値として適用するThemeを指定します。

screen_themeid

Screen情報はさらにアプリケーションと関連付けられています。

App_Properties

Screen情報とアプリケーションはn:1で関連付けることができるため、同じアプリケーションでも適用されるScreen情報によって異なるThemeを適用することができます。

例えば、同じアプリケーションをデスクトップPCとタブレットで使用する場合、それぞれのThemeを指定することができます。