スタイル(CSS)とテーマの管理

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

スタイルとテーマを適用することができる画面要素には、コンポーネント、画面フォーム、フレーム、ウィジェット、アラート、確認ダイアログ、タイトルバー、ステータスバー、スクロールバーなどがあります。

スタイル / テーマの概要

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

スタイルの定義及び適用

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

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

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

Syntax

Name (Eliment)

Button { color : green; }

意味

全てのボタンの色を緑色と定義します。

Syntax

.(Period)

Button.BlueButton { color : blue; }

意味

特定のボタンにクラスを指定し、該当するボタンの色を青色と指定します。

Syntax

#

Button#Button00 { color : yellow; }

意味

全てのボタンの中でButton00というIDを持つボタンの色を黄色と定義します。

Syntax

*(Asterisk)

*>#contextmenu { background : gray; }

意味

編集可能なコンポーネント(Edit, MaskEdit, TextAreaなど)のポップアップメニューの背景をグレーと定義します。

Syntax

Name SubName

Combo background { color : red; }

意味

全てのコンボの背景色を赤色と定義します。

Syntax

>

Div>Button { color : blue; }

意味

全てのDiv内のボタンの色を青色と定義します。

Syntax

[]

Button[text="Search"] { color : red; }

意味

特定のボタンのテキスト値が"Search"ならば、該当するボタンの色を赤色と定義します。

Syntax

:

Button:focused { color : black; }

意味

全てのボタンがfocusとなれば、該当するボタンの色を黒色と定義します。

UI element states pseudo-classes:

enabled(default), disabled, focused, mouseover, pushed, selected

Structural pseudo-classes:

root, nth-child(), nth-last-child(), first-child, last-child, only-child, empty

Syntax

,(Comma)

Button, Combo, Calendar { font : Arial,9; }

意味

全てのボタンの、ボタン、コンボ、カレンダーのフォントを"Arial 9"で定義します。

テーマの定義

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

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

XPLATFORMは、default、black、gray、blueの4種類のテーマファイルを提供します。該当するテーマは、UX-Studioのテーマとスタイルエディタ画面により必要な部分を修正することができます。ThemeはXPLATFORMで必ず必要な基本情報を持っているため、使用者は必要な部分のみを選定して追加・修正作業をしなければなりません。

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

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

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


説明

1

ADLに属するテーマ内のスタイル

2

ADLに属するスタイル

3

FDLに属するスタイル

4

FDL内のコンポーネントのスタイル

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

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

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

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

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

種類

適用対象

コンポーネント

(Visibleオブジェクト)

Button, Calendar, CheckBox, Combo, Div, Edit, GraphicPath, Grid

GroupBox, ImageViewer, ListBox, MaskEdit, Menu, Progressbar

Radio, Shape, Spin, Splitter, Static, Tab, TextArea

画面フレーム

Form, WidgetForm, ChildFrame, FrameSet, HFrameSet

TabFrame, TileFrameSet, VFrameSet

その他

Alert, ApplicationMenu, Confirm , ScrollBar, StatusBarForm

TitleBarForm, ToolTip

スタイルの適用

スタイルの概要については前で簡単に言及しました。これからスタイルの作成方法、適用、活用方法について説明します。

スタイルの生成

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

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

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

メインメニューにより生成する方法です。

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

スタイルの編集

テーマ内のスタイル、ADLのスタイル、フォームのスタイルの編集方法は全て同じです。スタイルの編集は、スタイルエディタにより行うことができます。

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

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

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

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

先ず、タイプセレクターを登録します。

Pseudoセレクターを登録します。(mouseover, focused)

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

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

Button
{
	background	: @gradation;
	border		: 1px solid red;
	color		: yellow;
	font		: Arial,9,bold ;
	gradation	: linear 50%,0% #900000 50%,100% #006000;
}
…
Button.BlueButton
{
	background	: @gradation;
	border		: 1px solid blue;
	color		: blue;
	font		: Arial,10,bold;
	gradation	: linear 50%,0% #000040 50%,100% #ffff90;
}

スタイルの適用

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

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

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

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

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

スタイルクラスの適用

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

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

Button.BlueButton
{
	background	: @gradation;
	border		: 1px solid blue;
	color		: blue;
	font		: Arial,10,bold;
	gradation	: linear 50%,0% #000040 50%,100% #ffff90;
}
ステップ2:フォームのボタンにクラスプロパティを活用してスタイルの適用を確認します。
フォームのクラスプロパティにADLStyleに作成されたクラスセレクターであるBlueButtonを設定し、スタイルの適用を確認します。

テーマの適用

テーマの概要については前で簡単に言及しました。これからテーマの作成方法、適用、活用方法について説明します。

テーマの生成

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

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

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

1段階:新しいテーマを作成します。 
ADLにアイテムを追加しテーマを追加生成します。(お勧めしません。)

2段階:基本でテーマを編集し新しい名前で保存します。
black.xthemeファイルを開きテーマエディタによりexample.xthemeに保存します。

テーマの編集

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

フォルダーの生成、スタイルの生成、イメージとスタイルの追加/削除は、テーマエディタの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されているdefault.xthemeをテーマエディタにより修正します。
theme.cssを開きコンボコンポーネントの情報を修正します。

3段階:デフォルトテーマのスタイル情報の修正をフォームで確認します。
スタイルフォームのコンボコンポーネントのスタイルの変化を確認します。

4段階: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"といいます。 また、この機能は、XPLATFORM Runtime、HTML5、Hybridで全部サポートされます。

区分

セーブ内容

セーブパス

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にセーブされる。