Oracle JET 웹 앱에서 세부정보 뷰 생성

소개

Oracle JET(Oracle JavaScript Extension Toolkit) 구성요소는 데이터 소스에 정의된 마스터 및 세부정보 데이터 객체의 계층 관계를 유지합니다. Oracle JET 웹 앱의 viewModel에서 Oracle JET API를 사용하여 데이터 제공자 객체를 생성할 수 있습니다. 객체는 JSON(JavaScript Object Notation) 문서 데이터 저장소의 하위 데이터 객체에서 채우는 데이터 배열을 나타냅니다. Oracle JET 데이터 제공자는 현재 상위 데이터 객체의 id 키 속성을 기반으로 하위 데이터 객체를 인출합니다. Oracle JET 웹 앱 뷰에서 Oracle JET 목록 뷰 구성요소의 data 속성이 Knockout 관찰을 통해 데이터 제공자에 바인딩됩니다. Knockout 관찰 가능은 앱의 viewModel 소스 코드에도 선언됩니다. 이 코드는 상세 목록 데이터 제공자의 인스턴스로 관찰 가능을 채웁니다.

목표

이 사용지침서에서는 로컬 JSON 문서에서 마스터-디테일 계층 데이터를 읽고 Oracle JET 웹 앱에 세부정보 뷰를 표시합니다. 하위 데이터 객체의 데이터 바인드 항목을 사용하여 Oracle JET List View 구성 요소, 여러 Oracle JET 입력 텍스트 구성 요소 및 Oracle JET 차트 구성 요소를 채우는 방법을 배울 수 있습니다.

필요 조건

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

태스크 1: 데이터의 뷰에 활동 항목 세부정보 목록 바인드

정적 데이터에 바인딩된 활동 항목 목록을 활동 항목 하위 객체의 여러 데이터 항목에 바인딩된 Oracle JET 목록 보기 구성요소로 바꿉니다.

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

div 요소(id="container")를 찾은 다음 이 요소 및 포함된 oj-module 사용자 정의 요소를 삭제합니다.

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
    <div id="container">
      <oj-module config="[[moduleConfig]]"></oj-module>
    </div>
  </div>

<!-- Delete the div element with id="container" so that your code is similar to the following: -->

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">

  </div>
  . . . 

div 요소(id="activityItemsContainer") 내에서 활동 항목 세부정보 목록에 대한 h3 머리글 요소를 추가합니다.

<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <h3 id="itemsListHeader">Activity Items</h3>
</div>

생성한 h3 요소의 닫기 태그 뒤에 oj-list-view 사용자정의 HTML 요소를 추가하여 활동 항목 세부정보 목록을 표시하고 slot 속성을 가진 template 요소를 세부정보 목록의 콘텐츠에 적용합니다.
```
 <h3 id="itemsListHeader">Activity Items</h3>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
     <template slot="itemTemplate">

     </template>
   </oj-list-view>
```
slot 속성을 위치 표시자로 사용하여 인라인 HTML template 요소에 사용되는 Oracle JET 목록 뷰 구성요소는 런타임 시 활동 항목 세부정보 목록의 콘텐츠를 인스턴스화합니다.
생성한 template 요소 내에서 세 개의 div 요소를 코드와 함께 추가하여 각 Activity Items 하위 객체에 대한 이미지 및 이름 데이터 항목을 바인딩합니다.
```
<template slot="itemTemplate">
  <div class="oj-flex no-wrap">
    <span class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
    <div class="demo-content oj-flex-item">
      <div>
        <strong>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
        </strong>
      </div>
    </div>
  </div>
</template>
```
$current.data.image 및 $current.data.name 코드는 데이터를 바인딩하고 HTML template 요소는 활동 항목 세부정보 목록의 이미지 및 활동 항목 이름을 표시합니다. $current 접두어는 Oracle JET 목록 뷰 구성요소의 데이터 제공자가 템플리트에 전달하는 현재 하위 객체를 나타냅니다.
dashboard.html 파일을 저장하고 편집기에서 열어 둡니다.

파일은 detail-list-task1-dashboard-html.txt과 유사해야 합니다.

작업 2: ViewModel에서 활동 항목 하위 객체 생성

이전 학습 경로에서 생성한 oj-module 인라인 템플리트를 대체하여 활동 항목 목록을 로컬 JSON 문서에서 활동 항목 하위 객체를 읽기 위한 JSON 문서 호출로 표시합니다. itemsDataProvider에서 JSON 문서에 정의된 하위 객체 배열을 나타내는 Oracle JET MutableArrayDataProvider 클래스의 인스턴스를 생성합니다. 그런 다음 itemsArray 인스턴스를 itemsDataProvider 관찰 가능한 인스턴스에 바인드합니다. 뷰의 Oracle JET 목록 뷰 구성요소는 data 속성에서 이 관찰 가능한 항목을 참조하여 활동 항목 세부정보 목록을 표시합니다.

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

