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

機能の概要

Extensibility Workbench のユーザー・インターフェース・レイアウトは、複数のタブのあるエディターおよびビューを備えた Designer Workbench と類似します。 Designer Workbench では、コンポーネントはキャンバス上で編集されます。 Extensibility Workbench では、画面は既存の画面上の出荷時の状態のコンポーネントを編集することができるキャンバスとして動作します。 拡張を適用するか、適用せずに、画面を表示することができます。

モデル・バリデーターおよび画面ローカライズのツールは、拡張の開発を支援するために使用することができます。

技術概要

Extensibility Workbench は、Ext JS JavaScript フレームワークを使用して構築されます。 画面の差分拡張機能は JSON メタデータ・フォーマットでファイルに格納されます。 このフォーマットは基本画面に適用される拡張のプロパティー・オーバーレイを格納します。 テンプレートが適用される拡張コード・ブロックを生成するためにも使用されます。

差分拡張性のためのメタデータの例を以下に示します。 オーバーレイ項目は Extensibility Workbench を使用して変更された内容を示します。

{
   type: "SCREEN_EXTENSION",
   version: "",
   extension: {
       className: "com.zzz.AnExtension",
       superclassName: "sc.plat.ui.Extension",'
       overlays: [
            {
               op: 'change',  //operation type
               sciId: 'view',   //reference of the component being change'd
               config: <a_config_object_metadata>
            },
            { ... }, { ... }
       ]
    }
}

このメタデータは構成オブジェクト・メタデータ a_config_object_metadata を参照します。

プロパティーは異なるタイプの値を持つことができるため、構成オブジェクト・メタデータはプロパティー・タイプをキャプチャーする必要があります。 さらに、すべての構成オブジェクトはオブジェクトのためのプロパティーおよび検証ルールを提供する定義を必要とします。

構成オブジェクト・メタデータの例を以下に示します。

a_config_object_metadata = {
   property1: {
       type: <type_of_property>,
       value: <property_value>
    },
   property_string: {
       type: 'string',
       value: 'aString'
    },
   property_expr: {
       type: 'expr',
       value: '(x+y)'
    },
   property_object: {
       type: 'object',
       value: <another_config_object_metadata: { ... }>
   },
    defid: <id_of_config_object_definition>
}

上記のメタデータから、結果の構成オブジェクトは以下のとおりです。

a_config_object = {
    property1: <aValue>,
    property_string: 'aString',
    property_expr: (x+y),
    property_object: <another_config_object>
}