Oracle JET 웹 앱에서 선택 이벤트 처리

소개

Oracle JET 웹 앱의 viewModel에 있는 Oracle JavaScript Extension Toolkit(Oracle JET) API를 사용하여 Oracle JET 목록 뷰 구성요소 selected 속성 변경 리스너에 응답하는 이벤트 처리기를 생성할 수 있습니다. 사용자가 목록에서 항목을 선택하거나 선택 해제하면 변경 리스너가 이벤트 처리기를 트리거합니다. 이벤트 처리기를 사용하여 Oracle JET 데이터 제공자를 채울 수 있으며, 데이터 제공자를 바인드하여 뷰 구성 요소가 사용할 수 있는 환경을 관찰할 수 있습니다. 또한 이벤트 처리기는 Oracle JET If Binding 컴포넌트가 뷰의 중첩된 HTML 요소를 조건부로 렌더링하는 데 사용하는 부울 변수를 설정할 수 있습니다. 마스터 목록에 대한 Oracle JET 목록 뷰 구성요소의 selected 속성이 비어 있지 않으면 변수가 true로 설정되고 뷰가 데이터 바인딩 세부정보 목록을 렌더링합니다. 선택 해제 이벤트로 인해 selected 속성이 비어 있으면 변수가 false로 설정되고 뷰가 데이터 바인딩 세부정보 목록 없이 뷰에서 컨테이너를 렌더링합니다.

목표

이 사용지침서에서는 마스터-디테일 데이터를 표시할 수 있도록 Oracle JET 웹 앱의 사용자 인터페이스를 업데이트합니다. Oracle JET 속성 변경 리스너를 사용하여 JavaScript 이벤트 처리기를 생성하는 방법을 배웁니다. 또한 Oracle JET If Binding 컴포넌트를 사용하여 리스트 선택을 처리하는 세부 정보 목록을 조건부로 표시하는 방법을 배웁니다.

필요 조건

작업 1: 뷰에서 선택 동작 설정

뷰를 업데이트하여 [활동] 리스트 및 [활동 항목] 리스트에서 행 선택을 처리하도록 리스트 뷰 구성 요소를 사용자 정의합니다. Oracle JET 목록 뷰 구성 요소는 사용자 행 선택의 데이터 항목으로 구성 요소가 채워지는 first-selected-item 속성을 정의하며, 양방향 바인딩을 사용하여 관찰할 수 있습니다. 구성 요소의 on-selection-changed 속성을 사용하여 viewModel에서 정의한 이벤트 리스너를 바인딩하여 목록 선택/선택 이벤트를 포착하고 처리할 수 있습니다.

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

  2. [활동] 머리글 아래에서 id="activitiesList"의 oj-list-view 사용자정의 HTML 요소를 찾은 다음 gridlines.item 속성 뒤에 선택 동작 속성을 추가합니다.

       
<h3 id="activitiesHeader">Activities</h3>
   <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
     data="[[activityDataProvider]]" gridlines.item="visible" selection-mode="single" selected="{{selectedActivity}}"
     on-first-selected-item-changed="[[selectedActivityChanged]]" first-selected-item="{{firstSelectedActivity}}"
     scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
     <template slot="itemTemplate">
. . .

  3. 활동 항목 머리글 아래에서 oj-list-view 사용자 정의 HTML 요소를 찾습니다(id="itemsList"). 그런 다음 gridlines.item 속성 뒤에 선택 동작 속성을 추가합니다.

       
<h3 id="itemsListHeader">Activity Items</h3>
     <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader"
       gridlines.item="visible" selection-mode="single" selected="{{selectedItem}}"
       on-first-selected-item-changed="[[selectedItemChanged]]" first-selected-item="{{firstSelectedItem}}"
       scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
       <template slot="itemTemplate">
. . .

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

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

작업 2: ViewModel에서 이벤트 처리기 생성

