XPLATFORMは、生成されたテーマやCSSを適用して同一のプロジェクトでも全く違うスタイルのUIに簡単に変更することができます。
テーマとCSS
ThemeとCSSは、XPLATFORMのスタイルを変更することができるという点では同じですが、テーマにはCSSファイルとCSSで使用されるImageファイルも含まれているという違いがあります。
CSSファイルの生成
Standard Toolbarアイコンをクリックするか、メニュー[File – New – File – Style Sheet]を選択してCSSファイルを生成することができます。
属性 | 説明 | |
|---|---|---|
1 | File name | 生成されるStyle Sheetのファイル名 |
2 | Location | 生成されるStyle Sheetの位置 |
3 | Insert to ADL | ADL追加の可否及び追加されるADLを選択 |
4 | Insert to Form | フォーム追加の可否及び追加されるフォームを選択 |
CSSファイルエディター
CSSを編集できるCSS Editorは、Selector、Preview Source Code、Propertiesで構成されます。
‘Selector’は現在のCSS文書の全てのSelectorをTree構造で表示し、各Selectorの追加/削除の機能をサポートします。
メニュー | アイ コン | 機能 | |
|---|---|---|---|
1 | Go to Source | 選択されたSelectorのSource Codeの位置に移動Selectorをダブルクリックして同一の機能の実行が可能 | |
2 | New Selector | 新規Selector入力 | |
3 | Add Selector | 選択されたSelectorにChild Selectorを追加 追加できるSelectorの種類をポップアップメニューで表示 | |
4 | Delete | 選択されたSelectorを削除 | |
5 | Rename | 選択されたSelectorの名前の変更 | |
6 | Compress All | 使用しないプロパティを全部削除します。 | |
7 | Uncompress | 選択されたSelectorが提供するプロパティをCSSに表示します。 | |
8 | Expand | 選択されたSelectorの下位Tree Itemを開く | |
9 | Collapse | 選択されたSelectorの下位Tree Itemを隠す |
下記の図はNew Selectorの入力ウィンドウです。
New Selector入力ウィンドウは、Selector List、Selector Syntax部分、Pseudo Listで構成され、Selector Syntaxは、入力値によって下記のように動作します。
Syntax | 説明 | |
|---|---|---|
1 | Class Selector | DivタグのClassのプロパティ値が入力値と同じ場合、 スタイルが適用 |
2 | ID Selector | 入力した値と同一のIDを持つコンポーネントにだけ スタイルが適用 |
3 | Attribute Selector | 入力されたプロパティ名と比較記号、プロパティ値を判断して該当するコンポーネントにだけスタイルが適用 Ex1) Text ‘Text’の属性を持っている場合にだけStyle適用 Ex2) Text = Warning ‘Text’の属性値がWarningである場合にだけ Style適用 Ex3) Text ~= Warning ‘Text’の属性値が空白で分離されたリストで、 そのうちの一つがWarningである場合にだけ Style適用 Ex4) Text |= Wa ‘Text’の属性値がハイフンで分離されたリスト で、 そのうちの一つが左側にWaで始まる場合に だけStyle適用 |
‘Preview’は、Styleが適用された結果を予め確認することができ、マウスの操作によってPushed、Mouse Over、Focused、Disabledなどの状態を確認することができます。
‘SourceCode’ウィンドウでは現在、編集中のCSSファイルを表示し、開発者がStyleを直接、修正して適用させることができます。
基本的にCSS構文はセレクタと宣言文で構成されます。セレクタ(Selector)は、宣言されたプロパティをどこに適用させるかを指定し、宣言文(Declaration)ではプロパティを定義します。プロパティはプロパティ名とプロパティ値に区分され、プロパティ名はどんな種類のStyleを適用させるかを指定し、プロパティ値で詳細なスタイルを定義します。
Propertiesウィンドウでは、Styleを入力、修正することのできるプロパティ値を表示し、Propertiesウィンドウで入力された内容は、SourceCodeに自動的に更新されてPreviewですぐ確認することができます。
テーマの生成
[図]のStandard Toolbarアイコンをクリックするか、メニュー[File – New – File – XTheme]を選択してCSSファイルを生成することができます。
ファイル名と生成位置を入力してテーマファイルを生成することができます。
属性 | 説明 | |
|---|---|---|
1 | File name | 生成されるテーマファイル名 |
2 | Location | 生成されるテーマファイル位置 |
テーマエディター
新たなテーマを生成したり、既存のテーマを修正することのできるテーマエディタは、下記のように構成されます。
属性 | 説明 | |
|---|---|---|
1 | Folder Tree | テーマに含まれるImageファイル及びCSSファイルリスト |
2 | Image Preview | ImageファイルPreview |
3 | New Folder | 選択された位置に新たなFolderを追加 |
4 | New CSS | 新たなCSSを生成 |
5 | Insert | 選択された位置に新たなファイルをリストに追加 |
6 | Delete | 選択されたファイルをリストから削除 |
Style Property Editor
Styleを直観的に入力、修正することができるStyle Property Editorを使用して(Formに使用された個別コンポーネントの)CSS Styleを編集できます。Style Property Editorで修正された内容は、Properties Windowにもすぐ適用されて確認できます。
※ CSSファイルを修正する場合には、Style Property Editorがサポートされません。ソースコードを直接修正したり、Propertiesウィンドウで修正する必要があります。
Text
コンポーネントのテキスト関連プロパティを修正することができます。
属性 | 説明 | |
|---|---|---|
1 | Font | コンポーネントのText fontを修正 (Propertiesウィンドウのfontの属性) |
2 | Color | コンポーネントのText Color Styleを修正 (Propertiesウィンドウのcolorの属性) |
3 | Alignment | コンポーネントのText Align Styleを修正 (Propertiesウィンドウのalignの属性) |
Border
コンポーネントのBorder関連のプロパティを修正することができます。
属性 | 説明 | |
|---|---|---|
1 | Border | コンポーネントのBorder Styleを修正 (Propertiesウィンドウのborderの属性) |
2 | Border Type | コンポーネントのBorder Typeを修正 (Propertiesウィンドウのbordertype の属性) |
3 | Focus Border | コンポーネントのFocus Border Styleを修正 (Propertiesウィンドウのfocusborderの属性) |
Background
コンポーネントのBackground関連のプロパティを修正することができます。
属性 | 説明 | |
|---|---|---|
1 | Color | コンポーネントのBackground Colorを修正 (Propertiesウィンドウのbackgroundの属性) |
2 | Image | コンポーネントのBackground Imageを修正 (Propertiesウィンドウのbackgroundの属性) |
3 | Gradation | コンポーネントのBackground Gradationを修正 (Propertiesウィンドウのgradationの属性) |
Gradationのスタイルは、定義されたstart、endのposition値を使ってGradationを生成するTemplateで、コンポーネントのbackgroundの属性を‘@gradation’に変更します。StyleでGradationを解除する場合は、backgroundの前の値を復旧します。
Appearance
コンポーネントのAppearance関連プロパティを修正することができます。
属性 | 説明 | |
|---|---|---|
1 | Opacity | コンポーネントのOpacity Styleを修正 (Propertiesウィンドウのopacityの属性) |
Effect
コンポーネントのEffect関連プロパティを修正することができます。
属性 | 説明 | |
|---|---|---|
1 | Blur | コンポーネントのBlur Styleを修正 (Propertiesウィンドウのblurの属性) |
2 | Outerglow | コンポーネントのGlow Styleを修正 (Propertiesウィンドウのglowの属性) |
3 | Shadow | コンポーネントのShadow Styleを修正 (Propertiesウィンドウのshadowの属性) |
Transformation
属性 | 説明 | |
|---|---|---|
1 | Origin | コンポーネント基準座標 (PropertiesウィンドウのTransformation[Origin]の属性) |
2 | Transformation | Rotate: コンポーネントを時計回りに回す (PropertiesウィンドウのTransformation[Rotate]の属性) Flip: コンポーネントを上下、左右に対称になるように変更 (PropertiesウィンドウのTransformation[Flip]の属性) Skew: コンポーネントを斜めに傾ける (PropertiesウィンドウのTransformation[Skew]の属性) Scale: コンポーネントを元のサイズに比例して変更 (PropertiesウィンドウのTransformation[Scale]の属性) Translate: コンポーネントを移動 (PropertiesウィンドウのTransformation[Translate]の属性) |