dashboard.ts 파일의 맨 위에서 Activity의 유형 선언 뒤에 다음 Item 유형을 선언합니다.

type Activity = {
   id: number;
};

type Item = {
   id: number;
   name: string;
   short_desc: string;
   price: number;
   quantity: number;
   quantity_shipped: number;
   quantity_instock: number;
   activity_id: number;
   image: string;
};
. . . 

this.chartTypes 선언까지 const lg_xl_view 선언에서 코드를 삭제합니다. 코드 블록은 End of oj-module code을 읽는 주석 행으로 끝납니다. JSON 문서 호출이 정적 데이터 및 인라인 템플리트 코드를 대체합니다.

파일은 detail-list-task2a-dashboard-ts.txt과 유사해야 합니다.
dashboard.ts 상단의 모듈 임포트에서 사용되지 않는 HtmlUtils, ResponsiveUtils, ResponsiveKnockoutUtils 및 ojmodule-element 임포트 명령문을 삭제합니다.

ojs/ojavatar 모듈의 import 문을 임포트 목록에 추가합니다. ojavatar 모듈은 이 자습서의 다음 섹션에서 뷰를 지원합니다.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import "ojs/ojavatar";

this.activityDataProvider 정의 뒤에 constructor 함수 내에서 activitiesArray 및 itemsArray에 대한 정의를 추가합니다. 그런 다음 this.itemsDataProvider를 MutableArrayDataProvider의 인스턴스로 선언합니다. 이렇게 하면 저장소 데이터가 구문 분석되고 Oracle JET 목록 뷰 구성요소에서 첫 번째 활동 상위 객체의 하위 객체를 사용할 수 있습니다. 다음 자습서에서는 이벤트 처리기를 사용하여 Activity 객체를 동적으로 설정합니다.

. . . 
let activitiesArray = JSON.parse(storeData);
let itemsArray = activitiesArray[0].items;

this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
  itemsArray,
  { keyAttributes: "id" }
  );

} // closing bracket of constructor function
. . . 

그런 다음 large 및 moduleConfig에 대한 사용되지 않은 유형 주석을 제거하고 itemsArray 및 itemsDataProvider에 대한 유형 주석을 추가합니다.

