Rich UI ウィジェット

Rich UI ハンドラー・パーツには、ウィジェット が含まれています。それぞれは、カスタマイズされたスクリーン内のコントロールですが、ウィジェット という用語は、コントロールを作成する変数宣言も指しています。ウィジェットは、ビジネス・データを含むことができ、イベントに応答できます。

ウィジェット・タイプ

製品にはウィジェット・タイプ のコア・セットが用意されていて、ウィジェットの宣言に使用できます。以下の表には主なタイプがリストされていますが、使用可能な Dojo ウィジェットは別のトピックでリストされているため、ここに含まれていません。

表 1. ウィジェット・タイプ
カテゴリー タイプ 用途
コンテナー Box ボックスを定義します。ほとんどの場合、これに他のウィジェットが組み込まれています。以前のバージョンの Rich UI では、ボックスが主な種類のコンテナーでした。ただし、GridLayout のトピックで説明されているように、タイプ GridLayout のコンテナーの方が柔軟です。

ボックス内の列数を指定できます。例えば、列数が 3 の場合、最初の 3 つの組み込みウィジェットはボックスの先頭行にあり、4 番目から 6 番目は 2 番目の行にあります (以下同様)。列数が 1 の場合、組み込みウィジェットはすべて垂直に配置されます。いずれの場合も、列の幅は列内の最大のウィジェットの幅に等しく、所定の列内の組み込みウィジェットを列の中心、右、または左のいずれに位置合わせするかどうかを指定できます。

空のセルを表示するには、ボックスの子として、テキストを含まないテキスト・ラベルを組み込んでください。

必要であれば、垂直および水平スクロール・バーが表示され、これによりユーザーは、表示範囲外のウィジェットにアクセスできます。

Div Web ページの分割 (HTML DIV タグ) を定義します (前のコンテンツの下)。分割ウィジェットは、FloatLeft および FloatRight ウィジェットの親である場合があり、これによって Web ページ設計の柔軟性が得られます。
FloatLeft Web ページの分割 (HTML DIV タグ) を定義します。ほとんどの場合、分割、FloatLeft、または FloatRight ウィジェットの子として定義します。このウィジェットは CSS エレメント float:left を使用します。
FloatRight Web ページの分割 (HTML DIV タグ) を定義します。例えば、分割、FloatLeft、または FloatRight ウィジェットの子として定義します。このウィジェットは CSS エレメント float:right を使用します。
GridLayout 子ウィジェットが埋め込まれる可変スペースの行と列を持つコンテナーを定義します。各子ウィジェットには layoutData プロパティーがあり、そのプロパティーに値を割り当てることによりウィジェットの位置を指定します。
Grouping 境界線のあるボックスにウィジェット・コレクションを表示します。境界線の上部に埋め込まれるテキストを割り当ててください。
情報 DataGrid 値の配列を表形式で定義します。このウィジェットでは、次の詳細情報を指定できます。
  • 幅、高さ、および色などの列の特性。
  • レコードの配列。レコードのフィールド値は、レコードにつき 1 行で、対応するグリッド列に表示されます。
  • 動作。それぞれ関数参照の配列を受け入れるフィールドです。参照された関数を使用すると、ユーザーのセルのクリックに応答して、ヘッダー行、本体行、またはセルの特性を更新できます。
Grid 値の配列を表形式で定義します。新規開発の場合は、パフォーマンスと機能にすぐれている DataGrid ウィジェット・タイプを使用します。
HTML HTML フラグメントを表示します。これは、サービスによって提供される場合があります。HTML は境界域にレンダリングされます (必要であれば、スクロール・バーが表示されます)。
Image グラフィックまたは代替テキストを表示します。
Shadow 指定された DIV ウィジェットの子であるウィジェットに対してシャドー効果をもたらします。
Span ユーザーが変更できない文字列を表示します。文字列には、HTML セグメント (<b>this boldfaced code</b> など) を組み込むことができます。
TextLabel ユーザーが変更できない文字列を表示します。このウィジェットは、span とは異なります。これは、HTML セグメント (<b>this code</b> など) の組み込みが、不等号括弧を含め、現状のまま表示されるためです。
Tree 表示可能ノードのツリーを定義します。
インタラクティブ BidiTextArea 双方向テキストの 1 つ以上の行を含む長方形を定義します。
BidiTextField 双方向テキストの単一行を含むテキスト・ボックスを定義します。
Button ボタンを定義します。これにより、ユーザーがクリックしやすくなり、関数を起動することによってそのクリックに応答します。
Checkbox チェック・ボックスを定義します。true/false オプションが表示され、関数を起動することによってユーザー入力に応答します。
Combo コンボ・ボックスを定義します。いくつかの選択可能オプションのうちの 1 つを表し、これによりユーザーは、一時的にドロップダウン・リストを開いて異なるオプションを選択できます。
Hyperlink Web ページ・リンクを定義します (クリックすると、ブラウザーにそのページが表示されます)。ページ表示は、レイアウトに制約されません。
List リストを定義します。これによりユーザーは、単一項目を選択できます。
Listmulti リストを定義します。これによりユーザーは、複数の項目を選択できます。
Menu メニュー・バー項目を定義します。
PasswordTextField 入力テキスト・フィールドを定義します。パスワードの受け入れに適するよう、値は中黒で表示されます。
RadioGroup ラジオ・ボタンのセットを定義します。それぞれは、クリックされると同じグループ内の他のラジオ・ボタンの選択を解除し、(標準的なケースでは) 関数を起動することによって、クリックに応答します。
TextArea 1 つ以上のテキスト行を含む長方形を定義します。
TextField 単一行のテキストを含むテキスト・ボックスを定義します。
吹き出し GridTooltip 特殊な吹き出しヘルプを定義します。つまり、ユーザーがグリッド・ウィジェット上にカーソルを移動すると表示される 1 つ以上のウィジェットです。
Tooltip 吹き出しヘルプ (ユーザーがウィジェット上にカーソルを移動すると表示される 1 つ以上のウィジェット) を定義します。
TreeTooltip 特殊な吹き出しヘルプ (ユーザーがツリー・ウィジェット上にカーソルを移動すると表示される 1 つ以上のウィジェット) を定義します。

