데이터가 Oracle JET 웹 앱에서 구성요소를 바인딩합니다.

소개

이 사용지침서에서는 Oracle JET(Oracle JavaScript Extension Toolkit) 웹 앱에서 로컬 JSON 문서를 사용하는 방법을 보여줍니다.

Oracle JET는 다양한 소스의 데이터를 관리할 수 있는 많은 데이터 제공자 클래스를 제공하는 개발 툴킷입니다. viewModel에서 JSON 파일에서 읽은 데이터로 MutableArrayDataProvider 인스턴스를 채운 다음 MutableArrayDataProvider 인스턴스를 뷰의 Oracle JET 사용자정의 HTML 요소에 바인딩합니다.

목표

이 사용지침서가 끝나면 JSON 문서의 데이터를 데이터 제공자로 읽고, Oracle JET List View 구성요소를 추가하고, 데이터를 JSON 데이터 객체에 바인딩하는 방법을 배울 수 있습니다.

필요 조건

작업 1: JSON 문서 다운로드 및 데이터 검사

  1. store_data.json 파일을 JET_Web_Application/src/ts/ 디렉토리로 다운로드합니다.
  2. 웹 브라우저에서 store_data.json 파일을 열고 데이터 구조를 확인합니다. store_data.json 파일에는 활동 객체 및 해당 등록 정보 목록이 포함되어 있습니다. 각 작업에는 고유한 속성을 가진 항목 배열이 포함됩니다.

작업 2: ViewModel에서 데이터 제공자 채우기

JSON 파일의 데이터를 Oracle JET ojmutablearraydataprovider 객체로 푸시합니다.

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

  2. ViewModel에서 사용할 수 있도록 store_data.json 파일에서 데이터를 가져옵니다.

    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";

  3. 없는 경우 JSON 데이터를 보유하는 데 사용할 ojmutablearraydataprovider 모듈을 임포트합니다.

    import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

  4. DashboardViewModel() 클래스 앞에 number 유형의 id 필드가 포함된 유형 alias Activity을 정의합니다.

    ...
type Activity = {
  id: number;
}

class DashboardViewModel {

  5. DashboardViewModel() 클래스에서 다음 단계에서 생성할 activityDataProvider의 유형을 추가합니다.

    class DashboardViewModel {

   val: ko.Observable<string>;
   . . .
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   chartData: Array<Object>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;    
   . . .

  6. DashboardViewModel() 클래스의 constructror 메소드에서 MutableArrayDataProvider(activityDataProvider) 인스턴스를 생성하고 JSON.parse 메소드를 사용하여 JSON 데이터를 읽습니다.

    constructor() {
   this.val = ko.observable("pie");
   ...

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

  7. Oracle JET 목록 뷰 구성요소 모듈을 임포트합니다.

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

    ojlistview 모듈은 이 자습서의 다음 섹션에서 뷰를 지원합니다.

  8. dashboard.ts 파일을 저장합니다. dashboard.ts 파일은 final-data-bind-dashboard-ts.txt와 유사해야 합니다.

작업 3: Data Bind the List View Component in the View

oj-list-view 요소는 HTML 목록의 향상된 버전인 대화식 기능이 있는 Oracle JET 사용자정의 HTML 요소입니다. viewModel에 채워진 activityDataProvider 변수를 목록 뷰의 data 속성에 바인딩하여 목록에 데이터를 제공합니다.

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

  2. dashboard.html 파일에서 id 속성 값이 activitiesContainer인 div 요소를 Oracle JET Select Single 및 Chart 구성 요소가 포함된 itemDetailsContainer div 요소 위에 추가합니다.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      ...
   </div>

  3. activitiesContainer div 요소 내에서 단방향 바인딩을 사용하여 목록 데이터를 가져오는 data 속성이 포함된 oj-list-view 요소를 추가합니다.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
 <div id="activitiesContainer">
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
   </oj-list-view>
 </div>

    또한 목록의 항목 사이에 그리드 선이 나타나도록 gridlines 속성에 대한 visible 값을 지정하고 aria-labelledby 속성을 접근성 모범 사례로 지정합니다.

  4. 생성한 oj-list-view 요소 내에서 slot 속성을 가진 HTML template 요소를 추가하여 목록의 각 항목을 렌더링합니다.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
         </template>
   </oj-list-view>
</div>

  5. 템플리트 요소 내에서 단방향 바인딩을 사용하여 현재 데이터 객체에서 목록 데이터를 가져오는 value 속성이 포함된 oj-bind-text 사용자 정의 HTML 요소를 포함하는 다른 div 요소를 추가합니다.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
            <div>
               <strong>
                  <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
               </strong>
            </div>
         </template>
   </oj-list-view>
</div>

  6. 활동 목록에 대한 헤더를 제공하는 HTML h3 요소를 추가합니다.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
. . .

  7. itemDetailsContainer div에서 h3 요소와 oj-label 요소를 추가하여 차트의 헤더를 제공합니다.

    . . .
<div id="itemDetailsContainer">
  <h3>Item Details</h3>
    <oj-label for="basicSelect">Select Chart:</oj-label>
. . .

  8. dashboard.html 파일을 저장합니다. dashboard.html 파일은 final-data-bind-dashboard-html.txt와 유사해야 합니다.

작업 4: 웹 앱 실행

  1. 터미널 창에서 JET_Web_Application 디렉토리로 변경하고 앱을 실행합니다.

    $ ojet serve

    브라우저에 웹 앱의 대시보드 탭에 표시되는 작업 목록이 표시됩니다.

    제품 정보 영역입니다.

    그림 output.png에 대한 설명

  2. 실행 중인 웹 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.

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

  4. 다음 튜토리얼을 위해 터미널 창을 열어 둡니다.

추가 학습 자원

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

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