Oracle JET 웹 앱에 컨테이너 추가

소개

반응형 페이지 레이아웃은 소형 전화에서 데스크탑 모니터에 이르기까지 다양한 화면 크기에 맞게 유연하게 확장할 수 있습니다. Oracle JavaScript Extension Toolkit (JET) 가변 레이아웃에는 어떤 방향으로도 배열할 수 있는 하위 요소가 있습니다. 화면 크기가 변경되면 이러한 요소 자체가 조정되고 사용되지 않는 공간을 채우거나 축소되어 레이아웃에서 상위 또는 하위 요소가 오버플로우되지 않도록 합니다. Oracle JET 레이아웃 클래스 oj-flex 및 oj-flex-item를 사용하여 반응형 컨테이너를 생성하여 반응형 페이지 레이아웃을 설계할 수 있습니다. Oracle JET 스타일 클래스 oj-panel 및 oj-panel-bg는 테두리와 색상을 컨테이너에 추가합니다. 이러한 스타일 클래스를 사용하여 레이아웃 시각화를 지원하며 최종 앱에서 제거할 수 있습니다.

이 자습서에서 만들 웹 앱에는 두 번째 상위 컨테이너와 하위 컨테이너인 활동 컨테이너 주위의 기본 상위 컨테이너가 있는 페이지 레이아웃 구조가 있습니다. 두 번째 상위 컨테이너에는 활동 항목과 품목 상세내역 컨테이너라는 두 개의 하위 컨테이너가 있습니다.

layout-plan.png 그림에 대한 설명

상위 컨테이너는 하위 컨테이너를 포함하는 컨테이너입니다. 하지만 하위 컨테이너가 하위 컨테이너(예: 상위 컨테이너 2)를 보유하는 경우 하위 컨테이너도 상위 컨테이너일 수 있습니다.

생성할 페이지 레이아웃의 다음 그림에서 기본 div 요소는 상위 컨테이너 1을 포함합니다. 상위 컨테이너 1은 하위 컨테이너 1 및 상위 컨테이너 2 주위를 래핑합니다. 상위 컨테이너 2에는 두 개의 하위 컨테이너인 하위 컨테이너 2와 하위 컨테이너 3이 포함됩니다.

그림 responsive-layout-containers.png에 대한 설명

목표

이 자습서에서는 Oracle JET 레이아웃 및 스타일 클래스를 사용하여 페이지 레이아웃을 Oracle JET 웹 앱의 반응형 페이지 레이아웃으로 변환하는 컨테이너 및 패널을 추가합니다.

필요 조건

• JavaScript 런타임, Node.js 및 최신 Oracle JET 명령행 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
• Google Chrome 웹 브라우저가 설치되어 기본 웹 브라우저로 설정됨
• Oracle JET Developer Cookbook에 액세스
• (옵션 1) 이 시리즈의 이전 학습 경로 완료: Oracle JavaScript Extension Toolkit에서 웹 애플리케이션 개발
• (옵션 2) 이 시리즈에서 이전 학습 경로를 완료하지 않은 경우: jet_web_application_temp.zip이 다운로드됨

작업 1: Starter 앱 다운로드

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

1. jet_web_application_temp.zip의 이름을 JET_Web_Application.zip로 바꿉니다. 콘텐츠를 JET_Web_Application 폴더로 추출합니다.

2. 터미널 window에서 Oracle JET의 최신 버전을 설치했는지 확인합니다. 그렇지 않은 경우 Oracle JET 버전을 업데이트합니다.

   $ npm list -g @oracle/ojet-cli
   

   $ npm install -g @oracle/ojet-cli
   

3. JET_Web_Application 폴더로 이동하여 Oracle JET 앱을 복원합니다.

   $ ojet restore
   

   앱을 사용할 준비가 되었습니다.

작업 2: 작업 컨테이너 추가

유연한 상자 레이아웃을 추가하도록 Oracle JET 웹 앱 레이아웃을 수정합니다. 가변 레이아웃을 생성하려면 상위 div 요소에 Oracle JET oj-flex 클래스를 추가하고 oj-flex-item 클래스를 하위 div 요소에 추가합니다. 상위 컨테이너 1은 그 안에 있는 다른 모든 컨테이너를 포함하는 상위 컨테이너입니다. 하위 컨테이너 1은 첫 번째 하위 컨테이너이며 활동 목록을 포함합니다.

그림 activity-containers.png에 대한 설명

1. Oracle JET Cookbook을 열고 메뉴 모음에서 레이아웃 및 탐색을 누른 다음 가변 레이아웃 구성요소를 선택합니다. 도구 모음에서 API 문서를 누른 다음 가변을 선택합니다.

