建立表單以在 Oracle JET 虛擬 DOM App 中建立資料記錄

簡介

本教學課程示範如何使用 Oracle JavaScript Extension Toolkit (Oracle JET) 虛擬 DOM 應用程式來建立資料記錄，然後將它送出至 REST 服務。

目標

在本教學課程中，您將瞭解如何將資料寫入 REST 服務。

必備條件

• 用來建立 Oracle JET 虛擬 DOM 應用程式 (包括安裝 Node.js) 的開發環境
• 完成此學習路徑的上一個教學課程，從 Oracle JET Virtual DOM 應用程式中的 REST API 擷取資料

作業 1：建立管理表單資訊的元件

建立新元件以顯示用來呼叫功能以建立新記錄的按鈕。ItemActionsContainer 元件包含按鈕，可讓虛擬 DOM 應用程式使用者呼叫包含建立新記錄功能之 CreateNewItemDialog 元件。

1. 瀏覽至 JET-Virtual-DOM-app/src/components/ActivityItem 目錄，建立新的 CreateNewItemDialog.tsx 檔案，然後在編輯器中開啟該檔案。

2. 新增定義新元件之函數名稱 (CreateNewItemDialog) 的預留位置項目。

   import { h } from 'preact';
   
   type Props = {
     message?: string;
   };
   
   const CreateNewItemDialog = (props: Props) => {
     return (
       <div class="oj-web-applayout-max-width oj-web-applayout-content">
         <p>content</p>
       </div>
     );
   };
   
   export default CreateNewItemDialog;
   

3. 在同一個目錄中建立 ItemActionsContainer.tsx 檔案，並在編輯器中開啟該檔案。

4. 新增定義新元件之函數名稱 (ItemActionsContainer) 的預留位置項目。

   import { h } from 'preact';
   
   type Props = {
     message?: string;
   };
   
   const ItemActionsContainer = (props: Props) => {
     return (
       <div class="oj-web-applayout-max-width oj-web-applayout-content">
         <p>content</p>
       </div>
     );
   };
   
   export default ItemActionsContainer;
   

工作 2：處理開啟對話方塊

匯入 Oracle JET 模組並宣告可讓您的 Oracle JET 虛擬 DOM 應用程式順利開啟對話方塊的功能。

1. 在開啟的 ItemActionsContainer.tsx 檔案頂端，匯入 Button 元件的 Oracle JET 模組。

   import { h } from 'preact';
   import 'ojs/ojbutton';
   

2. 在 Props 類型別名中定義 create 特性，以管理開啟建立對話方塊。

   import { h } from 'preact';
   import 'ojs/ojbutton';
   
   type Props = {
     create: () => void;
   };
   

