スタイル(CSS: Cascading Style Sheets)とテーマは、nexacro platformの画面を構成する画面要素をデザインする機能です。

スタイルとテーマを適用することができる画面要素には、コンポーネント、画面フォーム、フレーム、タイトルバー、ステータスバー、スクロールバーなどがあります。

スタイル / テーマの概要

nexacro platformでのスタイルとテーマとは、画面上に出力されるUI要素のデザインを定義することを言います。ボタンを例にあげると、透明度、フォント、陰影、ぼかし、斜体などの効果をボタンコンポーネントに与えることを意味します。

スタイルの定義及び適用

スタイルはコンポーネント毎に定義します。

それぞれのコンポーネントにはスタイルの適用が可能なプロパティがあり、該当プロパティのスタイル値を設定することによってスタイルを定義します。

Button
{
     color : "red";
}
Static
{
     color : "blue";
}

적용된 스타일

スタイルの定義はセレクターを利用します。ここでは、CSSについての事前知識があると仮定して説明します。

nexacro platformがサポートするセレクターは以下の通りです。

デフォルトセレクタ: Type Selector, Class Selector, ID Selector, Child Selector
その他: Grouping, Pseudo-Classes

Type Selector：“ボタン”のようにコンポーネント名を指定します。

Syntax	Name (Element)
例	`Button {color : green;}`
意味	全てのボタンの色を緑色と定義します。

クラスセレクタ(Class Selector) : 特定のクラスに指定された項目のスタイルを適用します。

<Button id="Button00" text="Button00" left="50" top="20" width="100" height="40"   cssclass="BlueButton"/>

Syntax	.(Period)
例	`.BlueButton {color : blue;}`
意味	BlueButtonに指定されたクラスに対してblueカラーを適用します

以下のようにコンポーネントごとにクラスセレクタを指定することができます。

Button.BlueButton {color : blue;}

ID Selector：“Button00”のようにコンポーネントのIDを指定します。

<Button id="Button01" text="Button00" left="50" top="20" width="100" height="40"/>

Syntax	#
例	`Button#Button00 {color : yellow;}`
意味	全てのボタンの中でButton00というIDを持つボタンの色を黄色と定義します。

Child Selector：全てのコンポーネントの下位を指定します。

Syntax	>
例	Div>Button { color : blue; }
意味	全てのDiv内のボタンの色を青色と定義します。

チャイルドセレクタは、最上位のレイアウトに属しているコンポーネントのみを使用することができます。例えば、Div内に含まれているButtonのスタイルをコンポーネントレベルのchildセレクタに指定できないことです。必要な場合には、IDセレクタを使用する必要があります。

Form>Button (O)

Form>Div>Button (X)

Form>#div00>#button00 (O)

Pseudo-classes : セレクタとして指定できないステータス情報を指定します。
コンポーネントによって選択することができるステータス情報は異なります。
- UI element states pseudo-classes
  enabled(default), disabled, focused, mouseover, pushed, selected, readonly
- Structural pseudo-classes
  root, nth-child(), nth-last-child(), first-child, last-child, only-child, empty

Syntax	:
例	`Button:focused {color : black;}`
意味	全てのボタンがfocusとなれば、該当するボタンの色を黒色と定義します。

Grouping：同じ値(declarations)を持ついくつかのセレクターをコンポーネント名で指定します。

Syntax	,(Comma)
例	`Button, Combo, Calendar {font : Arial,9;}`
意味	全てのボタン、コンボ、カレンダーのフォントを「Arial 9」で定義します。

テーマの定義

テーマは、スタイルとイメージを組み合わせた形態です。

테마

テーマで使用するスタイルを定義します。
スタイルで使用しているイメージを含みます。

応用プログラムは1つのテーマのみを使用することができます。

nexacro platformは、default、black、gray、blueの4種類のテーマファイルを提供します。

該当するテーマは、nexacro studioのテーマとスタイルエディタ画面により必要な部分を修正することができます。

Themeはnexacro platformで必ず必要な基本情報を持っているため、使用者は必要な部分のみを選定して追加・修正作業をしなければなりません。

基本情報が削除されたり変更する場合には、それにより画面出力に問題が生じることがあります。例えば、“#combolist”のようなエディット形式のコンポーネント(Edit, MaskEdit, TextAreaなど)などで発生しますが、ポップアップメニューの設定がない場合にはポップアップメニューが表示されないことがあります。

