コードからタイプを作成

Visual Builderの変数で独自のタイプ(JavaScriptまたはtypescriptクラスで記述されたタイプ・クラスなど)を使用する場合は、コードからタイプを作成してそのタイプ・クラスのインスタンスを作成できます。 InstanceFactoryタイプと呼ばれるコードからのタイプは、Oracle JETタイプ・クラスまたはカスタム・タイプ・クラスを宣言的にプラグインするためにタイプ定義をインポートし、InstanceFactory変数と呼ばれる変数のカテゴリで使用することで作成できます。

InstanceFactoryタイプおよび変数を使用すると、VB拡張タイプ・フレームワークを使用または拡張する新しいタイプ(Javascriptクラス)を再実装することなく、独自のタイプ・クラス(myapp/MyTypeFromCode JavaScriptクラスなど)をVisual Builder変数を使用するタイプとして使用できます。タイプ詳細を定義するtypescript定義ファイル(*.d.ts)またはtypescriptファイル(*.ts)のみを指定する必要があります。 Visual Builderは、型定義を解析し、既存の型スキーマと互換性のあるJSON表現を生成し、InstanceFactory型を作成して、InstanceFactory変数(vb/InstanceFactory)に割り当てることができます。 InstanceFactory変数は、InstanceFactory型と、その型によって宣言されたコンストラクタ引数のリストを使用して、そのコンストラクタ・パラメータ(constructorParams)を定義します。

InstanceFactory型を使用するInstanceFactory変数は、型クラスの不変インスタンスを作成します。ページがロードされると、InstanceFactory変数は(構成されたコンストラクタ・パラメータを使用して)タイプの最初のインスタンスを作成します。また、コンストラクタ・パラメータが変更されるたびに、型クラスの新しいインスタンスが作成されます。変数の割当処理または変数のリセット処理を使用して、コンストラクタ・パラメータを更新できます。

変数のコール・アクションを使用して、変数インスタンスのメソッドをコールすることもできます(「変数呼出しアクションの追加」を参照)。

コードからタイプを作成するには:

ナビゲータでアプリケーション(またはフラグメント)を選択します。
「タイプ」タブをクリックして、タイプ・エディタを開きます。
「+タイプ」をクリックし、「コードから」を選択します。このオプションは、アプリケーション・レベル(またはフラグメント)でのみ使用可能であるため、ナビゲータで正しいノードが選択されていることを確認してください。

「図typefromcode-create.pngの説明」
ネームスペースを使用してタイプ名を入力し(myapp/MyTypeFromCodeなど)、「作成」をクリックします。スラッシュ(/)で区切られたネームスペースは、タイプの編成に役立ちます。

デフォルトのアイコンがoj-ux-ico-softwareに設定されたInstanceFactoryタイプが作成されます。次に示すように、デフォルトの表示ラベルも値に基づいて生成されます:

図typefromcode.pngの説明
必要に応じて、選択したカスタム表示ラベルおよび表示アイコンを使用するようにタイプ・プロパティを構成します。この例では、表示ラベルをMyTypeFromCodeに、表示アイコンをoj-ux-ico-phoneに設定します。
タイプの詳細を指定するtypescript (.ts)またはtypescript定義(.d.ts)ファイルをドラッグ・アンド・ドロップ(またはアップロード・タイプ定義をクリックして指定)します:

「図typefromcode-typedefinition.pngの説明」

Visual Builderは、型定義をJSON表現に変換し、JSONファイルをresources/typedefs/に保存します。

コードからタイプを作成した後、他のタイプの場合と同様に、このInstanceFactoryタイプの変数を作成できます。たとえば、MyTypeFromCode型に割り当てられたmyVar変数は次のとおりです:

「図typefromcode-variable.pngの説明」

ただし、InstanceFactory型にはコンストラクタが含まれているため、InstanceFactory型変数の初期化は他の変数とは異なります。コンストラクタにパラメータをマップする必要があります。これを行うには、変数のプロパティ・ペインで「割り当て」をクリックし、コンストラクタ・パラメータをマップします。

コンストラクタ・パラメータのシェイプは、型定義ファイルから取得されます。 JSONタブに表示される型および変数の宣言の例を次に示します:

  "types": {
    "myapp/MyTypeFromCode": {
      "label": "MyTypeFromCode",
      "constructorType": "vb/InstanceFactory<myapp/MyTypeFromCode>",
      "iconClass": "oj-ux-ico-phone",
      "typedef": "resources/typedefs/myapp/MyTypeFromCode.json"
    }
  },
  "variables": {
    "myVar": {
      "type": "myapp/MyTypeFromCode",
      "constructorParams": [
        "Book Giver",              <<<<< this is title
        {                          <<<<< this is author
          "firstName": "Lois",
          "lastName": "Lowry"
        },
        49.99                     <<<<<<< this is price
      ]
    }

ノート:

myapp/MyTypeFromCodeなどのタイプのJavaScript実装を実行時に使用できるようにするには、実装のパスがrequireJSで正しくマップされていることを確認します。次に例を示します:

"requirejs": {
    "paths": {
      "myapp": "resources/js/myapp"
    }
  },

あるInstanceFactory変数が別のInstanceFactory変数を参照できます。この例では、incidentsView変数は、別のInstanceFactory変数であるincidentsSDPを参照しています:

"incidentsSDP": {
  "type": "vb/ServiceDataProvider2",
  "constructorParams": [
    {
      "endpoint": "demo-data-service/getIncidents",
      "keyAttributes": "id",
      "itemsPath": "result",
      "uriParameters": "{{ $variables.technicianURIParams }}"
    }
  ]
},
"incidentsView": {
  "type": "ojs/ojlistdataproviderview",
  "constructorParams": [
    "{{ $page.variables.incidentsSDP.instance }}",
    {
      "sortCriteria": [
        {
          "attribute": "priority",
          "direction": "ascending"
        }
      ]
    }
  ]
}

incidentsSDP変数が変更されるたびに(つまり、新しいインスタンスが作成されるたびに)、incidentsView変数はojs/ojlistdataproviderviewの新しいインスタンスを再作成します。これは、いずれかの変数にバインドされたコンポーネントにも変更が通知されることを意味します。