Oracle JET 가상 DOM 앱에서 마스터 뷰 생성

소개

이 자습서에서는 로컬 JavaScript JSON(Object Notation) 문서에서 마스터-세부정보 계층 데이터를 읽고 Oracle JET(Oracle JavaScript Extension Toolkit) 가상 DOM 앱의 목록 보기 구성요소에 데이터를 표시하는 방법에 대해 설명합니다.

Oracle JET에서는 Oracle JET API를 사용하여 데이터 제공자 객체를 생성할 수 있습니다. 객체는 JSON 문서 데이터 저장소의 상위 객체로부터 채우는 데이터 배열을 나타냅니다. Oracle JET 사용자정의 HTML 요소의 data 속성은 생성한 MutableArrayDataProvider 데이터 제공자 객체의 인스턴스를 통해 데이터에 바인드됩니다.

목표

이 자습서에서는 상위 데이터 객체의 여러 항목을 로컬 JSON 문서에 바인딩하고 작업 컨테이너 구성요소의 Oracle JET 목록 뷰 구성요소 행을 해당 데이터로 채웁니다.

필요 조건

Node.js 설치가 포함된 Oracle JET 가상 DOM 앱을 생성하도록 설정된 개발 환경입니다.
Google Chrome 웹 브라우저가 설치되고 기본 웹 브라우저로 설정됨
Oracle JET Developer Cookbook에 대한 액세스
(옵션 1) 이 시리즈의 이전 학습 경로에서 최종 자습서 완료: 다른 화면 크기에서 Oracle JET Virtual DOM 앱 테스트
(옵션 2) 이 시리즈에서 이전 학습 경로를 완료하지 않은 경우 jet-virtual-dom-app-temp.zip가 다운로드됩니다.
product_images.zip가 JET-Virtual-DOM-app/src/styles/images 디렉토리에 다운로드됩니다.

작업 1: Starter Virtual DOM 앱 다운로드

이전 학습 경로에서 생성한 앱에서 작업을 계속하려면 이 태스크를 건너뜁니다.

jet-virtual-dom-app-temp.zip의 이름을 JET-Virtual-DOM-app.zip로 바꿉니다. JET-Virtual-DOM-app 디렉토리에 내용을 추출합니다.
터미널 window에서 JET-Virtual-DOM-app 디렉토리로 이동하여 Oracle JET 앱을 복원합니다.
```
npx @oracle/ojet-cli restore
```
앱을 사용할 준비가 되었습니다.

작업 2: 제품 이미지 다운로드

jet-virtual-dom-app-temp.zip에서 시작 앱을 다운로드한 경우 이 작업을 건너뜁니다.

Oracle JET 툴링 서버 일괄 처리 작업이 터미널 창에서 실행 중인 경우 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 서버 일괄 처리 작업을 종료합니다.

서버 일괄 처리 작업은 기존 앱 파일에 대한 개정만 인식합니다. 새 파일을 만든 후 가상 DOM 앱을 다시 실행해야 합니다.
product_images.zip 파일을 JET-Virtual-DOM-app/src/styles/images 디렉토리로 다운로드합니다.
zip 파일의 내용을 images 디렉토리의 새 product_images 디렉토리로 추출합니다.

새 디렉토리의 경로는 JET-Virtual-DOM-app/src/styles/images/product_images이고, 디렉토리에는 앱에서 사용하는 이미지가 포함되어 있습니다.

작업 3: 상위 컨테이너 1에서 변경 가능한 배열 데이터 제공자 생성

Oracle JET 쿡북을 열고 쿡북 홈 페이지로 이동합니다. 프레임워크, 데이터 제공자, 변경 가능한 배열 데이터 제공자 순으로 누릅니다. 쿡북 도구 모음에서 API 문서를 누릅니다.
API 설명서에서 MutableArrayDataProvider 클래스에 대해 읽어 보십시오. 선택적 인수 keyAttributes를 사용하여 전달된 데이터 객체의 키 속성을 기반으로 MutableArrayDataProvider의 인스턴스를 생성하는 방법에 유의하십시오.
이전 학습 경로에서 아직 수행하지 않은 경우 store_data.json 파일을 JET-Virtual-DOM-app/src/components 디렉토리로 다운로드합니다.
JET-Virtual-DOM-app/src/components 디렉토리로 이동하여 편집기에서 ParentContainer1.tsx 파일을 엽니다.