viewModel를 업데이트하여 [작업] 목록 및 [활동 항목] 목록의 선택 항목에 응답하도록 목록 보기 구성요소의 이벤트 처리기를 추가합니다. Oracle JET 목록 뷰 구성요소는 Oracle JET 목록 뷰 API가 속성 변경 리스너를 정의하는 selected 속성을 정의합니다. 사용자가 목록을 선택하고 selected 속성 값이 변경될 때 이벤트 처리기에서 selectedActivity 및 selectedItem 관찰 기능을 설정합니다.

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

  2. pieSeriesValue 관찰 가능한 정의 아래의 constructor() 앞에 활동 목록 선택 및 활동 항목 목록 선택에 대한 관찰 항목을 추가합니다.

    class DashboardViewModel {
   . . . 
   pieSeriesValue: ko.ObservableArray;
   // Observables for Activities
   selectedActivity = new ObservableKeySet();
   activitySelected = ko.observable(false);  // Controls display of Activity Items
   firstSelectedActivity = ko.observable();
   selectedActivityIds = ko.observable();

   // Observables for Activity Items
   itemSelected = ko.observable(false);
   selectedItem = ko.observable();
   firstSelectedItem = ko.observable();

   constructor() {
   . . .

  3. dashboard.ts 파일의 맨 위에 있는 ojs/ojknockout-keyset 모듈의 ObservableKeySet 클래스와 ojs/ojlistview 모듈의 ojListView 클래스를 임포트합니다.

    import * as ko from "knockout";
. . . 
import "ojs/ojavatar";
import { ObservableKeySet } from "ojs/ojknockout-keyset";
import { ojListView } from "ojs/ojlistview";

  4. DashboardViewModel 클래스 앞에 ActivityItems 유형 별칭을 추가합니다.

    . . . 
type ActivityItems = {
   id: number;
   name: string;
   items: Array<Item>;
   short_desc: string;
   image: string;
};

class DashboardViewModel {
. . .

  5. DashboardViewModel 클래스 constructor() 메소드 선언 후 선택 및 선택 해제 이벤트를 처리하기 위한 테스트 조건이 있는 selectedActivityChanged 이벤트 처리기를 추가합니다.

    } // End of constructor function

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
   *  If no items are selected then the firstSelectedItem property  returns an object 
   *  with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list

   } else {
         // If deselection, hide list          
   }
};

    다음 단계에서 이 이벤트 처리기를 구현합니다.

  6. selectedActivityChanged 이벤트 처리기의 if 문 내에서 itemsArray 변수를 사용하여 itemsDataProvider 관찰 가능을 채운 다음 선택 이벤트에 대해 activitySelected 및 itemSelected 선택 상태 관찰 가능 항목을 true으로 설정합니다.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected, then this property firstSelectedItem 
    *  will return an object with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list
      // Hide currently-selected activity item
      this.activitySelected(false);

      let itemsArray = itemContext.items;
      this.itemsDataProvider.data = itemsArray;
      // Set List View properties
      this.activitySelected(true);
      this.itemSelected(false);
      this.selectedItem();
      this.itemData();

   } else {
         // If deselection, hide list
   }
};

  7. selectedActivityChanged 이벤트 처리기의 else 문 내에서 선택 해제 이벤트에 대해 activitySelected 및 itemSelected 선택 상태 관찰 가능 항목을 false로 설정합니다.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected then this property firstSelectedItem will return an 
    *  object with both key and data properties set to null.
   */

   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      . . .
   } 

   else {
      // If deselection, hide list
      this.activitySelected(false);
      this.itemSelected(false);
   }
};

  8. selectedActivityChanged 이벤트 처리기 뒤에 선택 및 선택 해제 이벤트를 처리하기 위한 테스트 조건이 있는 selectedItemChanged 이벤트 처리기를 추가합니다.

    
selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   . . .
};

/**
* Handle selection from Activity Items list
*/
selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

       // If selection, populate and display list
   }
   else {
   // If deselection, hide list
   }
};

    다음 단계에서 이 이벤트 처리기를 구현합니다.

  9. selectedItemChanged 이벤트 처리기의 if 문 내에서 itemData 관찰 가능을 채우고 pieSeries 배열 변수를 사용하여 pieSeriesValue 관찰 가능을 채운 다음 선택 이벤트에 대해 itemSelected 선택 상태를 true으로 설정합니다.

    selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

      // If selection, populate and display list
      this.itemData(event.detail.value.data);

      // Create variable and get attributes of the items list to set pie chart values
      let pieSeries = [
      { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
      { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
      ];
      // Update the pie chart with the data
      this.pieSeriesValue(pieSeries);

      this.itemSelected(true);

   }
   else {
   // If deselection, hide list

   }
};

  10. selectedItemChanged 이벤트 처리기의 else 문 내에서 선택 해제 이벤트에 대해 itemSelected 선택 상태를 false로 설정합니다.

    selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   if (isClicked != null) {
   . . . 
   }
   else {
   // If deselection, hide list
   this.itemSelected(false);        
   }
};

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

    파일은 final-event-dashboard-ts.txt와 유사해야 합니다.

