Oracle JET 웹 앱에서 데이터 레코드 업데이트

소개

이 사용지침서에서는 Oracle JET(Oracle JavaScript Extension Toolkit) 웹 앱을 사용하여 기존 데이터 레코드를 갱신하고 REST 서비스로 제출하는 방법을 보여줍니다.

목표

이 사용지침서가 완료되면 기존 데이터 레코드를 업데이트하고 REST 서비스로 제출하는 방법을 배웠습니다.

필요 조건

JavaScript 런타임, Node.js 및 최신 Oracle JET 명령행 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
데이터를 패치(fetch)하는 REST 데이터 제공자와 함께 JET_Web_Application 폴더를 생성할 수 있도록 이 학습 경로에 이전 자습서가 완료되었습니다.

작업 1: 뷰에 대화상자 생성

oj-dialog 사용자 정의 HTML 요소를 사용하여 양식 정보를 수집한 다음 관찰 가능 항목으로 전달합니다.

JET_Web_Application/src/ts/views 디렉토리로 이동하여 편집기에서 dashboard.html 파일을 엽니다.

oj-button id="createButton" 요소를 찾아 아래에 두번째 oj-button 요소를 추가합니다. on-oj-action 속성을 "[[showEditDialog]]"로, disabled 속성을 "[[!itemSelected()]]"로 설정합니다.

. . .
<h3 id="itemsListHeader">Activity Items</h3>
 <oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
<!-- If itemSelected is set to false, disabled is true, and vice versa. -->
<oj-button id="updateButton" disabled="[[!itemSelected()]]" on-oj-action="[[showEditDialog]]">Update
  </oj-button>
<oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]"
. . . 

oj-bind-if test="[[itemSelected()]]" 태그를 찾아 여기에 oj-dialog 요소를 추가합니다. id 속성을 "editDialog"로, class 속성을 no-display로 설정합니다.

. . . 
<oj-bind-if test="[[itemSelected()]]">
   <oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
      </oj-dialog>
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .

생성한 oj-dialog 요소 안에 slot="body" 및 slot="footer" 속성이 포함된 두 개의 div 태그를 추가합니다.

<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
<div slot="body">
  </div>
<div slot="footer">
  </div>
</oj-dialog>

생성한 div slot="footer" 요소 내에 oj-button 요소를 추가하고 on-oj-action="[[updateItemSubmit]]" 속성을 설정합니다.

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

생성한 div slot="body" 태그 안에 oj-label-value, oj-label 요소 및 inputItemID 값에 대한 oj-input-text 요소를 추가합니다.

<div slot="body">
  <oj-label-value label-edge="inside">
   <oj-label for="chatWindow" slot="label">Item ID</oj-label>
   <div slot="value" class="slot-line">
     <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
   </div>
 </oj-label-value>
</div>

oj-label-value 요소 아래에 Name, Price 및 Description 값에 대한 oj-input-text 요소를 추가합니다.

   
<div slot="body">
   . . .
   </oj-label-value>
   <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
</div>
   

사용자가 ID 값을 편집하지 않아야 하므로 단방향 바인딩을 나타내는 대괄호를 사용하여 inputItemID 값을 바인딩합니다. 중괄호를 사용하여 inputItemName 및 기타 값을 바인딩합니다. 이 중괄호는 양방향 바인딩을 나타내며 사용자가 값을 겹쳐쓸 수 있도록 허용합니다.

id="itemsList"가 있는 목록 보기 구성요소가 selectedItemChanged를 on-first-selected-item-changed 속성에 대한 값으로 지정하는지 확인합니다.
dashboard.html 파일을 저장합니다.

코드는 이 final-update-dashboard-html.txt 파일과 유사해야 합니다.
JET_Web_Application/src/css 디렉토리로 이동하여 app.css 파일을 엽니다. 파일 끝에 다음 스타일 정의를 추가합니다.
```
. . .
.no-display {
   display: none;
}

.slot-line {
   line-height: 2.4em;
}

.text-width {
   width: 100%;
   min-width: 100%;
}
```
코드는 이 final-css.txt 파일과 유사해야 합니다.

작업 2: 핸들 ViewModel에서 대화상자 열기

Oracle JET 웹 앱을 제공할 때 성공적으로 초기화하도록 뷰에서 참조하는 새 관찰 및 메소드를 선언합니다.

JET_Web_Application/src/ts/viewModels 디렉토리로 이동하여 편집기에서 dashboard.ts 파일을 엽니다.

dashboard.ts 파일 상단에서 대화상자 구성 요소 및 입력 텍스트 구성 요소에 대한 Oracle JET 모듈을 가져왔는지 확인합니다.

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

DashboardViewModel 클래스 내에서 새 활동 항목을 생성하기 위한 이전 코드 아래에 showEditDialog라는 메소드를 생성하여 대화상자를 열고 갱신할 필드의 값을 검색합니다.

. . .
public createItem = async (event: ojButtonEventMap["ojAction"]) => {
. . .
 } // end createItem