파일 상단에서 MutableArrayDataProvider 클래스에 대한 import 문과 store_data.json 파일에 JSON 데이터를 추가합니다.

import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import * as storeData from "text!./store_data.json";

Activity 유형 별칭을 생성합니다.

type Activity = {
    id: number;
    name: string;
    short_desc: string;
};

MutableArrayDataProvider의 activityDataProvider 인스턴스를 생성합니다.
```
const activityDataProvider = new MutableArrayDataProvider<Activity["id"], Activity>(JSON.parse(storeData), {
    keyAttributes: "id",
});
```
MutableArrayDataProvider 클래스의 keyAttributes 속성은 상위 객체의 id 속성을 기반으로 배열을 채웁니다. id 속성은 JSON 문서의 상위 및 하위 데이터 객체에 대한 키 속성입니다.
ParentContainer1 함수에서 props를 사용하여 데이터 제공자 객체를 작업 컨테이너 구성요소로 전달하는 ActivityContainer 요소에 data 속성을 추가합니다.
```
return (
    <div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
        <ActivityContainer data={activityDataProvider} />
        <ParentContainer2 />
    </div>
    );
};
```
코드는 parent-container1-1-tsx.txt와 유사해야 합니다.

작업 4: 작업 컨테이너의 목록 뷰 구성요소 생성

활동 컨테이너 구성요소에 Oracle JET 목록 보기 구성요소를 생성하여 ParentContainer1 구성요소에서 props를 통해 전달된 데이터 제공자 객체의 각 목록 행에 대해 여러 데이터 항목을 표시합니다. 런타임 시 목록 행 데이터 항목의 콘텐츠를 인스턴스화하기 위해 목록 보기 구성요소는 HTML template 요소를 slot 속성과 함께 위치 표시자로 사용합니다.

JET-Virtual-DOM-app/src/components/Activity 디렉토리로 이동하여 편집기에서 ActivityContainer.tsx 파일을 엽니다.

Oracle JET List View 구성 요소에 대해 다음 import 문을 추가하고 파일 맨 위에 MutableArrayDataProvider 클래스를 추가합니다.

import "ojs/ojlistview";
import { ojListView } from "ojs/ojlistview";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

Props 및 Activity 유형 별칭을 생성합니다.

type Props = {
    data?: MutableArrayDataProvider<Activity["id"], Activity>;
    value?: string;
};

type Activity = {
    id: number;
    name: string;
    short_desc: string;
};

id="activitiesContainer"로 div 요소를 찾아 oj-sm-only-text-align-end helper 클래스를 삭제하여 작업 컨테이너의 콘텐츠가 재정렬되지 않도록 합니다.

각 목록 항목을 렌더링하고 span 및 div 요소를 포함하는 listItemRenderer 함수를 생성하여 List View 구성 요소의 행에 배경 이미지, 이름 및 간단한 설명을 채웁니다.

또한 가상 DOM 앱이 앱의 styles 디렉토리에서 제품 이미지를 찾을 수 있도록 image 변수를 정의합니다.

const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
    let image = item.data.image.replace("css", "styles");
    return (
    <div class="oj-flex no-wrap">
        <span
        class="demo-thumbnail oj-flex-item"
        style={"background-image:url(" + image + ")"}></span>
        <div class="demo-content oj-flex-item">
        <div>
            <strong>{item.data.name}</strong>
        </div>
        <span class="demo-metadata">{item.data.short_desc}</span>
        </div>
    </div>
    );
};

listItemRenderer 함수 아래에 다음 ListViewProps 유형 별칭과 두 개의 변수를 추가하여 목록 뷰 구성요소에 대한 격자선 및 스크롤 속성을 정의합니다.

type ListViewProps = ComponentProps<"oj-list-view">;
const gridlinesItemVisible: ListViewProps["gridlines"] = { item: "visible" };
const scrollPolicyOpts: ListViewProps["scrollPolicyOptions"] = { fetchSize: 5 };

ActivityContainer 함수 정의에 props를 추가합니다.
```
const ActivityContainer = (props: Props) => {
```

ActivityContainer 함수의 return 문 내에서 id="activitiesItems과 그 안에 있는 목록을 가진 div 요소를 삭제합니다. List View의 data 속성에서 props를 통해 데이터 제공자 객체에 액세스하는 다음 List View 구성 요소로 바꿉니다.

