2.2. Red Hat Process Automation Manager スタンドアロンのエディターの設定

Red Hat Process Automation Manager は、自己完結型のライブラリーに分散されたスタンドアロンのエディターを提供し、エディターごとにオールインワンの JavaScript ファイルを提供します。JavaScript ファイルは、包括的な API を使用してエディターを設定および制御します。

スタンドアロンのエディターは、以下の 3 つの方法でインストールできます。

各 JavaScript ファイルを手動でダウンロード
NPM パッケージの使用

手順

以下の方法のいずれかを使用して、スタンドアロンのエディターをインストールします。
各 JavaScript ファイルを手動でダウンロード: この方法の場合は、以下の手順に従います。
1. JavaScript ファイルをダウンロードします。
2. ダウンロードした Javascript ファイルをホスト型アプリケーションに追加します。
3. 以下の <script> タグを HTML ページに追加します。
  DMN エディターの HTML ページのスクリプトタグ
```
<script src="https://<YOUR_PAGE>/dmn/index.js"></script>
```
  BPMN エディターの HTML ページのスクリプトタグ
```
<script src="https://<YOUR_PAGE>/bpmn/index.js"></script>
```
NPM パッケージの使用: この方法の場合は、以下の手順に従います。
1. NPM パッケージを package.json ファイルに追加します。
  NPM パッケージの追加
```
npm install @redhat/kogito-tooling-kie-editors-standalone
```
2. 各エディターライブラリーを TypeScript ファイルにインポートします。
  各エディターのインポート
```
import * as DmnEditor from "@redhat/kogito-tooling-kie-editors-standalone/dist/dmn"
import * as BpmnEditor from "@redhat/kogito-tooling-kie-editors-standalone/dist/bpmn"
```

スタンドアロンのエディターをインストールしたら、以下の例のように提供されたエディター API を使用して必要なエディターを開き、DMN エディターを開きます。API は、各エディターで同じものになります。

DMN スタンドアロンのエディターを開く

const editor = DmnEditor.open({
  container: document.getElementById("dmn-editor-container"),
  initialContent: Promise.resolve(""),
  readOnly: false,
  origin: "",
  resources: new Map([
    [
      "MyIncludedModel.dmn",
      {
        contentType: "text",
        content: Promise.resolve("")
      }
    ]
  ])
});

エディター API で以下のパラメーターを使用します。

表2.1 パラメーターの例
パラメーター	説明
`container`	エディターが追加される HTML 要素。
`initialContent`	DMN モデルのコンテンツへの Pomise。以下の例のように、このパラメーターは空にすることができます。 `Promise.resolve("")` `Promise.resolve("<DIAGRAM_CONTENT_DIRECTLY_HERE>")` `fetch("MyDmnModel.dmn").then(content ⇒ content.text())`
`readonly` (任意)	エディターでの変更を許可します。コンテンツの編集を許可する場合は `false` (デフォルト)、エディターで読み取り専用モードの場合は `true` に設定します。
`origin` (任意)	リポジトリーの起点。デフォルト値は `window.location.origin` です。
`resources` (任意)	エディターのリソースのマッピング。たとえば、このパラメーターを使用して、BPMN エディターの DMN エディターまたは作業アイテム定義に含まれるモデルを提供します。マップの各エントリーには、リソース名と、`content-type` (`text` または `binary`) および `content` (`initialContent` パラメーターと同様) で設定されるオブジェクトが含まれています。

返されるオブジェクトには、エディターの操作に必要なメソッドが含まれます。

表2.2 返されたオブジェクトメソッド
メソッド	説明
`getContent(): Promise<string>`	エディターのコンテンツを含む promise を返します。
`setContent(content: string): void`	エディターの内容を設定します。
`getPreview(): Promise<string>`	現在のダイアグラムの SVG 文字列が含まれる promise を返します。
`subscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): (isDirty: boolean) ⇒ void`	エディターでコンテンツを変更し、サブスクライブ解除に使用されるのと同じコールバックを返す際に呼び出されるコールバックを設定します。
`unsubscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): void`	エディターでコンテンツが変更される際に渡されたコールバックのサブスクライブを解除します。
`markAsSaved(): void`	エディターの内容が保存されることを示すエディターの状態をリセットします。また、コンテンツの変更に関連するサブスクライブされたコールバックをアクティベートします。
`undo(): void`	エディターの最後の変更を元に戻します。また、コンテンツの変更に関連するサブスクライブされたコールバックをアクティベートします。
`redo(): void`	エディターで、最後に元に戻した変更をやり直します。また、コンテンツの変更に関連するサブスクライブされたコールバックをアクティベートします。
`close(): void`	エディターを終了します。
`getElementPosition(selector: string): Promise<Rect>`	要素をキャンバスまたはビデオコンポーネント内に置いた場合に、標準のクエリーセレクターを拡張する方法を提供します。`selector` パラメーターは、`Canvas:::MySquare`、`Video:::PresenterHand` などの `<PROVIDER>:::<SELECT>` 形式に従う必要があります。このメソッドは、要素の位置を表す `Rect` を返します。
`envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>`	これは高度なエディター API です。高度なエディター API の詳細は、MessageBusClientApi および KogitoEditorEnvelopeApi を参照してください。

2.2. Red Hat Process Automation Manager スタンドアロンのエディターの設定

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

多様性を受け入れるオープンソースの強化

会社概要

Red Hat legal and privacy links

Red Hat legal and privacy links