アプリケーション開発者向けの Web UI フレームワークの Designer Workbench

Designer Workbench では、アプリケーションの新規画面を作成するための WYSIWYG ツールを使用できます。 これには Extensibility Workbench と似たツールがあります。これはアプリケーションの出荷時の状態のインストールの画面を変更するために使用されます。

Designer Workbench は、以下の 2 とおりの方法でアクセスできます。
  • URL を使用する。

    アプリケーション開発者は、この方式で Designer Workbench にアクセスします。

  • Extensibility Workbench 内のリンク。

    カスタム開発者は、この方式で Designer Workbench にアクセスします。

注: Designer Workbench には、アプリケーションのすぐに使用可能なインストール済み環境からアクセスできますが、行える変更には制限があります。 Designer Workbench を使用してすぐに使用可能なインストールを変更する場合は、 IBM® お客様サポートと連携してください。

機能の概要

Designer Workbench のユーザー・インターフェース・レイアウトには、複数のタブを持つエディターとビューがあります。 これらのビューを使用して、以下を処理します。
  • ウィジェット
  • データ・ソース
  • プロジェクト・ファイル
  • 画面レイアウト
  • コンポーネント階層
  • コンポーネント・プロパティー
  • コード・テンプレート

技術概要

Designer Workbench の UI は、Ext JS JavaScript フレームワークを使用して作成されます。 画面の UI エレメントは、JSON メタデータ・フォーマット内のファイルに保管されています。 このメタデータは、Ext JS で編集できる拡張構成オブジェクトを生成するために使用されます。 Ext JS は、UI コンポーネントを作成または変更するためにのみ構成オブジェクトの編集をサポートします。

パレットのコンポーネントは、コンポーネント・レジストリーにあります。 コンポーネント・クラスは、sci.ide.DefComponent クラスを拡張します。 新規コンポーネントを Designer Workbench のコンポーネント・レジストリーに追加するには、sci.ide.DefComponent クラスの以下の属性を使用します。
属性 説明
ID Designer Workbench で使用可能なすべてのコンポーネントを区別するために使用される、コンポーネントの固有 ID。
タイプ コンポーネントの登録済みタイプ。 これは通常はコンポーネントの xtype です。
テキスト コンポーネントの表示テキスト。
頭字語 コンポーネントの頭字語。 これは変数インスタンスの自動命名に使用されます。
iconCls コンポーネント・アイコンとして使用される css アイコン・クラス。
カテゴリー コンポーネントがグループ化されるカテゴリー。 コンポーネントを Design Workbench に追加するには、「コントロール (Controls)」「パネル (Panels)」、または「その他」の下にグループ化する必要があります。 新規カテゴリーを作成する必要がある場合、そのカテゴリーを登録する必要があります。
名前付き コンポーネントが sci.ide.DefComponent を拡張する場合に、デフォルトで true となる boolean プロパティー。 指定されたコンポーネントが画面に追加されると、自動生成 sciId プロパティーがそれに追加されます。
applyDefaults この方式は、その引数として作成されるコンポーネントのモデル (コンポーネントと関連付けられているプロパティーを含むオブジェクト) を受け入れ、コンポーネントのデフォルトのプロパティーをモデルに適用します。
getProperties このメソッドは、コンポーネントのすべてのプロパティー定義のコレクション (Ext.util.MixedCollection) を返します。 プロパティーの ID は、プロパティー定義にマップされるキーです。
プロパティーは、グローバル・アクセスのために、プロパティー・レジストリーに追加できます。 プロパティー定義は、以下の属性を持つ JavaScript オブジェクトです。
  • ID

    プロパティーの固有 ID。 プロパティーが Ext docs 内にある場合、それはコンポーネント・コンストラクターの config オプションと同じであることがあります。

  • タイプ

    プロパティー定義のデータ・タイプ。

  • isArray

    現行のプロパティーが配列であるかどうかを示すブール値。

  • getDefaultValue

    プロパティーのデフォルト値を返すメソッド。

  • getDefObject

    呼び出し元にプロパティー定義を提供するメソッド。

  • getValues

    プロパティーのすべての指定可能な値の配列を返すメソッド。

resolveLink このメソッドは、追加されるコンポーネントがコンテナーである場合に実装する必要があります。つまり、これは他のすべての Designer Workbench コンポーネント/コンテナーを受け入れることができます。 これは、追加されるコンポーネントを子として受け入れることができるかどうかを判別するために使用されます。
妥当性検査 このメソッドは、コンポーネントのモデルを引数として受け入れ、コンポーネントがエラー状態であるかどうかを検証します。 モデルがエラー状態であると検出された場合 (プロパティーと値のセットが不整合)、エラーや警告が示されたり、方法があれば修正が提案されたりすることがあります。