ウィジェットは小さい応用プログラムで、使用者の好みに合わせて再配置できるという利点があります。一般の応用プログラムの場合には、そのUI領域の大きな枠の中に全ての画面のフォームを配置するインターフェースを提供します。一方、ウィジェットの場合にはそれぞれの画面のフォームを独立的に実行させ、その配置を使用者が要求する位置に思い通りに配置することができます。

ウィジェットは、主に以下の用途で使用されます。

企業内の業務を外部の指示または変化する情報により、作業者に自動で業務の進行を要請する用途
個人のスケジュールによる業務と該当業務画面間の自然な連動ができる用途
よく使用する画面をウィジェットに登録したり削除するなどの用途
次世代のエンタープライスポータルとしてのウィジェットの用途
証券、相談員、天気、ニュース、生活情報、日程管理、時計など、プッシュ機能を活用した業務画面のポップアップまたはアラームの用途

ウィジェットの概要

ウィジェットは、メインフレームがなくフォームのみで画面UIを実装することができます。

ウィジェットの構成

一般の応用プログラムのUI画面はフレームとフォームの組み合わせにより作成されますが、ウィジェットはフォームとバックグラウンドイメージの組み合わせにより作成されます。

下の図を見ると理解しやすいです。

ウィジェットフォームの制約事項

ウィジェットで使用するフォームはバックグラウンドイメージを必ず持たなければならないため、フォーム自体のstyle.background.color値を“transparent”と設定することによってバックグラウンド・イメージが正常に出力されます。

ウィジェットとLayered機能

Layered機能とは、UI画面の画面がイメージと同じくらいの領域を持つようにする機能です。

以下の図を見ると理解しやすいです。

特にウィジェットの場合には、その画面の形が四角形ではなく多様な形を持つことが多いです。従って、Layered機能を使用する場合が多いです。

Layered機能のためには、バックグラウンドイメージが透明イメージでなければなりません。そうでない場合には、イメージのパターンの四角形の領域もイメージで隠され、Layered機能を正しく使用できなくなります。

ウィジェットの作成方法

XPLATFORMは、ウィジェットを作成する方法を3種類提示しています。

ウィジェットプロジェクトにより作成
ウィジェットのみ使用する場合の開発方法です。
メインフレ－ムはなくウィジェットのみを使用します。従って、一般の応用プログラムの画面はなく、ウィジェットのみで使用者の画面を構成する時に使用します。
一般のプロジェクトによりウィジェットを作成
一般の応用プログラム画面があり、付加的にウィジェットを平行して使用する場合の開発方法です。
メインフレ－ムとウィジェットが共存し、多様なUIを提供する時に使用します。
スクリプトによりウィジェットを作成
動的にウィジェットを作成する時に使用します。

この3種類のウィジェットの作成方法は、次の章で詳細に説明します。

ウィジェットプロジェクトにより作成

一般の応用プログラムの画面がなく、ウィジェットのみで画面を構成する時に使用します。

ウィジェットプロジェクトの生成

UX-Studio上で、プロジェクトを一番最初に生成する時からウィジェットプロジェクトで生成しなければなりません。

ステップ1：ウィジェットプロジェクトの選択

HTML5はウィジェットをサポートしません。

バックグラウンドイメージの登録

ウィジェットプロジェクトを生成してから、ウィジェットが使用するイメージを先に登録します。ウィザードがフォームを生成する際に貼り付けるバックグラウンドイメージについての確認があるため、先にイメージを登録するのがよいです。

ステップ1：バックグラウンドイメージの登録
Project Explorerで、グローバル変数に以下の画面のようにイメージを登録します。 ここで登録したイメージは、ウィジェットの生成時にバックグラウンドイメージとして使用します。

ステップ2：登録したイメージの確認
登録したイメージをProject Explorer画面のグローバル変数で確認します。

このイメージは背景が透明処理されています。

ウィジェットフォームの登録

これからフォームを生成します。ウィジェットフォームを生成すると自動でADLにウィジェットが登録されます。

ステップ1：ウィジェットフォームの生成
以下の画面はフォームを生成する画面で、最初の画面は一般のフォームの生成と同じです。

次の画面も一般のフォームの生成と同じです。

次の画面も一般のフォームの生成と同じです。但し、フォームのサイズをバックグラウンドイメージのサイズに合わせて設定しなければなりません。

次の画面は一般のフォームの生成とは異なります。以下のように設定します。

ステップ2：ウィジェットフォームの設定
以下は、1段階で生成したフォームのエディタ画面です。この画面を見ると、バックグランドイメージが見えません。

バックグランドイメージが見えないのは、フォームのパターンカラーがバックグランドイメージを隠しているからです。

バックグランドイメージが見えるようにするには、フォームのスタイルを透明処理しなければなりません。

以下のようにフォームのプロパティ値を設定します。

ステップ3：ウィジェットフォームの開発
次は、フォームにコンポーネントを使用して簡単にログイン画面を作成します。ここでは、キャンセルボタンをクリックするとウィジェットが終了するイベントファンクションを実装します。