2. Flex Layout API 설명서에서 Oracle JET 레이아웃 클래스를 설명하고 oj-flex 클래스를 읽는 테이블로 스크롤합니다.

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

4. Product Information 머리글 h1 요소를 찾고 아래에서 id 속성 값 parentContainer1을 Oracle JET 컨테이너 클래스와 함께 사용하여 외부 div 요소를 추가합니다. 이 div 요소는 그 안에 있는 다른 모든 컨테이너를 포함합니다. 파일 끝에 마지막 닫는 </div> 위에 닫는 </div> 태그를 추가합니다.

   <div class="oj-hybrid-padding">
     <h1>Product Information</h1>
     <!-- Parent Container 1 contains all the panels in the app -->
     <div id="parentContainer1" class="oj-flex oj-flex-init">
       <div id="activitiesContainer">
         <h3 id="activitiesHeader">Activities</h3>
         . . .
         </oj-chart>
       </div>
     </div>
   </div>
   
   

5. Find the div element where id="activitiesContainer", before the Activities heading, and add an Oracle JET container item class.

   
   <!-- The Activities container displays the Activities list -->
   <div id="activitiesContainer" class="oj-flex-item">
     <h3 id="activitiesHeader">Activities</h3>
   

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

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

태스크 3: 품목 상세내역 컨테이너 추가

항목 세부정보 컨테이너를 추가하도록 Oracle JET 웹 앱 반응형 레이아웃을 수정합니다. 상위 컨테이너 2에는 두 개의 하위 컨테이너가 있습니다. 하위 컨테이너 2는 비어 있지만 이후 튜토리얼에는 활동 항목 리스트가 포함되어 있습니다. 하위 컨테이너 3에는 품목 상세내역 차트가 포함되어 있습니다.

그림 item-details-containers.png에 대한 설명

1. div 요소(여기서 id="itemDetailsContainer")를 찾습니다. 위에서 parentContainer2 값을 가진 id 속성과 Oracle JET 컨테이너 클래스 및 컨테이너 항목 클래스를 포함하는 외부 div 요소를 추가합니다. 두번째에서 마지막 닫는 </div> 위에 닫는 </div> 태그를 파일에 추가합니다.

   <!-- Parent Container 2 surrounds the Item Details container -->
       <div id="parentContainer2" class="oj-flex oj-flex-item">
         <div id="itemDetailsContainer">
           <h3>Item Details</h3>
           . . .
           </oj-chart>
         </div>
       </div>
     </div>
   </div>
   
   

2. Underneath the div element where id="parentContainer2", add an empty div element with an id attribute with the value activityItemsContainer, as well as an Oracle JET container item class.

   <!-- Parent Container 2 surrounds the Activity Items and Item Details child containers -->
       <div id="parentContainer2" class="oj-flex oj-flex-item">
         <div id="activityItemsContainer" class="oj-flex-item">
         </div>
         <div id="itemDetailsContainer">
           <h3>Item Details</h3>
           . . .
   

3. 마지막으로 id="itemDetailsContainer"에 있는 div 요소에 Oracle JET 컨테이너 항목 클래스를 추가합니다.

   <!-- Item Details container displays a chart upon selection -->
   <div id="itemDetailsContainer" class="oj-flex-item">
     <h3>Item Details</h3>
   

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

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

작업 4: 패널 및 패널 색상 추가

Oracle JET 스타일 클래스를 적용하여 패널 및 패널 색상을 웹 앱의 컨테이너 및 컨테이너 항목에 추가하여 레이아웃을 시각화합니다.

1. id="parentContainer1"에서 div 요소를 찾은 다음 두 개의 스타일 클래스를 추가하여 테두리와 배경색으로 패널을 지정합니다.

   <!-- The border and color for Parent Container 1 -->
   <div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
   

2. id="activitiesContainer"에서 div 요소를 찾은 다음 두 개의 스타일 클래스를 추가하여 테두리와 배경색으로 패널을 지정합니다.

   <!-- The border and color for the Activities container -->
   <div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
     <h3 id="activitiesHeader">Activities</h3>
   

3. id="parentContainer2"에서 div 요소를 찾은 다음 두 개의 스타일 클래스를 추가하여 테두리와 배경색으로 패널을 지정합니다.

   <!-- The border and color for Parent Container 2 -->
   <div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">
   

4. id="itemDetailsContainer"에서 div 요소를 찾은 다음 두 개의 스타일 클래스를 추가하여 패널과 패널 색상을 지정합니다.

   <!-- The border and color for the Item Details container -->
   <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30">
   

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

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

작업 5: 웹 앱 실행

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

   $ ojet serve
   

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

   

   그림 container-panel.png에 대한 설명

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

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

추가 학습 자원

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

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

---

제목 및 저작권 정보

Add containers to the Oracle JET web app

F53119-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.