nexacro platformは、テーマやCSSを適用して同一のプロジェクト内で異なるスタイルのUIに簡単に変更することができます。
テーマとCSS
ThemeとCSSは、nexacro platformのスタイルを変更することができるという共通点がありますが、ThemeにはCSSファイルとCSSで使用する画像ファイルも含まれているという違いがあります。
CSSファイルの生成
Standard Toolbarアイコンをクリックするか、メニュー[File – New – File – Style Sheet]を選択してCSSファイルを生成することができます。
Style Sheet Toolbar
Create a new Cascading Style Sheet
属性 | 説明 |
|---|---|
File name | 生成するStyle Sheetのファイル名 |
Location | 生成するStyle Sheetの位置 |
Insert to ADL | ADLの追加有無および追加するADLを選択 |
Insert to Form | フォームの追加有無および追加するフォームを選択 |
CSSファイルエディター
CSSを編集できるCSS Editorは、Selector、Preview Source Code、Propertiesで構成されます。
「Selector」では現在のCSSの全てのSelectorをTree構造で表示し、各Selectorの追加/削除の機能をサポートします。
Selector[Popup Menu]
メニュー | 機能 |
|---|---|
Go to Source | 選択したSelectorのSource Codeの位置に移動します。Selectorをダブルクリックしても同じです。 |
New Selector | 新規Selectorを入力します。 |
Add Selector | 選択したSelectorにChild Selectorを追加します。 |
Delete | 選択したSelectorを削除します。 |
Rename | 選択したSelectorの名前の変更します。 |
Compress All | 使用していないプロパティを全て削除します。 |
Uncompress | 選択したSelectorが提供するプロパティをCSSに表示します。 |
Expand | 選択したSelectorの下位の項目を展開します。 |
Collapse | 選択したSelectorの下位の項目を隠します。 |
以下の図は、New Selectorの入力ウィンドウです。選択した要素のスタイルを指定したり、特定IDの項目のスタイルを指定することができます。
New Selector
「Preview」では、Styleが適用された結果をシミュレートし、確認することができます。マウスの操作により、Pushed、Mouse Over、Focused、Disabledなどの状態を確認することができます。
CSS Editor[Preview]
「SourceCode」ウィンドウでは、現在編集中のCSSファイルを表示し、開発者がStyleを直接修正してことができます。
基本的にCSS構文はセレクタと宣言文で構成されます。セレクタ(Selector)は、宣言したプロパティをどこに適用するかを指定し、宣言文(Declaration)ではプロパティを定義します。プロパティはプロパティ名とプロパティ値に構成され、プロパティ名はどの種類のStyleを適用するかを指定し、プロパティ値で詳細なスタイルを定義します。
CSS Editor[Syntax]
Propertiesウィンドウでは、Styleを入力、修正することのできるプロパティ値を表示し、Propertiesウィンドウで入力した内容は、SourceCodeに自動的に適用されPreviewで確認することができます。
CSS Editor[Properties]
テーマの生成
Standard Toolbarアイコンをクリックするか、メニュー[File – New – File – XTheme]を選択してCSSファイルを生成することができます。
Theme Toolbar
ファイル名と格納場所を入力してテーマファイルを生成することができます。
Create a new XTheme file
属性 | 説明 |
|---|---|
File name | 生成するテーマファイルの名前 |
Location | 生成するテーマファイルのパス |
テーマエディター
新たなテーマを生成したり、既存のテーマを修正することのできるテーマエディタは、下記のように構成されます。
Theme Editor
属性 | 説明 | |
|---|---|---|
1 | Folder Tree | テーマに含まれる画像ファイルおよびCSSファイルリスト |
2 | Image Preview | 画像ファイルのプレビュー |
3 | New Folder | 選択した位置に新たなフォルダーを追加 |
4 | Insert | 選択した位置に新たなファイルをリストに追加 |
5 | Delete | 選択したファイルをリストから削除 |
Style Property Editor
Styleを直観的に入力、修正することができるStyle Property Editorを使用し、フォーム上の個別コンポーネントのCSS Styleを編集することができます。Style Property Editorで修正した内容は、Properties ウィンドウにリアルタイムで適用されます。
CSSファイルを修正する場合には、Style Property Editorがサポートされません。ソースコードを直接修正したり、Propertiesウィンドウで修正する必要があります。
Text
コンポーネントのテキスト関連プロパティを修正することができます。
Style Property Editor[Text]
属性 | 説明 |
|---|---|
Font | コンポーネントのText fontを修正(Propertiesウィンドウのfontの属性) |
Color | コンポーネントのText Color Styleを修正(Propertiesウィンドウのcolorの属性) |
Alignment | コンポーネントのText Align Styleを修正(Propertiesウィンドウのalignの属性) |
Border
コンポーネントのBorder関連のプロパティを修正することができます。
Style Property Editor[Border]
属性 | 説明 |
|---|---|
Border | コンポーネントのBorder Styleを修正(Propertiesウィンドウのborderの属性) |
Border Type | コンポーネントのBorder Typeを修正 (Propertiesウィンドウのbordertypeの属性) |
Focus Border | コンポーネントのFocus Border Styleを修正(Propertiesウィンドウのfocusborderの属性) |
Background
コンポーネントのBackground関連のプロパティを修正することができます。
Style Property Editor[Background]
属性 | 説明 |
|---|---|
Color | コンポーネントのBackground Colorを修正(Propertiesウィンドウのbackgroundの属性) |
Image | コンポーネントのBackground Imageを修正(Propertiesウィンドウのbackgroundの属性) |
Gradation | コンポーネントのBackground Gradationを修正(Propertiesウィンドウのgradationの属性) |
Gradationのスタイルは、定義したstart、endのposition値を使ってGradationを生成するテンプレートで、コンポーネントのbackgroundの属性を‘@gradation’に変更します。StyleでGradationを解除する場合はbackgroundの以前の値に復旧します。
Appearance
コンポーネントのAppearance関連プロパティを修正することができます。
Style Property Editor[Appearance]
属性 | 説明 |
|---|---|
Opacity | コンポーネントのOpacity Styleを修正(Propertiesウィンドウのopacityの属性) |