検索

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

download PDF

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

以下の方法を使用して、スタンドアロンのエディターをインストールします。

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

手順

  1. 以下の方法のいずれかを使用して、スタンドアロンのエディターをインストールします。

    各 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 @kie-tools/kie-editors-standalone

    2. 各エディターライブラリーを TypeScript ファイルにインポートします。

      各エディターのインポート

      import * as DmnEditor from "@kie-tools/kie-editors-standalone/dist/dmn"
      import * as BpmnEditor from "@kie-tools/kie-editors-standalone/dist/bpmn"

  2. スタンドアロンのエディターをインストールしたら、以下の例のように提供されたエディター 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 モデルのコンテンツへの Promise。以下の例のように、このパラメーターは空にすることができます。

    • 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(path: string, 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:::MySquareVideo:::PresenterHand などの <PROVIDER>:::<SELECT> 形式に従う必要があります。このメソッドは、要素の位置を表す Rect を返します。

    envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>

    これは高度なエディター API です。高度なエディター API の詳細は、MessageBusClientApi および KogitoEditorEnvelopeApi を参照してください。

Red Hat logoGithubRedditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

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

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。

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

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

© 2024 Red Hat, Inc.