public showEditDialog = (event: ojButtonEventMap["ojAction"]) => {

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

showEditDialog 메소드 아래에 updateItemSubmit라는 메소드를 생성하여 대화상자 데이터를 제출하고 close 명령을 추가합니다.

public showEditDialog = (event: ojButtonEventMap["ojAction"]) => {

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
   (document.getElementById("editDialog") as ojDialog).close();
}  

dashboard.ts 파일을 저장합니다. 코드는 이 update-dashboard-ts.txt 파일과 유사해야 합니다.

작업 3: ViewModel에서 대화상자 입력 제출 처리

뷰의 대화상자에서 인출하는 데이터를 보유할 객체를 생성하고 인출 API 및 HTTP PUT 메소드를 사용하여 REST 서비스로 전송합니다. 마지막으로 RESTDataProvider 인스턴스에서 RESTDataProvider의 mutate 메소드를 사용합니다.

열린 dashboard.ts 파일의 DashboardViewModel 클래스에서 데이터를 제출하는 메소드에 사용할 다음 변수에 대한 유형을 선언하고 초기화합니다.

class DashboardViewModel {
   . . .
   // Fields in update dialog
   inputItemID: ko.Observable<number>;
   inputItemName: ko.Observable<string>;
   inputPrice: ko.Observable<number>;
   inputShortDesc: ko.Observable<string>; 

   //  Fields for delete button and update dialog, among others
   selectedRow = ko.observable<number>();
   . . .

   constructor() {
   . . .
      // Initialize fields in update dialog
      this.inputItemID = ko.observable();
      this.inputItemName = ko.observable();
      this.inputPrice = ko.observable();
      this.inputShortDesc = ko.observable();

   } // End constructor

close() 호출 위의 updateItemSubmit 메소드에서 [항목 세부정보 업데이트] 대화상자의 입력 값을 보유할 변수 row를 선언합니다. 또한 데이터가 선택되었는지 확인하는 if 문을 포함시키십시오.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
    const currentRow = this.selectedRow; 
         if (currentRow != null) {
            const row = {
               itemId: this.itemData().id,
               name: this.inputItemName(),
               price: this.inputPrice(),
               short_desc: this.inputShortDesc()
            };
   }; // End if statement
 (document.getElementById("editDialog") as ojDialog).close();
}  

close() 호출 위에 데이터를 REST 서비스로 보내는 요청을 생성합니다.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {

 const currentRow = this.selectedRow;

 if (currentRow != null) {

   const row = {
   	. . .
      short_desc: this.inputShortDesc()
   };

// Create and send request to update row on rest service
   const request = new Request(

     `${this.restServerURLItems}${this.itemData().id}`,
     {
       headers: new Headers({
         "Content-type": "application/json; charset=UTF-8",
       }),
       body: JSON.stringify(row),
       method: "PUT",
     }
   );
   const response = await fetch(request);
   const updatedRow = await response.json();  
 } // End if statement
 (document.getElementById("editDialog") as ojDialog).close();

}  // update-item-end

데이터를 REST 서비스로 전송하는 요청 아래에 update 메소드를 생성하고 mutate 메소드를 호출하여 RESTDataProvider 인스턴스에 데이터가 업데이트되었음을 알립니다. refresh() 메소드를 호출하여 브라우저에 표시되는 데이터를 새로 고칩니다.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {

const currentRow = this.selectedRow; 

   if (currentRow != null) {
      . . .

   };

   const request = new Request(

   `${this.restServerURLItems}${this.itemData().id}`,
      {
         . . .
      }
      );

. . . 
   const updatedRow = await response.json();
   // Create update mutate event and call mutate method
   // to notify dataprovider consumers that a row has been
   // updated
   const updatedRowKey = this.itemData().id;
   const updatedRowMetaData = { key: updatedRowKey };
   this.itemsDataProvider.mutate({
   update: {
      data: [updatedRow.items[0]],
      keys: new Set([updatedRowKey]),
      metadata: [updatedRowMetaData],
   },
   });
   this.itemsDataProvider.refresh();

   } // End if statement
   (document.getElementById("editDialog") as ojDialog).close();
}  // update-item-end

dashboard.ts 파일을 저장합니다.

코드는 이 final-update-dashboard-ts.txt 파일과 유사해야 합니다.

태스크 4: 코드 테스트 및 레코드 갱신

브라우저에서 웹 앱의 동적 변경사항을 확인합니다.
웹 앱에서 Baseball 활동을 누른 다음 SureFire Ball (Set of 4) 항목을 누릅니다.
업데이트 단추를 누릅니다.

[항목 세부정보 업데이트] 대화상자가 팝업됩니다.
가격을 20.5에서 21로 변경하고 제출을 누릅니다.

섹션이 새로 고쳐지고 항목 가격이 업데이트되었습니다.

그림 update_record.png에 대한 설명
실행 중인 웹 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.
터미널 창에서 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

추가 학습 자원

docs.oracle.com/learn에서 다른 실습을 찾아보거나 Oracle Learning YouTube channel에서 무료 학습 콘텐츠에 액세스할 수 있습니다. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer로 변경하십시오.

제품 설명서는 Oracle Help Center를 참조하십시오.

제목 및 저작권 정보

Update data records in an Oracle JET web app

F49656-01

February 2022