スタイル(CSS: Cascading Style Sheets)とテーマは、XPLATFORMの画面を構成する画面要素をデザインする機能です。
スタイルとテーマを適用することができる画面要素には、コンポーネント、画面フォーム、フレーム、ウィジェット、アラート、確認ダイアログ、タイトルバー、ステータスバー、スクロールバーなどがあります。
スタイル / テーマの概要
XPLATFORMでのスタイルとテーマとは、画面上に出力されるUI要素のデザインを定義することを言います。ボタンを例にあげると、透明度、フォント、陰影、ぼかし、斜体などの効果をボタンコンポーネントに与えることを意味します。
スタイルの定義及び適用
スタイルはコンポーネント毎に定義します。それぞれのコンポーネントにはスタイルの適用が可能なプロパティがあり、該当プロパティのスタイル値を設定することによってスタイルを定義します。
スタイルの定義はセレクターを利用します。ここでは、CSSについての事前知識があると仮定して説明します。
XPLATFORMがサポートするセレクターは以下の通りです。
Type Selector："ボタン"のようにコンポーネント名を指定します。
Syntax | Name (Eliment) |
|---|---|
例 | Button { color : green; } |
意味 | 全てのボタンの色を緑色と定義します。 |
Class Selector：コンポーネント別に特定のスタイルを指定します。
Syntax | .(Period) |
|---|---|
例 | Button.BlueButton { color : blue; } |
意味 | 特定のボタンにクラスを指定し、該当するボタンの色を青色と指定します。 |
ID Selector："Button00"のようにコンポーネントのIDを指定します。
Syntax | # |
|---|---|
例 | Button#Button00 { color : yellow; } |
意味 | 全てのボタンの中でButton00というIDを持つボタンの色を黄色と定義します。 |
Universal Selector：全てのコンポーネントを指定します。
Syntax | *(Asterisk) |
|---|---|
例 | *>#contextmenu { background : gray; } |
意味 | 編集可能なコンポーネント(Edit, MaskEdit, TextAreaなど)のポップアップメニューの背景をグレーと定義します。 |
Descendant Selector：特定コンポーネントの下位の属性を指定します。
Syntax | Name SubName |
|---|---|
例 | Combo background { color : red; } |
意味 | 全てのコンボの背景色を赤色と定義します。 |
Child Selector：全てのコンポーネントの下位を指定します。
Syntax | > |
|---|---|
例 | Div>Button { color : blue; } |
意味 | 全てのDiv内のボタンの色を青色と定義します。 |
Attribute Selectorの中の一部：全てのコンポーネントの下位のプロパティ値を比較して指定します。
追加的に該当するプロパティ値の比較は"[property=value]"形式の適応をサポートします。
Ex. Combo[text] { color : black; }
Combo[text="CmbSearch"] { color : red; }
Syntax | [] |
|---|---|
例 | Button[text="Search"] { color : red; } |
意味 | 特定のボタンのテキスト値が"Search"ならば、該当するボタンの色を赤色と定義します。 |
Pseudo-classes中の一部：セレクターを使用して表現できない情報(focused, disabled, mouseover, pushedなど)のセレクション処理を指定します。
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
Grouping：同じ値(declarations)を持ついくつかのセレクターをコンポーネント名で指定します。
Ex. Button, Combo, Calendar { font : Arial,9; }
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など)などで発生しますが、ポップアップメニューの設定がない場合にはポップアップメニューが表示されないことがあります。
従って、テーマは新しく生成するよりもなるべく基本として提供されるテーマを修正して他の名前で保存したり、コピーして使用するようにします。
スタイル/テーマの登録及び適用
UI要素にデザインが適用される順序
説明 | |
|---|---|
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で全部サポートされます。
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 Itemがある状態にセーブすると、Project Explorerに Deploy Themeが表示され、Extern Itemを削除してからセーブすると Deploy Theme表示も表示されません。