吹き出しタイプ (ToolTip、GridToolTip、および TreeToolTip) はこのウィジェットのリストにありますが、各ツールチップ・タイプは、技術的には Rich UI ハンドラーです (EGL ハンドラー・パーツ、ステレオタイプ RUIHandler)。この場合、ハンドラー・コードで、Rich UI ウィジェットの機能に類似した機能を指定します。ただし、すべてのウィジェットに使用できる関数およびフィールドは、ツールチップには使用できません。一般的に使用可能なフィールドおよび関数の詳細については、『ウィジェットのプロパティーおよび関数の設定』を参照してください。

ウィジェット宣言とパッケージ名

ウィジェットを宣言する場合、EGL には、ウィジェットが存在するパッケージを識別するための 2 つの方法が用意されています。この 2 つの方法は、任意の EGL 変数の宣言に使用できますが、ウィジェットに関して特殊な自動化を使用できます。

まず、ウィジェット・タイプの名前の前にパッケージの名前を指定できます。以下に、このフォーマットを示します。
widgetName com.ibm.egl.rui.widgets.widgetTypeName;
widgetName
ウィジェットの名前
widgetTypeName
ウィジェット・タイプの名前

EGL Rich UI エディターは、ユーザーがパレットから設計面にウィジェットをドラッグした後、ウィジェット宣言ステートメントの先行フォーマットを使用します。概要については、『EGL Rich UI エディターの概要』を参照してください。

パッケージを識別する 2 番目の方法は、ソース・コード内の前の方に import ステートメントを組み込む方法です。次にフォーマットを示します。ここでは、widgetTypeName の代わりに、複数のタイプを指すワイルドカード (*) かまたは特定のタイプの名前が必要です。
import com.ibm.egl.rui.widgets.widgetTypeName;

widgetTypeName の代わりにワイルドカードを使用すると、生成される JavaScript 出力に不要なコードが追加されるため、お奨めしません。

ソース・コードを作成する場合、ウィジェットの宣言の後に import ステートメントを自動的に挿入できます。
  1. CtrlShift を押したまま、O を押します。
  2. ダイアログが表示されたら、同じ名前のウィジェット・タイプの中から選択します。例えば、「ボタン」を「Dojo」、「Silverlight」、または「EGL Rich UI」から選択できます。

NULL ポインター例外の回避

ウィジェットは、EGL 参照変数です。ウィジェットを静的に宣言する (new 演算子を使用しない) ときは、次の例に示すように、必ず値の設定ブロック ({}) を指定してください。

myButton Button{};

追加ウィジェットの作成

ユーザー独自のウィジェットを、次の 2 つのうちのいずれかの方法で作成できます。
  • Rich UI ウィジェットをコーディングできます。つまり、Rich UI ハンドラー、ステレオタイプ RUIWidget です。
  • JavaScript をベースにして EGL 外部型を作成できます。EGL 外部型を使用する機能は、既存の JavaScript ライブラリーのアクセスに役立ちます。

ウィジェットの作成の詳細については、『Rich UI ウィジェット・セットの拡張』を参照してください。

ウィジェット・タイプの使用

EGL ウィジェット・タイプは、開発時点に不明であった特定のタイプのウィジェットを受け入れる関数を定義する場合に使用します。以下の (非現実的な) 例で、このような機能が EGL オペレーター isa および as を使用して、タイプ固有のプロパティーおよび関数 (例えば、TextField タイプの text プロパティー) を使用可能にする方法を示します。
import com.ibm.egl.rui.widgets.TextField;

handler MyHandlerPart type RUIhandler{onConstructionFunction = initialization}

   myHelloField TextField{readOnly = true, text = "Hello"};

   function initialization()
      	myInternalFunction(myHelloField);
   end

   function myInternalFunction(theWidget widget in)
     
      case 
         when (theWidget isa TextField)
            myTextField TextField = theWidget as TextField;
            myString STRING = myTextField.text + " World";
            sysLib.writeStdOut(myString);
         when (theWidget isa Button)
            ;
       	 otherwise
       	    ;
      end
   end
end

ハンドラーは、「Hello world」と表示します。

Widget 型の変数は、プロパティーでウィジェットが参照される部分より前に宣言してください。具体的には、initialUI プロパティーまたは children プロパティーでそのウィジェットが参照される前です。 (この規則は、Button や TextField など、具体的なウィジェット・タイプの変数には適用されません。)

Widget タイプの変数は、Rich UI ウィジェットおよび外部型ウィジェットの両方と互換性があります。


フィードバック