EGL Rich UI の概要

EGL Rich UI は、Web サーバーにデプロイされるアプリケーションを作成するための テクノロジーです。このテクノロジーは、EGL の核となる考え方に基づいて構築されています。 つまり、ビジネスの運営に有用な出力に自動変換される単純なコードを記述する、というものです。 この場合の出力は、クライアント・サイド と呼ばれるクライアント・サイド JavaScript です。これは、JavaScript は、その Web ページを提供するリモート・マシンではなく、 ブラウザー内で実行されるためです。クライアント・サイド JavaScript では、Web ページの即応性が向上され、柔軟性が高まるため、ページを受信して送信する場合を超えてユーザー体験が高まるため、クライアント・サイド JavaScript は重要です。 例えば、ユーザーがラジオ・ボタンをクリックすると、ロジックが応答し、テキスト・ボックスの コンテンツを変更するなどします。JavaScriptはローカルで実行され、通常はページの 1 領域のみを再描画するため、変更は素早く実行されます。

クライアント・サイド JavaScriptを拡張したものの 1 つに Ajax があり、このテクノロジーでは、 リモート・コードを実行時に呼び出し、ユーザーがその間ページの別の部分の作業を続けている場合でも、呼び出し結果により Web ページの一部分を更新することができます。 例えば、ユーザーがリスト・ボックスから注文書を 1 つ選択すると、JavaScriptのロジックによって注文商品詳細の送信がリモート Web サーバーに対して要求され、 ユーザーに表示される表にその詳細が配置されたりします。このようにして、 アプリケーションはサーバー由来のコンテンツにアクセスしながら、送信するコンテンツ を実行時に選択することにより時間を節約できます。

開発者は EGL の構文を使用して Rich UI アプリケーションを記述します。ただし、開発者が、 拡張機能を求める場合は、カスタム JavaScript を記述することや、EGL によって提供されているデフォルトの動作に頼るのではなく JavaScript ライブラリーを使用することができます。例えば、Rich UI を使用して、 以下のソフトウェアにアクセスできます。
Rich UI アプリケーションは、データベースにアクセスしてその他の複雑な処理を実行するサービスのフロントエンドとして動作できます。以下の種類のサービスにアクセスできます (『EGL での SOA サポート』を参照してください)。

Rich UI アプリケーションの出力を、EGL Web プロジェクトまたは EGL 以外の動的 Web プロジェクトにデプロイします。プロジェクトは、Java™ EE に完全に準拠したアプリケーション・サーバー (WebSphere® Application Server など)、または Java EE に部分的に準拠したアプリケーション・サーバー (Apache Tomcat など) に合わせて構成されます。

開発作業の概略

Rich UI 開発者は、以下の作業を行います。
  1. Rich UI プロジェクトを作成します。
  2. 一種の EGL ハンドラー・パーツである EGL Rich UI ハンドラー を作成します。
  3. EGL Rich UI エディターでこのハンドラーを開き、以下のようにこの Rich UI ハンドラーに内容を追加します。
    • ウィジェット と呼ばれるスクリーン内のコントロールを、Web ページ面にドラッグする。 この状態では、Rich UI エディターに組み込まれたダイアログに値を入力することによりウィジェット・プロパティーを設定できます。
    • Rich UI ハンドラーにウィジェットの詳細を直接コーディングする。
    • 以下の種類のロジックを Rich UI ハンドラーに直接記述する。
      • ブラウザーが Web サーバーからそのアプリケーションを最初に受信したときに実行される開始ロジック
      • ボタン・クリックなどのユーザー操作に応答して実行されるイベント・ロジック
    • ライブラリー、サービス、およびその他の Rich UI ハンドラーにアクセスする。
  4. ソース・コードを確認およびテストする。デバッグの詳細については、『Rich UI のデバッグ』を参照してください。また、『Rich UI メモリー管理』に記載されている問題にも注意してください。
  5. コードを生成およびデプロイできる状態の場合は、『EGL 生成およびデプロイメントの概要』および『EGL Rich UI の概要』で説明する手順に従う。
  6. 社内リポジトリーにアプリケーションを保存するときに、開発中に使用した特定の EGL ウィジェット・プロジェクトを維持する。 この方法により、今後はシステム・ウィジェットの変更に応じて変更を行うことなくアプリケーションを更新できるようになります。
ワークスペースに新規 Rich UI プロジェクトを作成するときに、ワークベンチで次のいずれかのウィジェット・プロジェクト・セットまたはその両方をインポートすることを要求できます。
  • com.ibm.egl.rui_version (ネイティブ EGL ウィジェット)
  • com.ibm.egl.rui.dojo.widgets_version (EGL Dojo ウィジェット) と com.ibm.egl.rui.dojo.runtime.local_version (Dojo Toolkit プロジェクト、つまり Dojo ランタイム・コードのローカル・インストール)。

いずれの場合でも、version はウィジェット・プロジェクトの改訂レベルです。

ウィジェットのアップグレード作業の概要

Rich UI プロジェクトを操作しているときに、その Rich UI プロジェクトの作成時に要求しなかったウィジェットにアクセスする場合や、コードをアップグレードして最新版のウィジェットを使用する場合は、以下のようにします。
  1. 『製品提供のプロジェクトのインポート』に記載されている、対象のプロジェクトをインポートします。あるいは、新しい Rich UI プロジェクトを作成してからそのプロジェクトを削除することによって、必要なすべてのプロジェクトを取得できます。
  2. Rich UI プロジェクトごとに、EGL ビルド・パスが新しい EGL (非 Dojo) ウィジェットを参照していること、さらに該当する場合は、新しい Dojo ランタイム・コードを参照していることを確認します。キー・ストロークの詳細については、『EGL ビルド・パスの編集』を参照してください。

    EGL Dojo ウィジェットとの関連では、特定バージョンの EGL Dojo ウィジェットを供用するための Toolkit プロジェクトまたはプロバイダー・プロジェクトにアクセスします。Toolkit プロジェクトまたはプロバイダー・プロジェクトで EGL ビルド・パスを変更しないでください。さらに、独自のプロジェクトで EGL Dojo ウィジェットを直接参照するビルド・パスを変更しないでください。

アップグレード時には、EGL ウィジェットと EGL Dojo プロジェクトの両方を最新バージョンにアップグレードする必要があることに注意してください。

EGL Rich UI エディター

EGL Rich UI エディターを使用して、Rich UI ハンドラーを変更したり、ハンドラーの実行時の動作をプレビューしたりすることができます。 このエディターには、以下のビューが含まれています。
  • 設計ビューは、Rich UI ハンドラーの表示可能コンテンツを表示するグラフィカル設計領域です。 パレットからウィジェットをドラッグ・アンド・ドロップして表示に追加し、プロパティー・ビューでそれらのウィジェットをカスタマイズできます。
  • ソース・ビューには、EGL エディターが表示され、ここで、ロジックの更新やウィジェットの追加または更新を行います。「設計」ビューと「ソース」ビューは統合されます。「設計」ビューに対する変更は「ソース」ビューに反映され、「ソース」ビューに対する変更は「設計」ビューに反映されます。
  • 「プレビュー」ビューは、ワークベンチ内部のブラウザーで、ここでロジックを実行できます。 必要に応じて、簡単に外部ブラウザーに切り替えることができます。

Rich UI エディターが中央に表示されているワークベンチを以下に示します。

EGL Rich UI エディター


フィードバック