작업 3: 뷰에서 리스트 렌더링 조건부화

Oracle JET If Binding 구성요소로 뷰를 업데이트하여 조건부로 세부정보 목록을 렌더링합니다. Oracle JET If Binding 구성요소는 해당 test 속성에서 부울 변수를 사용합니다. 하나의 If 바인딩 구성요소 내에서 작업 항목 컨테이너를 중첩하고 다른 If 바인딩 구성요소에서 품목 세부정보 컨테이너를 중첩합니다. 그런 다음 If Binding 구성 요소를 사용하여 관찰 가능 항목 activitySelected 및 itemSelected의 상태를 테스트합니다. If Binding 구성요소의 중첩된 내용은 테스트 조건이 true인 경우 렌더링됩니다. 관찰 가능이 true인 경우 목록 이벤트 처리기에 의해 설정된 데이터 바인딩 목록을 표시합니다. 다른 If Binding 구성 요소를 사용하여 관찰 가능한 항목이 false인지 테스트한 다음 사용자에게 목록을 선택하도록 요청하는 메시지가 포함된 컨테이너를 표시합니다.

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

  2. div 요소(여기서 id="parentContainer2")를 찾습니다. 위에서 test 속성이 activitySelected 관찰 가능 상태로 설정된 oj-bind-if 사용자 정의 HTML 요소의 시작 태그를 추가합니다.

    . . .
   </oj-list-view>
</div>
<oj-bind-if test="[[activitySelected()]]">
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
   <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
   <h3 id="itemsListHeader">Activity Items</h3>
. . .

    사용자가 [작업] 목록에서 작업을 선택하면 viewModel [작업 변경됨] 이벤트 처리기는 activitySelected의 값을 true로 설정합니다. 이 경우 oj-bind-if 테스트 조건이 충족되고 앱이 활동 선택에 대한 활동 항목 컨테이너를 렌더링합니다. 관찰 가능 등록 정보의 () 표기법은 관찰 가능한 객체의 인스턴스를 얻는 대신 관찰 가능한 값을 얻기 위한 Knockout 함수 규칙입니다.

  3. div 요소를 찾습니다. 여기서 id="itemDetailsContainer"은 test 속성이 itemSelected의 관찰 가능 상태로 설정된 oj-bind-if 사용자정의 HTML 요소의 시작 태그를 추가합니다.

    . . .
   </oj-list-view>
</div>
<oj-bind-if test="[[itemSelected()]]">
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .

    사용자가 [작업 항목] 목록에서 항목을 선택하면 viewModel 항목이 변경됨 이벤트 처리기에서 itemSelected을 true로 설정합니다. 이 경우 oj-bind-if 테스트 조건이 충족되고 앱이 활동 항목 선택에 대한 항목 세부정보 컨테이너를 렌더링합니다.

  4. dashboard.html 파일 아래쪽에서 닫는 </div> 태그 두 개를 위로 계산한 다음 여는 <oj-bind-if test ="[[activitySelected()]]"> 태그와 일치하도록 닫는 </oj-bind-if> 태그를 추가합니다. 하나 이상의 닫는 </div> 태그를 계산한 다음 여는 <oj-bind-if test ="[[itemSelected()]]"> 태그에 대한 닫는 </oj-bind-if> 태그를 추가합니다.

    . . . 
            </oj-chart>
            </div>
         </div>
      </oj-bind-if>
      </div>
   </oj-bind-if>
   </div>
