デザインは、二つの方法で適用可能です。コンポーネントに直接Style属性を変更する方法と、Styleファイルを利用して適用する方法とがあります。Styleファイルを利用する方法は、コンポーネントを直接修正する必要がなく、その後の変更が簡単であるという長所があります。Styleファイルを利用してデザインを適用する方法を学びます。

イメージファイルの追加

画面をデザインするためには、多くのイメージファイルが必要です。プロジェクトにイメージファイルを使うためには、プロジェクトディレクトリ内にイメージを置いたあと、サービスグループの登録が必要です。サービスグループの登録が必要な理由は、XPLATFORM HTML5プロジェクトでは、サービスグループが登録されたディレクトリ内のファイルのみがHTML5サーバーに送信されて、使用が可能になるからです。

イメージファイルを配置する

イメージファイルをプロジェクト内の適当なディレクトリに置きます。プロジェクトディレクトリ下に“images”ディレクトリを作って、イメージをコピーします。

サービスグループの登録

プロジェクトの“TypeDefinition”をダブルクリックして、“Edit TypeDefinition” ウィンドウを開きます。

“Edit TypeDefinition”ウィンドウの“Add” ボタンをクリックして、“Add Service Group” ウィンドウを開いた後に、値を入力します。

“Add Service Group”ウィンドウで使ったオプションは、次の通りです。

グローバルイメージの登録

プロジェクトのGlobalVariablesをマウスを右クリックして、“Insert GlobalVariables Item” “Image”を選択します。

プロジェクト内のグローバルイメージ登録が必要なイメージを選択します。

イメージ選択が終われば、GlobalVariablesに選択したイメージが、ファイル名の拡張子を除いた同じ名前で追加されます。プロジェクト内では、該当名で参照可能です。

Styleファイルの作成

Styleファイルの追加

プロジェクトのADLをマウスを右クリックして、“Insert ADL Item” “Style”を選択します。ADLにStyleファイルを追加する場合には、プロジェクト全体に影響が及びます。

適当なStyleファイル名を入力します。

Styleファイル作成

コンポーネントのStyle指定は、３種の方法で可能です。

1. コンポーネント型毎に指定 : コンポーネント型が同じコンポーネントに全て適用

2. class毎に指定 : 同型コンポーネントTypeと同じ classが指定されたコンポーネントに適用

3. id毎に指定 : 同型コンポーネントと同じidが指定されたコンポーネント適用

また、コンポーネントの状態を意味するPseudoは、以下の5種をサポートします。
それぞれの状態によってStyleを指定することができます。

次は、例題Styleです。各コンポーネントで設定することができるStyleプロパティに対しては、“ヘルプ(Help)”を参照してください。

Static
{
	font: Malgun Gothic,9,antialias;
}

Button
{
	font: Malgun Gothic,9,antialias;
}

Edit
{
	font: Malgun Gothic,9,antialias;
	border: 1px solid #cecbce;
}

TextArea
{
	font: Malgun Gothic,9,antialias;
}

Combo
{
	font: Malgun Gothic,9,antialias;
	itembackground: #ffffff;
}

Combo:mouseover
{
	border: 1px solid #00deff;
	itemcolor: #ffffff;
	itembackground: #1d77c3;
}

Combo>#dropbutton
{
	background: transparent URL('ComboBtn') center middle no-repeat ;
	border: 0px none #808080;
	focusborder: 0px none #ffffff;
}

Grid
{
	font: Malgun Gothic,9,antialias;
	border: 1px solid #c0c9f1;
}

Grid>#head
{
	cellcolor: #5b6392;
	cellbackground: #e9edff;
	cellfont: Malgun Gothic,9,antialias;
	cellline: 1px solid #c0c9f1;
}

Grid>#body
{
	cellcolor: #666666;
	cellcolor2: #666666;
	cellbackground: #ffffff;
	cellbackground2: #f9f9f9;
	cellfont: Malgun Gothic,9,antialias;
	cellfont2: Malgun Gothic,9,antialias;
	cellline: 1px solid #c0c9f1;
	selectcolor: #5259a3;
	selectbackground: #f2efe0;
	selectfont: Malgun Gothic,9,bold antialias;
}

Menu
{
	color: #ffffff;
	background : URL('MenuBg') repeat;
	font: Malgun Gothic,9,bold antialias;
	border: 1px solid #1d77c2;
	itemfont: Malgun Gothic,9,bold antialias;
	popupcolor : #3c0db2;
	popupbackground : #ffffff;
	popupborder: 1px solid #1d77c2;
	popupfont: Malgun Gothic,9,bold antialias;
}

Static.title
{
	color: #001863;
	font: Malgun Gothic,13,bold;
}

Button.command
{
	background : URL('CommandBtn_Nor');
	border: 0px none #808080;
	padding: 0px 0px 0px 0px;
}

Button.command:mouseover
{
	background : URL('CommandBtn_Ove');
	border: 0px none #808080;
}

Button.command:pushed
{
	background : URL('CommandBtn_Pus');
	border: 0px none #808080;
}

Div.command
{
	border: 2px solid #cabef0;
}

Static.detail
{
	color: #5b6392;
	background: #eaedff;
	font: Malgun Gothic,9,bold;
	border: 1px solid #c0c9f1;
}

Div.detail
{
	border: 1px solid #c0c9f1;
}

Static.menu
{
	color: #ffffff;
	background: #958ed8;
	font: Malgun Gothic,10,bold;
	cursor: pointer;
}

Static.menu:mouseover
{
	background: #4c44a1;
}

Div.menu
{
	border: 4px solid #958ed8;
}

Div.main
{
	border: 1px solid #cabef0;
}

コンポーネントのclass指定

コンポーネントのclass指定

コンポーネントのclass毎にStyleを作成した場合には、該当コンポーネントがデザインに適用出来るように、classプロパティ値を指定しなければなりません。

コンポーネントのclass属性を指定するコンポーネントは、次の通りです。

コンパイル及び実行

HTML5メニューの中で、Compile File及びQuickViewメニューを使用した実行画面です。