従って、テーマは新しく生成するよりもなるべく基本として提供されるテーマを修正して他の名前で保存したり、コピーして使用するようにします。

スタイル/テーマの登録及び適用

UI要素デザインの適用順序

ADLに属するテーマ内のスタイル
ADLに属するスタイル
FDLに属するスタイル
FDL内のコンポーネントのスタイル

コンポーネントにスタイルが適用される順序は 1 > 2 > 3 > 4 です。従って、重複したスタイル値を定義した場合には、最後のスタイルである 4番のスタイルが画面に適用・出力されます。

スタイルとテーマの適用対象

スタイルは1つのフォームに宣言して使用することができ、グローバルに使用するためにはプロジェクト(ADL)に登録するかテーマに含めて使用することができます。

スタイルの適用対象は単純なコンポーネントだけでなく、多様な画面要素に適用されます。以下はその適用対象を表で表したものです。

以下はスタイルの適用が可能な対象です。

種類	適用対象
コンポーネント (Visibleオブジェクト)	Button, Calendar, CheckBox, Combo, Div, Edit, Grid, GroupBox, ImageViewer ListBox, MaskEdit, Menu, Progressbar, Radio, Spin, Static, Tab, TextArea
画面フレーム	Form, MainFrame, ChildFrame, FrameSet, HFrameSet, VFrameSet, TileFrameSet TitleBarControl, StatusBarControl
その他	ScrollBar

種類

適用対象

コンポーネント

(Visibleオブジェクト)

Button, Calendar, CheckBox, Combo, Div, Edit, Grid, GroupBox, ImageViewer

ListBox, MaskEdit, Menu, Progressbar, Radio, Spin, Static, Tab, TextArea

画面フレーム

Form, MainFrame, ChildFrame, FrameSet, HFrameSet, VFrameSet, TileFrameSet

TitleBarControl, StatusBarControl

その他

ScrollBar

スタイルの制約事項

下記の制約事項を無視して、ユーザーが任意に CSSコードを直接変更する場合には、正確な動作が保証できません。

一部のスタイルプロパティを適用したときに nexacro studioのデザインモードで表示されるのと、実際のアプリケーションを実行したときに表示されるのが異なる場合もあります。

CSSセレクタ（Selector）のデプスは、最大4つまでサポートします。

CSSセレクタのデプスは、4つ以下に指定する必要があります。

Form>#id>#id>#id>#id ------ (O)
Form>#id>#id>#id>#id>#id -- (X)

タイプセレクタ(Type Selector)は、1段階のセレクタのみ指定することができます。

タイプセレクタは、1段階のセレクタのみ指定する必要があります。2段階以降の CSSセレクタは、タイプセレクタ以外の他のセレクタを使用する必要があります。

Form>Div>Button -------- (X)
Form>#div00>#button00 -- (O)
Div>#button00 ---------- (O)
EditControl ------------ (O)

nexacro studioの CSSエディタでは、2段階のセレクタに子セレクタを追加する機能を制限しています。ただし、エディタの機能を使用せずに直接 CSSコードを変更する場合には、2段階のセレクタに子セレクタを追加する機能を制限していないため、開発者が制約事項を参考する必要があります。

クラスセレクタ(Class Selector)は、1つのクラスのみを指定することができます。

クラスセレクタは、1つのクラスのみを指定することができます。

Button.set_cssclass("TestClass"); ------------- (O)
Button.set_cssclass("TestClass,TestClass2"); -- (X)

複数のクラスセレクタを指定しても、エラーは発生しません。

上記のソースの場合、「"TestClass,TestClass2"」が一つのクラス名として認識されてクラスセレクタが正常に処理されません。

スタイルの適用

スタイルの概要については前で簡単に言及しました。

これからスタイルの作成方法、適用、活用方法について説明します。

スタイルの生成

ADLでテーマを活用しない場合やフォームにスタイルを与えたい時には、新しく生成するか以前に作成したスタイルファイルを登録します。

ステップ1：新しいフォームを作成します。: New Formでフォームを作成し、フォーム名をStyleFormにします。

ステップ2：作成されたフォームに新しいスタイルファイルを生成します。: 作成されたStyleFormにInsert Styleで1つのスタイルを生成し、スタイル名FormStyle.cssで追加します。フォームが開かれているとスタイルを生成することができません。

メインメニュー(File > New > File > Style Sheet)で新しいCSSを作成Formに含めたいならば'Insert to Form"の項目をチェックして、追加するFormの名前を指定する必要があります。