</div>

  5. Below the closing </oj-bind-if> tag that you added, closest to the end of the file, insert an oj-bind-if test="[[!activitySelected()]]" custom HTML element that contains a div element with Oracle JET oj-flex-item oj-sm-6 flex layout helper classes.

    . . . 
            </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>

    Oracle JET oj-sm-6 helper 클래스는 Select an Activity to see Items 머리글의 컨테이너가 작은 화면 크기 및 큰 화면 크기에 대해 여섯 개의 컨테이너 열을 차지하도록 지정합니다.

    사용자가 활동을 선택할 때까지 activitySelected의 값은 false입니다. 마찬가지로 사용자가 Ctrl 키를 누르고 이미 선택된 작업을 누르면 viewModel는 이 이벤트를 선택 해제로 처리하며 Activity Changes 이벤트 처리기는 activitySelected 관찰을 false로 설정합니다. 두 경우 모두 oj-bind-if 테스트 조건은 부울 false 조건으로 충족되며 앱은 Select an Activity to see Items 머리글을 렌더링합니다.

  6. 파일에서 처음 닫는 </oj-bind-if> 태그 아래에 Oracle JET oj-flex-item oj-sm-12 oj-md-6 flex 레이아웃 도우미 클래스가 포함된 div 요소가 포함된 oj-bind-if test ="[[!itemSelected()]]" 사용자정의 HTML 요소를 추가합니다.

    . . .
                  </oj-chart>
               </div>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!itemSelected()]]">
            <div class="oj-flex-item oj-sm-12 oj-md-6">
               <p>Select an Item to see details</p>
            </div>
         </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>

    Oracle JET oj-sm-12 및 oj-md-6 도우미 클래스는 Select an Item의 컨테이너가 중간 및 큰 화면 크기에 대해 6개의 컨테이너 열을 차지하거나 작은 화면 크기에 대해 12개의 컨테이너 열을 차지하도록 지정합니다.

    사용자가 활동 항목을 선택할 때까지 itemSelected의 값은 false입니다. 마찬가지로 사용자가 Ctrl 키를 누르고 이미 선택된 활동 항목을 누르면 viewModel는 이 이벤트를 선택 해제로 처리하며 Item Changes 이벤트 처리기는 itemSelected 관찰을 false로 설정합니다. 두 경우 모두 oj-bind-if 테스트 조건은 부울 false 조건으로 충족되며 앱은 Select an Item to see details 머리글을 렌더링합니다.

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

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

작업 4: 마스터 및 세부 정보 리스트 테스트

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

    $ ojet serve

  2. 웹 브라우저에서 앱의 Baseball 작업을 누릅니다.

    작업 목록 선택은 selectedActivityChanged 이벤트 처리기를 트리거합니다. 선택한 활동에 대해 작업 항목 컨테이너가 렌더링됩니다.

    야구 활동에 대해 렌더링된 활동 항목

    그림 master_detail_list.png에 대한 설명

  3. 작업 항목 목록에서 SureCatch Baseball Glove를 누릅니다.

    작업 항목 목록 선택은 selectedItemChanged 이벤트 처리기를 트리거합니다. 선택한 항목에 대해 항목 세부정보 컨테이너를 렌더링합니다.

    야구 활동에 대해 렌더링된 활동 항목

    그림 master_detail_item.png에 대한 설명

  4. 작업 항목 목록에서 Ctrl 키를 누르고 SureCatch Baseball Glove를 눌러 선택을 해제합니다.

    작업 항목 목록 선택 해제는 selectedItemChanged 이벤트 처리기를 트리거합니다. 항목 세부정보 컨테이너는 숨겨집니다.

    SureCatch 베이스볼 글로브 선택을 해제하면 항목 세부정보가 숨겨집니다.

    그림 master_detail_list.png에 대한 설명

  5. 브라우저 크기를 조정하거나 Ctrl+Shift+I을 눌러 Chrome DevTools을 시작하고 화면 크기 에뮬레이터에서 더 작은 화면 크기(예: Pixel 5)를 선택합니다.

    컨테이너는 화면 크기에 따라 정렬됩니다.

    컨테이너가 작은 화면 크기에 맞게 재배열됩니다.

    resized_master_detail_list.png 그림에 대한 설명

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

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

작업 5: (선택 사항) 복원된 앱에서 웹 앱 실행

제공된 코드에서 완료된 Oracle JET 웹 앱을 실행하려면 다운로드한 아카이브 파일에서 앱을 복원할 수 있습니다. "스트라이핑 및 압축된" Oracle JET 앱으로 작업하려면 추출된 앱 내에서 Oracle JET 툴링, 필요한 라이브러리 및 모듈 등 프로젝트 종속성을 복원해야 합니다.

  1. jet_web_application_masterdetail_final.zip 파일을 다운로드하고 완성된 앱의 콘텐츠를 jet_web_application_masterdetail_final 폴더에 추출합니다.

  2. 터미널 창에서 jet_web_application_masterdetail_final 폴더로 이동하여 Oracle JET 웹 앱을 복원합니다.

    $ ojet restore

  3. 확인을 기다립니다.

    . . .
Success: Restore complete

    앱을 실행할 준비가 되었습니다.

  4. 웹 앱을 실행하고 브라우저에서 테스트합니다.

    $ ojet serve

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

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

추가 학습 자원

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

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