<h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader" 
                data={props.data} gridlines={gridlinesItemVisible} selectionMode="single" 
                scrollPolicy="loadMoreOnScroll" scrollPolicyOptions={scrollPolicyOpts}>
  </oj-list-view>

목록 보기 구성 요소 내에서 slot 속성과 함께 template 요소를 추가하여 목록의 각 항목을 렌더링합니다.
```
. . .
    <template slot="itemTemplate" render={listItemRenderer}></template>
</oj-list-view>
```
파일을 저장합니다. 코드는 activity-container-tsx-1.txt와 유사해야 합니다.

작업 5: 앱 실행 및 앱의 CSS(Cascading Style Sheet) 디버그

터미널 창에서 JET_Virtual_DOM_app 디렉토리로 이동하여 앱을 실행합니다.
```
npx @oracle/ojet-cli serve
```
Oracle JET 툴링은 로컬 웹 브라우저에서 가상 DOM 앱을 실행합니다. 여기서 Activity Container 구성요소에 대한 변경 사항을 볼 수 있습니다. 활동 이름 및 간단한 설명의 왼쪽에 표시되는 이미지는 너무 커서 부분적으로만 표시됩니다.

브라우저 크기를 조정하고 이 샘플 스크린샷과 비슷한 페이지가 표시되지 않으면 앱 이미지를 images/product_images 디렉토리로 추출했는지 확인합니다.

그림 activities_list_with_errors.png에 대한 설명
Google Chrome 브라우저에서 축구 활동에 대한 부분 이미지를 마우스 오른쪽 버튼으로 누르고 검사를 선택합니다. 브라우저는 HTML 페이지 소스를 검사할 수 있는 Chrome 개발자 도구(DevTools)를 표시합니다.
[요소] 패널에서 class="demo-thumbnail oj-flex-item"이 선택되어야 하는 span 요소입니다. [스타일] 패널에서 강조 표시된 element.style background-image 스타일을 찾습니다. jrsoccerball.jpg 이미지의 URL을 마우스 오른쪽 단추로 누르고 소스 패널에서 표시를 선택합니다.

그림 inspect_image_url.png에 대한 설명
[Chrome DevTools Sources] 패널에는 이미지가 300 x 300 픽셀로 표시되므로 크기가 너무 커서 목록 보기에 표시할 수 없습니다. 전체 크기의 이미지에서 축소판 크기의 이미지를 렌더링하려면 CSS(Cascading Style Sheets) 스타일 클래스를 정의할 수 있습니다.

그림 inspect_image_url_contents.png에 대한 설명
Chrome DevTools 창을 닫고 브라우저의 앱으로 돌아갑니다.

작업 6: CSS 수정 및 작업 목록 변경 사항 보기

JET-Virtual-DOM-app/src/styles 디렉토리로 이동하여 편집기에서 app.css 파일을 엽니다.
.demo-thumbnail 클래스 선택기의 속성을 정의합니다. 등록 정보 목록에서 background-repeat 등록 정보를 no-repeat로 설정하여 이미지를 한 번만 표시합니다.
```
.demo-thumbnail {
    border-radius: 5px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    margin-right: 10px;
}
```
ActivityContainer.tsx 파일의 listItemRenderer 함수에서 span 요소는 클래스 선택기를 참조하여 class 속성에 demo-thumbnail CSS 스타일을 설정하여 [작업] 목록 이미지의 형식을 축소판으로 지정합니다.
app.css 파일을 저장하고 닫습니다. 파일은 app-css.txt와 유사해야 합니다.
브라우저로 돌아가서 업데이트를 확인합니다.

앱이 축소판 그림 이미지와 함께 [활동] 목록을 표시합니다.

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

다음 단계

이 학습 경로의 다음 자습서로 이동하려면 여기를 클릭하십시오.

추가 학습 자원

docs.oracle.com/learn에서 다른 실습을 살펴보거나 Oracle Learning YouTube 채널에서 보다 무료 학습 컨텐츠에 접근할 수 있습니다. 또한 education.oracle.com/learning-explorer을 방문하여 Oracle Learning Explorer가 됩니다.

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

제목 및 저작권 정보

Create the master view in an Oracle JET virtual DOM app

F72825-01

December 2022