Oracle JET仮想DOMアプリケーションのデータ・レコードの削除

はじめに

このチュートリアルでは、Oracle JavaScript Extension Toolkit (Oracle JET)仮想DOMアプリケーションを使用して、既存のデータ・レコードを削除し、RESTサービスに変更を送信する方法を示します。

目的

このチュートリアルでは、既存のデータ・レコードを削除して、変更をRESTサービスに送信する方法を学習します。

前提条件

タスク1: 「削除」ボタンの作成

  1. JET-Virtual-DOM-app/src/components/ActivityItemディレクトリに移動し、エディタでItemActionsContainer.tsxファイルを開きます。

  2. Props型の別名で、追加のdeleteプロパティを定義します。

    type Props = {
    create: () => void;
    edit: () => void;
    itemSelected: Partial<Item>;
    delete: () => void;
 };

  3. <oj-button id="updateButton"要素を検索し、その下にoj-button要素を追加します。onojAction属性を{props.delete}に、disabled属性をhideActionsに設定します。

    return (
   <div>
      <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
      <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      <oj-button id="deleteButton" disabled={hideActions} onojAction={props.delete}>Delete</oj-button>
   </div>

  4. ItemActionsContainer.tsxファイルを保存します。

    コードはこの final-ItemActionsContainer.tsx.txtファイルに似ているはずです。

タスク2: レコードの削除の処理

RESTサービスからレコードを削除するには、フェッチAPIおよびHTTP DELETEメソッドを使用します。RESTDataProviderのmutateメソッドを使用して、RESTDataProviderインスタンスを更新します。

  1. JET-Virtual-DOM-app/src/components/ActivityItemディレクトリに移動し、エディタでActivityItemContainer.tsxファイルを開きます。

  2. ActivityItemContainer関数内で、レコードを更新する前のコードの下に、deleteItemというメソッドを作成します。

    このメソッドは、アイテムを削除する確認をユーザーに要求し、確認に成功すると、RESTサービスに送信するDELETEリクエストを作成します。DELETE操作が成功すると、このメソッドはRESTDataProvider mutateイベントを起動して、アイテムが削除されたことをデータ・プロバイダ・コンシューマに通知します。

    const deleteItem = async () => {
  const really = confirm("Do you really want to delete this item?");
  if (really) {
    // Create and send request to REST service to delete item
    const request = new Request(`${restServerURLItems}${itemData.id}`, {
       method: "DELETE",
     });
    const response = await fetch(request);
    // Call  mutate method to notify dataprovider consumers that an 
    // item has been removed
    if (response.status === 200) {
      const removedRowKey = itemData.id;
      const removedRowMetaData = { key: removedRowKey };

      props.data?.mutate({
        remove: {
          data: [itemData.id],
          keys: new Set([removedRowKey]),
          metadata: [removedRowMetaData],
         },
       });
      } 
      else {
          alert(
             "Delete failed with status " 
             + response.status + " : " + response.statusText
          );
     }
  console.log("Deleted item.");
  } 
  else {
    console.log("OK, we canceled that delete.");
   }
  };

  3. return文で、ItemActionsContainer要素をdelete属性で更新します。

     <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer edit={openEditDialog} delete={deleteItem} itemSelected={activityItemValue} create={openCreateDialog} />
       . . . 
 </div>

  4. ActivityItemContainer.tsxファイルを保存します。

    コードは、この final-delete-ActivityItemContainer.tsx.txtファイルに似ています。

タスク3: 仮想DOMアプリケーションの実行とレコードの削除

  1. 端末ウィンドウで、仮想DOMアプリケーションを実行します。 
    npx ojet serve

  2. アプリで、Baseballアクティビティをクリックし、SureFire Ball (Set of 4)アイテムをクリックします。

  3. 「削除」ボタンをクリックします。確認ウィンドウがオープンします。

  4. 「OK」をクリックします。

    セクションがリフレッシュされ、項目が削除されました。

  5. 実行中の仮想DOMアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。

  6. ターミナル・ウィンドウでCtrl+Cを押し、プロンプトが表示されたら、yと入力してOracle JETツール・バッチ・ジョブを終了します。

タスク4: (オプション)リストアされたアプリケーションからの仮想DOMアプリケーションの実行

指定されたコードから完了したOracle JET仮想DOMアプリケーションを実行する場合は、ダウンロードしたアーカイブ・ファイルからアプリケーションをリストアできます。ストライプ化および圧縮されたOracle JET仮想DOMアプリケーションを操作するには、抽出されたアプリケーション内で、Oracle JETツールや必要なライブラリおよびモジュールなどのプロジェクトの依存関係をリストアする必要があります。

  1. JET-Virtual-DOM-app-final.zipファイルをダウンロードし、完了したアプリケーションの内容をJET-Virtual-DOM-app-finalディレクトリに抽出します。
  2. ターミナル・ウィンドウで、JET-Virtual-DOM-app-finalディレクトリに移動し、Oracle JET仮想DOMアプリケーションをリストアします。 
    npm install
  3. 確認待ち。 
    Success: Restore complete

    アプリケーションを実行する準備ができました。

  4. 仮想DOMアプリケーションを実行し、ブラウザでテストします。 
    npx ojet serve

  5. 実行中の仮想DOMアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。

  6. ターミナル・ウィンドウでCtrl+Cを押し、プロンプトが表示されたら、yと入力してOracle JETツール・バッチ・ジョブを終了します。

次のステップ

このチュートリアルでは、仮想DOM Webアプリケーションの構築に関するこの学習パスのモジュールRESTサービスを使用したCRUD操作を終了します。

「Oracle JETでのエンドツーエンド・テスト」モジュールで、学習パス「Oracle JETでのテスト環境の設定」の次のチュートリアルに進むことができます。

仮想DOM学習パスのメイン・ページに戻ると、仮想DOMアプリケーションの構築に関するすべてのモジュール、およびその他の学習パスにアクセスすることもできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。