3. 在 return 敘述句中，將現有的 div 元素取代為新的 div 元素，該元素會以參照 create 特性的 onojAction 屬性轉譯 oj-button 元素。

   const ItemActionsContainer = (props: Props) => {
      return (
         <div>
            <oj-button id="createButton" onojAction={props.create}>
            Create
            </oj-button>
         </div>
   

   儲存 ItemActionsContainer.tsx 檔案。您的程式碼應該與 ItemActionsContainer.tsx.txt 類似

4. 在開啟的 CreateNewItemDialog.tsx 檔案頂端，匯入對話方塊元件的 Oracle JET 模組和 MutableRef 鉤點。

   import { h } from 'preact';
   import 'ojs/ojdialog';
   import { ojDialog } from 'ojs/ojdialog';
   import { MutableRef } from 'preact/hooks';
   

5. 在 Props 類型別名中定義 isOpened 和 closeDialog 特性。

   type Props = {
     isOpened: boolean;
     closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
   };
   

6. 在 return 陳述式中，將現有的 div 元素取代為包裝 oj-dialog 自訂元素的 span 元素。

      return (
      <span>
         <oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
            <div slot="body">
            <p>dialog open</p>
            </div>
         </oj-dialog>
      </span>
      );
   

7. 在 CreateNewItemDialog.tsx 檔案的頂端，匯入 useRef 和 useEffect Preact 鉤點。

   import { h } from 'preact';
   import { useRef, useEffect } from 'preact/hooks';
   import 'ojs/ojdialog';
   import { ojDialog } from 'ojs/ojdialog';
   

8. 在 return 敘述句之前，宣告將保留 useRef Preact 鉤點擷取之參照的 createDialogRef 和 closeDialog 變數。

   const CreateNewItemDialog = (props: Props) => {
   
      const createDialogRef = useRef<ojDialog>(null);
   
      const closeDialog = () => {
         props.closeDialog(createDialogRef as MutableRef<ojDialog>, "create");
       }
   
    return (
   	
   

9. 此外，在 return 敘述句之前，請使用 useEffect 鉤點來撰寫設定 isOpened 特性值的表示式。

    const CreateNewItemDialog = (props: Props) => {
        const createDialogRef = useRef<ojDialog>(null);
   
        const closeDialog = () => {
        props.closeDialog(createDialogRef as MutableRef<ojDialog>, "create");
        }
   
        useEffect(() => {
         props.isOpened
            ? createDialogRef.current?.open()
            : createDialogRef.current?.close();
        }, [props.isOpened]);
   
    return (
   
   

   儲存 CreateNewItemDialog.tsx 檔案。您的程式碼應該與 CreateNewItemDialog-1.tsx.txt 類似

10. 瀏覽至 JET-Virtual-DOM-app/src/components/ActivityItem 目錄，然後開啟 ActivityItemContainer.tsx 檔案。

11. 在 ActivityItemContainer.tsx 頂端，匯入您剛建立的 ItemActionsContainer 和 CreateNewItemDialog 元件，並匯入「Oracle JET 表單版面配置」和「輸入文字」元件的模組。

    import ItemActionsContainer from "./ItemActionsContainer";
    import CreateNewItemDialog from "./CreateNewItemDialog";
    import "ojs/ojformlayout";
    import "ojs/ojinputtext";
    import { ojDialog } from "ojs/ojdialog";
    import { MutableRef} from "preact/hooks"
    

12. 在 ActivityItemContainer 函數宣告之後，建立使用 Preact 之 useState 鉤點的變數，以及使用函數 (openCreateDialog) 開啟對話方塊。

    我們也包含一個管理「編輯」對話方塊之開啟狀態的項目，該對話方塊會在稍後的教學課程中建立。

    const ActivityItemContainer = (props: Props) => {
     const [isCreateOpened, setIsCreateOpened] = useState<boolean>(false);
     const [isEditOpened, setIsEditOpened] = useState<boolean>(false);
    
      const openCreateDialog = () => {
         console.log("CreateNewItemDialog called");
         setIsCreateOpened(true);
      };
    

13. 在 return 陳述式之前，也包含關閉開啟對話方塊的函數。

    const handleDialogClose = (ref: MutableRef<ojDialog>, type: string) => {
       type === "create" ? setIsCreateOpened(false) : setIsEditOpened(false);
       ref.current.close();
    };
    
    return (
       <div id="activityItemsContainer" class=. . .>
    

14. 在 return 敘述句中，包含新建立的 ItemActionsContainer 和 CreateNewItemDialog 元件。

    return (
    <div id="activityItemsContainer" . . .>
     <div id="container">
       <h3>Activity Items</h3>
        <ItemActionsContainer create={openCreateDialog} />
        <CreateNewItemDialog isOpened={isCreateOpened} closeDialog={handleDialogClose} />
    

    儲存 ActivityItemContainer.tsx 檔案。您的程式碼應該與 ActivityItemContainer-1.tsx.txt 類似

任務 3：處理提交對話方塊輸入

1. 瀏覽至 JET-Virtual-DOM-app/src/components/ActivityItem 目錄，然後開啟 CreateNewItemDialog.tsx 檔案。

2. 在開啟的 CreateNewItemDialog.tsx 檔案頂端，匯入 Preact 的 useState 鉤點。

   import { ojDialog } from 'ojs/ojdialog';
   import { MutableRef, useRef, useEffect, useState } from "preact/hooks"
   

3. 在 Props 類型別名中，定義 createNewItem 特性。

   type Props = {
        isOpened: boolean;
        closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
        createNewItem: (data: Partial<Item>, ref: MutableRef<ojDialog>) => void;
    };
   

4. 定義包含您傳送給 REST 服務之資料欄位的 Item 類型別名。

   type Item = {
     name?: string | undefined;
     short_desc?: string;
     price?: number;
     quantity_shipped?: number;
     quantity_instock?: number;
   };
   

5. 尋找 return 敘述句中的 oj-dialog 自訂元素，並以 oj-form-layout 元素和輸入欄位的 oj-input-text 元素取代 <div slot="body"> 的內容以建立新項目。同時包含含有 oj-button 元素的 <div slot="footer">。

   <oj-dialog id="createDialog" ref={createDialogRef} dialogTitle="Create New Item" onojClose={closeDialog} cancelBehavior="icon">
       <div slot="body">
          <oj-form-layout>
          <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler}></oj-input-text>
          <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler}></oj-input-text>
          <oj-input-text id="short_desc" labelHint="Description" onvalueChanged={onChangeHandler}></oj-input-text>
          <oj-input-text id="quantity_instock" labelHint="Quantity: In-Stock" onvalueChanged={onChangeHandler}></oj-input-text>
          <oj-input-text id="quantity_shipped" labelHint="Quantity: Shipped" onvalueChanged={onChangeHandler}></oj-input-text>
          </oj-form-layout>
       </div>
       <div slot="footer">
          <oj-button id="submitBtn" onojAction={createItem}>Submit</oj-button>
       </div>
    </oj-dialog>
   

6. 在 return 敘述句之前，使用 useState 鉤點，並包含 Oracle JET 元素所參照的 onChangeHander 和 createItem 函數。

   const [formData, setFormData] = useState<Partial<Item>>({});
   
    const onChangeHandler = (event: any) => {
       setFormData({
          ...formData,
          [event.currentTarget.id]: event.detail.value,
       });
    }
   
    const createItem = () => {
       console.log("data: " + JSON.stringify(formData));
       props.createNewItem(formData, createDialogRef as MutableRef<ojDialog>);
    };
   
    return (
      <span>. . .
   

   儲存 CreateNewItemDialog.tsx 檔案。您的程式碼應該與 CreateNewItemDialog-2.tsx.txt 類似

7. 瀏覽至 JET-Virtual-DOM-app/src/components/ActivityItem 目錄，然後開啟 ActivityItemContainer.tsx 檔案。

8. 在 return 敘述句中，更新 CreateNewItemDialog 類別，以包含您在 CreateNewItemDialog 元件中定義的 createNewItem 方法。

   <CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
   

9. 在 return 陳述式之前，請包含新的 createItem 函數，以建立新項目並將其傳送至後端 REST 服務。

   const createItem = async (data: Partial<Item>, createDialogRef: MutableRef<ojDialog>) => {
     //process create command and close dialog on success
     if (data?.name) {
        let quantity = Number(data.quantity_instock) + Number(data.quantity_shipped);
        const row = {
          name: data.name,
          short_desc: data.short_desc,
          price: data.price,
          quantity_instock: data.quantity_instock,
          quantity_shipped: data.quantity_shipped,
          quantity: quantity,
          activity_id: props.selectedActivity?.id,
          image: "css/images/product_images/jet_logo_256.png",
        };
   
        // Create and send request to REST service to add row
        const request = new Request(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();
   
        activityItemDataProvider?.refresh();
        // Close dialog
        console.log("Created new item");
        createDialogRef.current.close();
      }
    };
   

10. 在 ActivityItemContainer 函數宣告之後，定義一個變數，該變數會參考要用來將項目傳送至 REST 服務的 URL。

    const ActivityItemContainer = (props: Props) => {
        const activityItemDataProvider = props.data;
        const restServerURLItems = "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/" + props.selectedActivity?.id + "/items/";
    

11. 儲存 ActivityItemContainer.tsx 檔案。您的程式碼應該與 ActivityItemContainer-2.tsx.txt 類似

任務 4：測試代碼並建立記錄

1. 在終端機視窗中，變更為 JET-Virtual-DOM-app 目錄，然後執行虛擬 DOM 應用程式。

   npx ojet serve
   

2. 在瀏覽器中，檢視虛擬 DOM 應用程式中的動態變更。
3. 在虛擬 DOM 應用程式中，按一下 Baseball 活動。

4. 按一下建立。

   建立新項目對話方塊便會開啟。

5. 填寫新項目的詳細資料。

   • 名稱：SureFire Ball (Set of 4)
   • 價格：20.5
   • 描述：Canvas balls for practice
   • 數量：庫存量：35
   • 數量：已出貨：61

6. 按一下送出。

   區段會重新整理，且項目為棒球活動項目清單的一部分。

7. 按一下清單中的 SureFire Ball (4 組) 項目，並檢視其詳細資訊。

   

8. 關閉顯示您執行中虛擬 DOM 應用程式的瀏覽器視窗或頁籤。

9. 在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

下一步

繼續本模組的下一個教學課程。

本教學課程是 CRUD Operations Using a REST Service 模組的一部分。

• 從 Oracle JET 中的 REST API 擷取資料
• 建立表單以在 Oracle JET 虛擬 DOM App 中建立資料記錄
• 更新 Oracle JET Virtual DOM 應用程式中的資料記錄
• 刪除 Oracle JET Virtual DOM 應用程式中的資料記錄

您可以返回虛擬 DOM 學習路徑的主頁面，存取建置虛擬 DOM 應用程式的所有模組。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。

---

標題與著作權資訊

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

F70657-02

Copyright ©2024,2025,

Oracle 和 (或) 其關係企業。