ステップ3：ADLにスタイルファイルを生成します。: Insert ADL ItemによりADLに1つのスタイルを生成し、スタイル名ADLStyle.cssで追加します。

ADLに追加されたスタイルは、プロジェクトをRefreshすることで適用されます。スタイルを追加して、プロジェクトのコンテキストメニューからRefreshを選択してください。

スタイルの編集

テーマ内のスタイル、ADLのスタイル、フォームのスタイルの編集方法は全て同じです。

スタイルの編集は、スタイルエディタにより行うことができます。

スタイルエディタはセレクターリストをツリー形式で提供して追加/削除ができるようにし、ソースコード画面で内容の編集ができるようにしています。

スタイル編集機ではプロパティ画面を提供し、便利に入力と修正ができます。

この時にプロパティ画面に入力された内容はソースコード画面に即時に反映され、確認することができます。

ステップ1：スタイルエディタによりセレクタを登録します。: 生成したADLStyle.cssを、編集画面によりボタンセレクタ(タイプセレクタ、Pseudoセレクタ、クラスセレクタ)に登録します。まず、Type SelectorとPseudo Selector(mouseover, focused)を登録します。

クラスセレクターを登録します。

生成されたソースコードは以下の通りです。

Button
{
...
}

Button:focused
{
...
}

Button:mouseover
{
...
}

.Blue
{
	
}

ステップ2：スタイルエディタにより登録したセレクターの内容を作成します。: 生成したボタンセレクター(タイプセレクター、Pseudoセレクター、クラスセレクター)の情報を作成します。

編集するSelectorを選択して、スクリプトソースを直接編集するか、プロパティ･ウィンドウで、該当する項目を変更することができます。スクリプトソースを以下のように変更します。

Button
{
     background: lightskyblue;
     border: 1px solid red;
     color: yellow;
     font: Arial,9,bold ;
}

Button:focused
{
     background: lightskyblue;
     border: 1px solid yellow;
     color: black;
     font: Arial,9,underline;
}

Button:mouseover
{
     background: lightskyblue;
     border: 1px solid black;
     color: red;
     font: Arial,9;
}

.Blue
{
     background: lime;
     border: 1px solid blue;
     color: blue;
     font:Arial,10,bold;
}

スタイルの適用

フォームにボタンを生成し、ADLにあるスタイルとフォームにあるスタイルによりデザインが反映されるようにします。

ステップ1：新しいフォームを作成します。: New Formでフォームを作成し、、フォーム名をStyleFormにします。(“スタイルの生成”段階で作成したフォームを活用します。)

ステップ2：ボタンを生成しスタイルの適用を確認します。: StyleFormにボタンを生成し、ADLに作成されたスタイルに合わせてスタイルが適用されるのかを確認します。

ステップ3：フォームを実行し、ボタンのPseudoセレクターの適用を確認します。: ADLStyleに設定したPseudoセレクター(mouseover, focused)のフォームに適用されるものをQuickViewにより実行し確認します。

ステップ4：前でフォームに生成したフォームスタイルを編集し、適用を確認します。: フォームスタイルに作成されたPseudoセレクター中のfocused情報をADLStyleと異なった設定にし、異なって適用されるのをQuickViewで実行して確認します。

Button:focused
{
     background: lightskyblue;
     border: 4px solid green;
     color: black;
     font: Arial,9,underline;
}

cssclassの適用

同一フォームで同一コンポーネントに互いに異なるスタイルを適用させるために、登録されたクラスセレクターを使用して異なった表現をすることができます。

ステップ1：ADLStyleに生成したクラスセレクターを編集し適用を確認します。: ADLStyleにクラスセレクター(Blue)を編集します。

.Blue
{
     background: lime;
     border: 1px solid blue;
     color: blue;
     font:Arial,10,bold;
}

ステップ2：フォームのボタンにクラスプロパティを活用してスタイルの適用を確認します。

フォームのクラスプロパティにADLStyleに作成されたクラスセレクターであるBlueを設定し、スタイルの適用を確認します。

テーマの適用

テーマの概要については前で簡単に言及しました。

これからテーマの作成方法、適用、活用方法について説明します。

テーマの生成

テーマの生成方法は、Insert Theme(Insert ADL Item)により事前に作成したテーマを選択して登録することができます。

テーマエディタはイメージとスタイルファイルを追加・削除することができ、スタイルの場合にはスタイルエディタによる管理ができます。

