UIイベント・フレームワークの設定および試行

この項では、新しい顧客アプリケーションを設定し、それをFusionアプリケーション・アプリケーションに統合する方法を学習します。

この項では、基本的な公開操作およびイベント・ユース・ケースのサブスクライブの例とともに、基本的な設定のみを説明します。

次に、その内容を示します:

サード・パーティ・アプリケーションでTypeScriptを設定します。
UIイベント・フレームワーク・ライブラリをサード・パーティ・アプリケーションに追加します。
Fusionアプリケーションにアプリケーションをロードします。
タブ変更イベントにサブスクライブします。
フィールド値の設定操作を公開します。

サードパーティ・アプリケーションの設定

この例では、TypeScriptを使用してJavaScriptを拡張します。

Node.Jsファイルがローカルの開発ディレクトリにインストールされていることを確認します。前述のコマンド(太字)は、VS Codeターミナルで実行できます。

プロジェクト・フォルダを作成して任意のIDEで開く - 推奨されるVS Code。
npmプロジェクトを初期化し、TypeScriptおよびHTTP-serverをインストールします。npm init -y
TypeScriptトランスパイラおよびHTTPサーバーをグローバルにインストールします。npm install tsc HTTP-server -g . 'HTTP-server'はローカル・デプロイメントに使用されます。

次に、Create tsconfig.jsonを実行します:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "out",
    "sourceMap": false,
    "lib": ["es2015.promise","es6","ES2016","dom"]
  }
}

次に、Create main.tsを実行します。

function run(name: string) {
  console.log('Hi ', name)
}

Command: tsc -wを使用して、TypeScriptをJavaScriptに変換します。これにより、出力ファイルにmain.jsファイルが作成されます。 (main.tsのtypedefinition :stringはmain.jsで削除されています)。
ファイルindex.htmlを作成します。 index.htmlでは、main.jsファイルがout/ディレクトリからロードされ、このディレクトリはトランス・パイル中に生成されます。
```
<html>
<head>
  <script src="./out/main.js"></script>
</head>
<body>
  <button onclick="run('uef')">run</button>
</body>
</html>
```

host index.htmlおよびout/main.jsで、ブラウザのホストURLに移動します。

アプリケーションへのUEFライブラリの追加

ライブラリ名はui-events-framework-client.jsです

クライアント・アプリケーションは、次の4つの方法でFusionアプリケーション・アプリケーションに埋め込むことができます:

IFrameにクライアント・アプリケーションをロード
カスタムjsアプリ内ページ
カスタム・ページのJavaScript
カスタム・コンポーネントCCA

次に、iFrameでアプリケーションをロードする方法の例を示します。

ui-events-framework-client.jsファイルをindex.htmlファイルのスクリプト・セクションに追加します。

<head>
<script src="https://static.oracle.com/cdn/ui-events-framework/libs/ui-events-framework-client.js"></script>
<script s

Fusionアプリケーション内のサード・パーティ・アプリケーションのロード

<oj-cx-svc-common-ui-events-container>コンポーネントを使用して、Fusionアプリケーションに外部アプリケーションをロードします。コンポーネントは、Oracle Component Exchangeからインストールし、付属のReadmeファイルの手順に従ってFusionアプリケーションで構成します。そのurl 属性は、ローカルでホストしたアプリケーションを指す必要があります。ページ・レベルの変数を使用してハード・コーディングまたは追加できます。

次に例を示します。

<oj-cx-svc-common-ui-events-container url="[[ $page.variables.url ]]"></oj-cx-svc-common-ui-events-container>

タブ変更イベントへのサブスクライブ

main.tsファイルのrun()関数をコードで更新して、タブ変更イベントを処理します。このコードは次の例のようになります。詳細は、「APIの起動」のサブスクライブAPIの説明を参照してください。

次の例に示すように、uiEventsFramework.d.tsをmain.tsに追加します:

/// <reference path="uiEventsFramework.d.ts"/> // Adding the type definitions for type checking
async function run () {
    // Creating an instance of UEF. This should be done only once in an app - usually during 
the app's initialization.
    const frameworkProvider: IUiEventsFrameworkProvider = await 
CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
 
    // getting global context. GlobalContext has information about......
    const globalContext: IGlobalContext = await frameworkProvider.getGlobalContext();
 
    // Currently, we can subscribe to ContextClose, ContextOpen, DataLoad, FieldValueChange, OnAfterSave, 
OnBeforeSave, TabChange, TabClose, TabOpen
    const eventRequest: IEventRequest = 
frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusTabChangeEvent');
 
    // registering a subscription in the globalContext
    globalContext.subscribe(eventRequest, (response: IEventResponse) => {
        let responseData = response as ITabChangeEventResponse;
        let tabChangeResponse: ITabChangeResponse = responseData.getResponseData();
        let currentTabContext: ITabContext = tabChangeResponse.getCurrentTab();
        let previousTabContext: ITabContext = tabChangeResponse.getPreviousTab();
        console.log(tabChangeResponse, currentTabContext, previousTabContext);
    });
}

コンパイラは監視モード(tsc -w)で起動されるため、main.tsの保存時にmain.jsファイルが自動生成されます。クライアント・アプリケーションを右クリックし、ドロップダウン・リストから「Reload Frame」を選択してリロードします。

テストするには、Fusionアプリケーションのホームページおよびサービス・リクエストに移動します。開発者コンソールを開いたままにします。次に、MSIタブを切り替えます。 tabChangeResponse、currentTabContextおよびpreviousTabContextの詳細は、タブ・スイッチのコンソールにログインします。

フィールド値の設定操作の公開

次の例に示すように、前述のコードのリクエスト・タイプおよびサブスクリプションを更新します。次に、コードをトランス・パイルし、iFrameを再ロードします。

async function run() {
    const frameworkProvider: IUiEventsFrameworkProvider = await 
CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appName', 'v1');
    const tabContext: ITabContext = await frameworkProvider.getTabContext();
    const recordContext: IRecordContext = await tabContext.getActiveRecord();
    const requestObject: ISetFieldValueOperationRequest = 
(frameworkProvider.requestHelper.createPublishRequest('cxEventBusSetFieldValueOperation') as 
ISetFieldValueOperationRequest);
    requestObject.field().setValue('ServiceRequest.Title', 'New Title');
    // publish event is happening here.
    // The result of the async operation is available on then(for success) and on catch ( for failure)
    recordContext.publish(requestObject).then((message) => {
        const response = message as ISetFieldValueResponse;
        console.log(response);
    }).catch((error: IErrorData) => {
        console.log(error);
    });
}