“キャンセル”ボタンのクリック・イベント・ファンクションを以下のようにコーディングします。

function Button01_onclick(obj:Button, e:ClickEventInfo)
{
	exit(); // close()を使用せずexit()を使用しました。
}

ここでのexit()とclose()の違いは、exit()はウィジェット応用プログラム自体を終了し、close()はウィジェットフォームのみを終了します。close()を使用すれば、応用プログラムのプロセスがメモリに残ります。

ウィジェットの実行

UX-Studioのウィジェットの実行は“Quick View”では行えません。必ず“Launch Project”で実行しなければなりません。

この画面は、ウィジェットをウェブブラウザ上で実行させる画面です。透明処理されたイメージの後にウェブブラウザの画面が見えます。

応用プログラムに登録されたウィジェットの確認

開発が完了すると、ADLに自動でウィジェットが登録されます。

以下は、Project Explorer画面からADLに登録されたウィジェット情報です。

[Project > ADL > Widgets > Widget0]に自動登録されています。そして、この画面で設定の変更をすることができます。

ウィジェットの主要プロパティ値を見ると以下の通りです。

Name	Description
visible	ウィジェットを表示するか決定します。デフォルト値はtrueです。
id	ADLに登録されたウィジェットのIDです。主に、スクリプトによりアクセスする時に使用します。
background image	登録したイメージのパス値が設定されています。
formurl	生成したフォームのURL値が設定されています。
layered	Layered機能を使用するか否かです。基本値はtrueです。

一般のプロジェクトでウィジェットを生成

一般のプロジェクトでウィジェットを生成する方法は、“ウィジェットプロジェクトにより作成”の“ウィジェットプロジェクトの生成”を除いた内容と同じです。

即ち、プロジェクト自体は一般の応用プログラムで作成し、その後にウィジェットを登録します。“バックグラウンドイメージの登録”から応用プログラムに登録されたウィジェットの確認”までを実行するとウィジェットを登録することができます。

スクリプトによりウィジェットを生成

ほとんどのウィジェットは、UX-Studioのウィザード機能を利用して生成及び登録しました。実際に“ウィジェットの概要”の全ての例題画面はウィザード画面です。

しかし、必要に応じては動的にウィジェットを生成します。ここでは、スクリプトを利用して動的にウィジェットを生成する方法を説明します。

動的なウィジェットの生成のための準備

動的なウィジェットの生成前に、以下の2種類を準備しなければなりません。

ウィジェット用のバックグラウンドイメージを準備します。
“バックグラウンドイメージの登録”と同じ方法でイメージを登録します。
ウィジェット用のフォームを生成します。
ウィジェットで使用するフォームを生成します。ウィジェット用として生成したのではないため、ADLにウィジェットが登録されていない状態です。

スクリプトによる動的なウィジェットを生成

スクリプトによりウィジェットを生成するというのは、実際には、ウィジェットオブジェクトを生成し、その生成されたオブジェクトにフォームとバックグラウンドイメージを登録する行為をスクリプトにより処理するということです。

1段階：ウィジェットオブジェクトを生成し、イメージをフォームに貼り付けます。

newWidget = new Widget(); // ウィジェットオブジェクトの生成

// 生成したウィジェットオブジェクトに初期値を設定します。
// ウィジェットオブジェクト名は“Widget1”です。
// ウィジェットが出力されるスクリーン上の左座標の値は10です。
// ウィジェットが出力されるスクリーン上の上座標の値は100です。
// ウィジェットが使用するフォームurlは"Base::Sample2.xfdl"です。
// ウィジェットが使用するバックグラウンドイメージは"image::widget.png"です。
newWidget.init("Widget1",10,100,"Base::Sample2.xfdl","image::widget.png");

詳細なメソッドの使用法はXPLATFORM Reference Guideを参照してください。

2段階：ウィジェットオブジェクトをADLに登録します。

1段階で生成したウィジェットオブジェクトをADLに登録します。

application.addWidget("widgetID", newWidget);

UX-Studioのウィザードでウィジェット用のフォームを生成すると、自動登録されます。登録結果は“応用プログラムに登録されたウィジェットの確認”のように確認することができます。しかし、このように動的に登録した場合には、UX-Studio上では確認することができません。

ウィジェットを画面に出力します。

生成したウィジェットを画面に出力します。

newWidget.show();

ウィジェットオブジェクトを削除します。

newWidget.destroy();
newWidget = null;

スクリプトによりウィジェットにアクセス

動的に生成したウィジェットオブジェクトは、スクリプト上で以下のような方法でアクセスすることができます。

application.widgets[index];
application.widgets(index);
application.widgets["id"];
application.widgets("id");

ここでアクセスすることができるウィジェットオブジェクトは、動的に生成したオブジェクトだけでなく、ウィザードにより生成したオブジェクトにもアクセスすることができます。