Oracle JET 웹 앱에서 콘텐츠 표시 또는 숨기기

소개

Oracle JET oj-module 구성 요소와 JavaScript 응답 유틸리티 클래스는 화면 크기에 따라 여러 가지 뷰를 로드할 수 있습니다. oj-module 구성 요소를 사용하면 뷰 및 해당 viewModel를 요소에 바인딩하여 페이지 영역 내에서 컨텐트를 바꿀 수 있습니다.

목표

이 자습서가 완료되면 Oracle JET oj-module 구성 요소와 반응형 TypeScript 코드를 사용하여 뷰를 바인드할 Oracle JET 웹 앱과 해당 viewModel을 사용자정의했습니다.

필요 조건

작업 1: 뷰에 모듈 구성 요소 추가

구성 객체를 사용하여 Oracle JET oj-module 구성 요소에서 뷰 및 해당 viewModel를 정의합니다.

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

  2. id="activityItemsContainer"를 사용하여 div 요소를 찾습니다. 빈 div 내에서 oj-module 사용자정의 HTML 요소를 둘러싼 div 컨테이너를 탐색 영역을 정의하는 config 속성으로 추가합니다.

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

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

    코드는 final-dashboard-html.txt와 유사해야 합니다.

작업 2: ViewModel에서 가져온 모듈 목록 업데이트

dashboard.ts 파일의 맨 위에서 Oracle JET 구성 요소를 지원하는 모듈을 가져옵니다.

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

  2. ojlistview 모듈 뒤에 세 개의 JET 반응형 HTML 유틸리티 모듈과 ojmodule-element 모듈을 추가합니다.

    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 * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import * as HtmlUtils from "ojs/ojhtmlutils";
import "ojs/ojmodule-element";

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

    가져오기 블록은 import-block-ts.txt와 유사해야 합니다.

작업 3: ViewModel에서 반응형 로드에 대한 코드 추가

반응형 레이아웃에서 다양한 화면 크기에 대해 서로 다른 콘텐츠를 로드하려고 합니다. oj-module를 사용하면 관찰 가능한 매체 질의 또는 사용자 정의 매체 질의를 사용하여 다른 뷰를 로드할 수 있습니다.

  1. Oracle JET Cookbook을 열고 Cookbook 홈 페이지로 이동합니다. 메뉴 모음에서 프레임워크를 누른 다음 반응형 동작을 누르고 반응형 로드를 누릅니다.

  2. ResponsiveUtils 이름 공간에 대한 API 설명서에 액세스할 수 있습니다. 그런 다음 Methods 섹션으로 이동하여 getFrameworkQuery 메소드를 읽습니다.

  3. dashboard.ts 파일의 chartDataProvider 선언 아래에서 인라인 템플리트 코드 블록을 추가하여 oj-module 사용자정의 HTML 요소로 전달합니다.

    this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
      keyAttributes: "id",
});

// Define the oj-module inline template for Activity Items list
const lg_xl_view =
      '<h3 id="activityItemsHeader">Activity Items</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityItemsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>Air-Lift Tire Pump</p>" +
      "<p>Intact Bike Helmet</p>" +
      "<p>Nimbus Bike Tire</p>" +
      "<p>Refill Water Bottle</p>" +
      "<p>Swift Boys 21 Speed</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>";

    대형 화면 및 큰 화면의 인라인 데이터 노드는 lg_xl_view 변수를 통해 전달됩니다.

  4. lg_xl_view 변수의 정의 아래에 sm_md_view 변수를 통해 작은 화면과 중간 화면에 대한 인라인 데이터 노드를 전달하는 코드를 정의합니다.

    // Display this content for small and medium screen sizes
const sm_md_view =
      '<div id="sm_md" style="background-color:lightcyan; padding: 10px; font-size: 10px">' +
      '<h3 id="activityDetailsHeader">Activity Details</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityDetailsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>" +
      "</div>";

  5. Below the definition of the sm_md_view variable, define the code to load the view for different screen sizes by using a this.large media query observable.

    // Identify the screen size and display the content for that screen size
const lgQuery = ResponsiveUtils.getFrameworkQuery(
   ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP
);

this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
this.moduleConfig = ko.pureComputed(() => {
   let viewNodes = HtmlUtils.stringToNodeArray(
   this.large() ? lg_xl_view : sm_md_view
   );
   return { view: viewNodes };
});

/**
 * End of oj-module code
 */

    HTML 유틸리티 함수를 사용하여 this.large 변수에서 프레임워크 매체 질의 문자열을 가져올 수 있습니다. this.large()의 매체 질의 문자열 값이 LG_UP 이상인 경우 lg_xl_view 변수의 HTML 코드가 로드됩니다. this.large()의 매체 질의 문자열 값이 LG_UP와 같지 않은 경우 sm_md_view 변수의 HTML 코드가 로드됩니다.

  6. large 및 moduleConfig에 대한 유형 선언을 클래스에 추가합니다.

    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>;
   large: ko.Observable<boolean>;
   moduleConfig: ko.PureComputed<any>;

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

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

작업 4: 웹 앱 실행

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

    $ ojet serve

    Oracle JET 툴은 대시보드 콘텐츠를 볼 수 있는 로컬 웹 브라우저에서 웹 앱을 실행합니다.

    최종 앱의 룩앤필

    final-app.png 그림에 대한 설명

    sm_md_view 변수에 내용을 표시하려면 화면을 작은 크기 또는 중간 크기로 조정합니다. [활동 세부 사항] 머리글 아래에 있는 항목의 짧은 목록은 밝은 하늘색으로 강조 표시됩니다.

    작은 화면 및 중간 화면 크기에 대한 내용

    그림 small-screen.png에 대한 설명

    lg_xl_view 변수에 내용을 표시하려면 화면 크기를 크게 또는 크게 변경합니다.

    크고 큰 화면 크기에 대한 내용

    large-screen.png 그림에 대한 설명

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

  3. 브라우저 창 또는 탭을 닫습니다.

  4. 반응형 설계 기능이 있는 완성된 앱은 jet_web_application_responsive_design_final.zip과 유사해야 합니다.

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

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

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

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

    $ ojet restore

  3. 확인을 기다립니다.

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