Oracle JET Webアプリケーションでデータ・レコードを作成するためのフォームを作成します。

イントロダクション

このチュートリアルでは、Oracle JavaScript Extension Toolkit (Oracle JET) Webアプリケーションを使用してデータ・レコードを作成し、RESTサービスに送信する方法について説明します。

目的

このチュートリアルの完了時に、RESTサービスへのデータの書込み方法を学習しました。

前提条件

• JavaScriptランタイム、Node.jsおよび最新のOracle JETコマンドライン・インタフェースがインストールされたOracle JETアプリケーションを作成するために設定された開発環境
• RESTデータ・プロバイダを含むJET_Web_ApplicationフォルダにOracle JET Webアプリケーションを作成してデータをフェッチできるように、この学習パスでの前のチュートリアルの完了

タスク1:ビューでのダイアログ・ボックスの作成

oj-dialogカスタムHTML要素を使用して、確認可能に渡すフォーム情報を収集します。

1. JET_Web_Application/src/ts/viewsディレクトリに移動し、エディタでdashboard.htmlファイルを開きます。

2. id="itemsListHeader"のh3要素を検索します。その下にoj-button要素を追加し、on-oj-action属性を"[[showCreateDialog]]"に設定します。

   <h3 id="itemsListHeader">Activity Items</h3>
    <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
   

3. oj-bind-if test="[[itemSelected()]]"要素を検索し、その上にoj-dialog要素を追加します。id属性を"createDialog"に設定し、スタイルを"display:none"に設定します。

   . . .
      </oj-list-view>
   </div>
   <oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" cancel-behavior="icon">
      </oj-dialog>
   <oj-bind-if test="[[itemSelected()]]">
      <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   . . .
   

4. 作成したoj-dialog要素内に、slot="body"およびslot="footer"属性を持つ2つの子div要素を追加します。

   <oj-dialog id="createDialog" style="display: none" dialog-title="Create New Item" cancel-behavior="icon">
      <div slot="body">
         </div>
      <div slot="footer">
         </div>
   </oj-dialog>
   

5. 作成したdiv slot="footer"要素内にoj-button要素を追加し、on-oj-action="[[createItem]]"属性を設定します。

   <div slot="footer">
      <oj-button id="submitBtn" on-oj-action="[[createItem]]">Submit</oj-button>
   </div>
   

6. 作成したdiv slot="body"要素内に、Activity IDおよびName値のそれぞれにoj-label要素とoj-input-text要素を追加します。

      
   <div slot="body">
      <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label>
      <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text>
      <oj-label class="oj-label" for="createNewName">Name</oj-label>
      <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text>
   </div>
      
   

   activityKey値は、一方向バインディングを示す大カッコを使用してバインドすることに注意してください。これは、ユーザーがアクティビティID値を編集しないためです。itemName値は、中カッコを使用してバインドします。これは、双方向バインディングを示し、ユーザーが値を上書きできるようにします。

7. 同様に、作成したoj-input-text id="createNewName"カスタムHTML要素の下に、Price, Description, Quantity: In-StockおよびQuantity: Shipped値のoj-input-text要素を追加します。

      
   <div slot="body">
      <oj-label class="oj-label oj-label-value" for="createActivityId">Activity ID</oj-label>
      <oj-input-text id="createActivityId" readonly value="[[activityKey]]"></oj-input-text>
      <oj-label class="oj-label" for="createNewName">Name</oj-label>
      <oj-input-text id="createNewName" value="{{itemName}}"></oj-input-text>
      <oj-label class="oj-label" for="createNewPrice">Price</oj-label>
      <oj-input-text id="createNewPrice" value="{{price}}"></oj-input-text>
      <oj-label class="oj-label" for="createNewDesc">Description</oj-label>
      <oj-input-text id="createNewDesc" value="{{short_desc}}"></oj-input-text>
      <oj-label class="oj-label" for="createNewInStock">Quantity: In-Stock</oj-label>
      <oj-input-text id="createNewInStock" value="{{quantity_instock}}"></oj-input-text>
      <oj-label class="oj-label" for="createNewShipped">Quantity: Shipped</oj-label>
      <oj-input-text id="createNewShipped" value="{{quantity_shipped}}"></oj-input-text>
   
   </div>
      
   

8. dashboard.htmlファイルを保存します。

   コードは、このfinal-create-dDashboard-html.txtファイルに似ています。

タスク2: ViewModelでダイアログを開くハンドル

ビューで参照した新しいオブザーバおよび関数を宣言して、Oracle JET Webアプリケーションが起動時に正常に初期化されるようにします。

1. JET_Web_Application/src/ts/viewModelsディレクトリに移動し、エディタでdashboard.tsファイルを開きます。

2. dashboard.tsファイルの上部で、ボタン、ダイアログおよび入力テキスト・コンポーネントのOracle JETモジュールをインポートします。

   import * as AccUtils from "../accUtils";
   . . .
   import { ojDialog } from "ojs/ojdialog";
   import "ojs/ojdialog";
   import "ojs/ojinputtext";
   import { ojButtonEventMap } from "ojs/ojbutton";
   . . . 
   