スタイルが変更される場合には、必ずテーマも保存しなければなりません。

ステップ1 : 新しいテーマを作成します。: メニュー(File > New > File > XTheme)でexampleというタイトルで新しいテーマを作成します。新しく作成されたテーマは、デフォルトテーマを基本にコピーされます。

ステップ2：既に作成されたテーマを指定します。: ADLにInsert ADL Itemメニューからテーマを指定して追加します。

テーマの編集

テーマファイルは、イメージとスタイルが互いに分かれているため別途に編集します。

フォルダーの生成、スタイルの生成、イメージとスタイルの追加/削除は、テーマエディタのTheme Treeview下段のボタンを活用します。

1段階：Theme Treeviewの内容を確認しスタイルファイルを編集します。: テーマファイルであるexample.xthemeを開き、Theme Treeviewによりイメージリストとスタイルファイル(theme.css)を確認し、スタイルエディタでスタイルファイルを編集します。

2段階：テーマ編集機によりイメージ、フォルダー、スタイルの生成/追加/削除作業を行います。: Theme Treeview下段のボタンによりテーマの内容を編集します。

メニュー	機能
New Folder	テーマ内に新しいフォルダーを生成
New CSS	テーマ内に新しいスタイルファイルを生成
Insert	イメージまたはスタイルファイルを追加
Delete	Treeviewで選択されたファイルを削除

テーマの適用

基本で提供されるデフォルトテーマのイメージとスタイルが反映される様子と、Set Activeに変更しながらコンポーネントに反映され内容を確認することができます。

作成はコンボコンポーネントを基準とします。

1段階：デフォルトテーマのコンボスタイルを確認します。: スタイルフォームを開き、変更前のコンボを生成してスタイルを確認します。

2段階：Active Themeをexample Themeに変更し、変化を確認します。: 新しく生成したexample テーマをSet Active Themeで有効にし、スタイルフォームのスタイルの変化を確認します。

Deploy Theme

従来の Themeは、Imageと Styleが結合されたため、そのサイズが大きい欠点がありました。Deploy Themeとは、従来の xthemeから Imageを分離させて、Themeのサイズを減らすために作った機能です。Imageは、選択して分離することができ、このように分離された xthemeファイルを“Deploy Theme” 、分離されたImageを"Extern File"といいます。

Extern Fileとして分離する Imageを選択
チェックボックスを使用して、Extern Fileに分離するImageを選択することができます。
- チェックボックスで UnCheck状態にある Imageのみ、extern fileとして分離され、Check状態の Imageは、従来方式のように Themeに含まれます。また、UnCheck状態にある Imageそれぞれを Extern Itemといいます。
- default.xthemeのようにデフォルトで提供されるThemeはチェックボックスが表示されません。つまり、デフォルト組み込みのThemeはImageを分離することができません。
- スペースバーを使用してチェックボックスを選択することもできます。Multi Selectも可能であり、選択した最初のアイテムのステータスに基づいて変更されます。
- マウス右ボタンクリック後、ポップアップメニューを使用してチェックボックスを選択することもできます。Multi Selectも可能です。Set Externメニューが UnCheck状態で、Unset Externメニューが Check状態です。

保存
Deploy Themeの保存は、従来の保存方法と同じように保存ボタンを押すことです。保存時に Deploy Themeと Extern Fileの保存内容及びパスは次のようです。

区分	保存内容	保存パス
Deploy Theme	Extern Fileを除いた Theme	従来の themeパス及びファイル名と同一例) 従来のthemeをC:\a.xthemeというと C:\a.xthemeに保存される。
Extern File	分離された Image	従来の themeパス/images/分離した Image (ファイル名は同一) 例) 従来の themeをC:\a.xtheme、分離するImageがb.pngというと C:\a\images\b.pngに保存される。

区分

保存内容

保存パス

Deploy Theme

Extern Fileを除いた

Theme

従来の themeパス及びファイル名と同一

例) 従来のthemeをC:\a.xthemeというと

C:\a.xthemeに保存される。

Extern File

分離された

Image

従来の themeパス/images/分離した Image

(ファイル名は同一)

例) 従来の themeをC:\a.xtheme、分離するImageがb.pngというと

C:\a\images\b.pngに保存される。

Deploy Themeの表示
Extern Itemがある状態に保存すると、Project Explorerに Deploy Themeが表示され、Extern Itemを削除してから保存すると、Deploy Theme表示も表示されません。