class DashboardViewModel {
    chartTypes: Array<Object>;
    chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
    chartData: Array<Object>;
    chartDataProvider: MutableArrayDataProvider<string, {}>;
    activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
    val: ko.Observable<string>;
    itemsArray: Array<Object>;
    itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

파일은 detail-list-task2b-dashboard-ts.txt과 유사해야 합니다.

작업 3: 웹 앱 실행

ojet serve 명령을 사용하면 웹 브라우저에 즉시 반영되는 앱 코드를 변경할 수 있습니다.

터미널 창에서 JET_Web_Application 디렉토리로 변경하고 앱을 실행합니다.
```
$ ojet serve
```
대시보드 탭의 웹 브라우저에는 작업 항목 헤더가 있는 데이터 바인딩 세부정보 목록이 표시됩니다.

formatted_master_detail_list.png에 대한 설명
웹 앱을 표시하는 브라우저와 터미널 창을 열어 둡니다.

작업 4: 뷰의 데이터 바인드 항목 세부정보 및 파이 차트

품목 상세내역 파이 및 막대 차트를 다음 요소로 대체합니다.

활동 항목 하위 객체의 항목 이미지에 바인딩된 Oracle JET 아바타 구성요소
해당 활동 항목 하위 객체의 데이터 항목에 바인딩된 여러 Oracle JET 텍스트 필드 구성요소
동일한 활동 항목 하위 객체의 차트 데이터 항목에 바인딩된 파이 차트 구성요소

dashboard.html 파일의 div 요소(id="itemDetailsContainer")에서 Item Details 머리글을 찾습니다. 머리글 아래에서 가로 규칙을 추가하고 활동 항목 하위 객체의 이미지 데이터 항목에 바인드된 oj-avatar 사용자 정의 HTML 요소를 추가합니다.
```
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
  <h3>Item Details</h3>
  <hr class="hr-margin" />
  <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
    :src="[[itemData().image]]" class="float-right">
  </oj-avatar>
```
itemData 관찰 가능한 값은 앱 viewModel에서 생성한 데이터 제공자 인스턴스를 사용하여 Oracle JET Avatar 구성요소를 채웁니다. itemData().image 함수는 데이터 항목의 현재 값을 읽기 위한 Knockout 관찰 가능 표기법입니다. 데이터 항목은 활동 항목 하위 객체의 image 속성으로 식별됩니다.
dashboard.html에서 생성한 oj-avatar 요소의 닫기 태그 아래에 있는 oj-label for="basicSelect" 사용자정의 HTML 요소와 oj-select-single 요소를 삭제합니다.
생성한 oj-avatar 요소의 닫기 태그 아래에 oj-bind-text 사용자정의 HTML 요소가 있고 활동 항목 하위 객체의 이름, 간단한 설명, 가격 및 ID 데이터 항목에 바인딩된 네 개의 div 요소를 추가합니다.
```
. . . 
</oj-avatar>
  <div id="itemName" class="data-name">
    <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
  </div>
  <div id="itemDesc" class="data-desc">
    <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
  </div>
  <div id="itemPrice">
    <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
  </div>
  <div id="itemId">
    <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
  </div>
. . . 
```
itemData 관찰자는 앱 viewModel에서 생성한 데이터 제공자를 사용하여 Oracle JET 텍스트 바인딩 구성요소를 채웁니다. itemData().<prop_name> 함수는 명명된 데이터 항목의 현재 값을 읽습니다. 데이터 항목은 활동 항목 하위 객체의 name, short_desc, price 및 id 속성으로 식별됩니다.

JET_Web_Application/src/css 디렉토리로 이동하고 app.css 파일을 열어 다음 스타일 정의를 추가합니다.

.hr-margin {
  margin-top: 12px;
}

.data-name {
  font-size: 20px;
  font-weight: bolder;
}

.data-desc {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

파일은 app-css-final.txt와 유사해야 합니다.

생성한 div 요소 아래에서 oj-chart id="barChart" 사용자 정의 HTML 요소를 삭제합니다.

div id="itemId" 요소의 닫기 </div> 태그 뒤에 새 div 요소와 작업 항목 하위 객체에 대한 파이 차트 계열에 바인딩된 oj-chart 사용자정의 HTML 요소를 추가합니다.

. . . 
<div id="itemId">
  <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
</div>
<div>
  <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
    animation-on-data-change="auto"
    hover-behavior="dim" legend.position="bottom" class="chartStyle">
  </oj-chart>
</div>
. . . 

pieSeriesValue 관찰 가능한 값은 앱 viewModel에서 생성한 데이터 배열을 사용하여 Oracle JET 파이 차트 구성요소를 채웁니다.

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

파일은 final-detail-list-dashboard-html.txt와 유사해야 합니다.

작업 5: ViewModel에서 품목 상세내역 및 파이 차트 구성요소에 대한 관찰 품목 설정

활동 항목 하위 객체에서 데이터 항목을 가져오고 관찰 항목을 데이터 바인드 뷰 구성 요소에 채웁니다. 뷰에서 다양한 항목 세부정보 구성요소의 value 속성은 itemData 관찰 가능을 참조합니다. 파이 차트 구성요소의 series 속성은 동일한 데이터 항목의 차트 데이터에 가려지는 pieSeriesValue을 참조합니다.

dashboard.ts 파일에서 this.val로 시작하고 this.chartTypesDP로 끝나는 코드 블록을 삭제합니다. 또한 제거된 변수에 대해 사용되지 않은 유형 주석을 삭제합니다. 유형 주석 목록 및 constructor() 함수의 시작 부분은 다음 예와 비슷해야 합니다.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

  constructor() {
    this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
    >(JSON.parse(storeData), {
      keyAttributes: "id",
    });
. . . 

itemData 및 pieSeriesValue 유형 annotation을 DashboardViewModel 클래스에 추가합니다.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
  itemData: ko.Observable<any>;
  pieSeriesValue: ko.ObservableArray;

  constructor() {
. . . 

this.itemsDataProvider 문 다음에 첫번째 Activity 상위 객체 및 JSON 문서의 해당 작업과 연관된 첫번째 Activity Item 하위 객체에 대한 참조와 함께 itemData를 설정합니다.

  this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
    itemsArray,
    { keyAttributes: "id" }
  );

  this.itemData = ko.observable(''); 
  this.itemData(activitiesArray[0].items[0]);

}   // End of constructor function

마지막으로 itemData 관찰 가능한 선언 아래에서 this.pieSeriesValue 관찰 가능 선언을 설정합니다.

this.itemData = ko.observable(''); 
this.itemData(activitiesArray[0].items[0]);

this.pieSeriesValue = ko.observableArray([]);

let pieSeries = [
  { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
  { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
];
this.pieSeriesValue(pieSeries);

작업 6: 마스터 및 디테일 목록 보기

웹 앱의 변경사항을 보려면 브라우저로 돌아갑니다.

웹 앱의 대시보드 탭에서 데이터 바운드 Oracle JET 텍스트 필드, 아바타 및 파이 차트가 항목 세부정보 컨테이너에 표시되지만 목록은 선택에 응답하지 않습니다. 다음 자습서에서 생성하는 이벤트 핸들러는 선택 기능을 추가합니다.

formatted_master_detail_items_list.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를 참조하십시오.

제목 및 저작권 정보

Create the detail view in an Oracle JET web app

F53163-01

February 2022