3. オブザーバのリストで、「作成」ダイアログのフィールドの観測可能値を宣言および初期化します。

   class DashboardViewModel {
      . . .
   
      //  Fields in Create dialog
      itemName: ko.Observable<string>;
      price: ko.Observable<number>;
      short_desc: ko.Observable<string>;
      quantity_instock: ko.Observable<number>;
      quantity_shipped: ko.Observable<number>;
      quantity: number;
      inputImageFile: string = 'css/images/product_images/jet_logo_256.png'
      . . .
   
      constructor() {
         . . . 
         // Initialize fields in create dialog
         this.itemName = ko.observable<string>();
         this.price = ko.observable<number>();
         this.short_desc = ko.observable<string>();
         this.quantity_instock = ko.observable<number>();
         this.quantity_shipped = ko.observable<number>();
         this.quantity = 0;
         // inputImageFile has already been initialized.
      } // Closing bracket for constructor method
   

4. constructor()メソッドの下で、ダイアログを開くためのshowCreateDialogというメソッドを追加します。

   . . .
   constructor() {
   . . . 
     } // Closing bracket for constructor method
   
   // Open dialog
   public showCreateDialog(event: ojButtonEventMap["ojAction"]) {
      (document.getElementById("createDialog") as ojDialog).open();
   }
   
   

5. 作成したshowCreateDialogメソッドの下で、ダイアログ・データを送信するためのcreateItemというメソッドを追加し、closeコマンドを追加します。

   // Create item and close dialog
   public createItem = async (event: ojButtonEventMap["ojAction"]) => {
    (document.getElementById("createDialog") as ojDialog).close();
   } 
   
   

6. dashboard.tsファイルを保存します。

   コードは、この create-dashboard-ts.txtファイルのようになります。

7. 端末ウィンドウで、Webアプリケーションを実行してテストします。

   $ ojet serve
   

   「アクティビティ・アイテム」パネルに「作成」ボタンが表示されます。クリックすると、ダイアログが開きます。

   

   図create_dialog.pngの説明

8. 端末ウィンドウおよびWebアプリケーションを表示するブラウザ・ウィンドウを開いたままにします。

タスク3: ViewModelでのダイアログ入力の送信の処理

ViewModelのダイアログからデータを取得し、フェッチAPIおよびHTTP POSTメソッドを使用してRESTサービスに送信し、最後にRESTDataProviderのmutateメソッドを使用してRESTDataProviderインスタンスを更新します。

1. 開いているdashboard.tsファイルのclose()コールの上のcreateItemメソッドで、「新規アイテムの作成」ダイアログからの入力値を保持する変数を宣言します。また、quantity_instockおよびquantity_shippedの入力値に基づいてquantityの値を計算します。

   // Create item and close dialog
   public createItem = async (event: ojButtonEventMap["ojAction"]) => {
   
      this.quantity = (Number(this.quantity_instock()) + Number(this.quantity_shipped()));
   
      const row = {
         name: this.itemName(),
         short_desc: this.short_desc(),
         price: this.price(),
         quantity_instock: this.quantity_instock(),
         quantity_shipped: this.quantity_shipped(),
         quantity: this.quantity,
         activity_id: this.activityKey,
         image: this.inputImageFile,
         };
   
     (document.getElementById("createDialog") as ojDialog).close();
   } 
   

2. row変数宣言の下で、データをRESTサービスに送信するリクエストを作成します。

   . . .
    const row = {
   . . .
      image: this.inputImageFile,
    };
   // Create and send request to REST service to add row
    const request = new Request(this.restServerURLItems, {
      headers: new Headers({
        "Content-type": "application/json; charset=UTF-8",
      }),
      body: JSON.stringify(row),
      method: "POST",
    });
   
    const response = await fetch(request);
    const addedRow = await response.json();
    . . .
   

3. addedRow変数の下で、add mutateイベントを作成し、RESTDataProvider mutateメソッドをコールして、新しい行が追加されたことをRESTDataProviderインスタンスに通知します。また、RESTDataProvider refresh()メソッドを呼び出して表示をリフレッシュします。

      . . .
      const addedRow = await response.json();
      // Create add mutate event and call mutate method
      // to notify dataprovider that a row has been
      // added
      const addedRowKey = addedRow[this.keyAttributes];
      const addedRowMetaData = { key: addedRowKey };
      this.itemsDataProvider.mutate({
      add: {
         data: [addedRow],
         keys: new Set([addedRowKey]),
         metadata: [addedRowMetaData],
      },
      });
      this.itemsDataProvider.refresh();
      // Close dialog      
      (document.getElementById("createDialog") as ojDialog).close();
   
   } 
   

4. dashboard.tsファイルを保存します。

   コードは、このfinal-create-dashboard-ts.txtファイルに似ています。

タスク4:コードのテストとレコードの作成

1. ブラウザで、Webアプリケーションの動的な変更を表示します。

2. Webアプリケーションで、「ベースボール」アクティビティをクリックします。

3. 「作成」をクリックします。

   「新規アイテムの作成」ダイアログが開きます。

4. 新規品目の詳細を入力します。

   • 名前: SureFire Ball (Set of 4)
   • 価格: 20.5
   • 説明: Canvas balls for practice
   • 数量:在庫: 35
   • 数量:出荷済: 61

5. 「発行」をクリックします。

   セクションがリフレッシュされ、アイテムはベースボール・アクティビティ・アイテムのリストに含まれます。

6. リストでSureFire Ball (4のセット)項目をクリックし、その詳細を表示します。

   

   図create_record.pngの説明

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

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

その他の学習リソース

docs.oracle.com/learnの他のラボを調べるか、Oracle Learning YouTubeチャネルでさらに無料の学習コンテンツにアクセスします。さらに、education.oracle.com/learning-explorerにアクセスしてOracle Learning Explorerにします。

製品ドキュメントは、Oracleヘルプ・センターを参照してください。

---

タイトルおよび著作権情報

Create a form to create data records in an Oracle JET web app

F49685-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.