Oracle JET 웹 구성요소 생성

소개

웹 구성요소는 웹 앱에 사용자정의 HTML 요소로 포함할 수 있는 재사용 가능한 사용자 인터페이스입니다. 웹 구성요소에는 Oracle JavaScript Extension Toolkit(Oracle JET) 구성요소, 기타 웹 구성요소, HTML, JavaScript, TypeScript 및 CSS(Cascading Style Sheets)가 포함될 수 있습니다. Oracle JET 툴을 사용하여 웹 구성 요소를 생성합니다. Oracle JET 시작 템플리트를 사용하여 웹 구성 요소를 추가하기 위해 수정하는 HTML 및 JavaScript 또는 TypeScript 파일을 생성할 수 있습니다.

목표

이 자습서에서는 navdrawer 시작 템플리트를 사용하는 웹 앱에서 Oracle JET 웹 구성요소를 생성하고 구성합니다. 또한 웹 구성 요소 파일을 수정하여 네 개의 입력 텍스트 필드가 있는 Form Layout 구성 요소를 추가하는 방법을 배웁니다.

필요 조건

JavaScript 런타임, Node.js 및 최신 Oracle JET 릴리스 명령행 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
Oracle JET Developer Cookbook에 액세스

작업 1: Oracle JET 웹 앱 생성

navdrawer 시작 템플리트 및 Oracle JET 툴을 사용하여 Oracle JET 웹 구성요소를 생성할 앱 폴더를 생성합니다.

터미널 창을 관리자로 열고 navdrawer 시작 템플리트를 사용하여 JET_Web_Component_Application라는 웹 앱을 생성합니다.
```
$ ojet create JET_Web_Component_Application --template=navdrawer --typescript  
```
JET_Web_Component_Application 디렉토리로 변경하고 앱을 실행합니다.
```
$ ojet serve
```
브라우저에는 웹 앱의 [대시보드] 탭에 표시되는 기본 콘텐츠가 있는 navdrawer 시작 프로그램 템플리트가 표시됩니다.

그림 dashboard_default_message.png에 대한 설명
실행 중인 웹 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.

작업 2: Oracle JET 웹 구성 요소 생성

터미널 창에서 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.
JET_Web_Component_Application 디렉토리에 demo-update-item 웹 구성 요소를 만듭니다.
```
$ ojet create component demo-update-item
```
Oracle JET 도구는 JET_Web_Component_Application/src/ts/jet-composites 디렉토리에 demo-update-item 웹 구성 요소를 생성합니다. 웹 구성 요소 이름은 하이픈을 포함하며 웹 구성 요소에 대한 W3C 이름 지정 규칙에 필요한 소문자입니다.

작업 3: 앱에 웹 구성요소 추가

웹 앱에서 웹 구성요소를 사용하려면 웹 애플리케이션의 TypeScript 파일에 웹 구성요소 로더 모듈을 추가하고 웹 애플리케이션의 HTML 파일에 웹 구성요소 요소를 추가합니다.

JET_Web_Component_Application/src/ts/viewModels 디렉토리로 이동하여 편집기에서 dashboard.ts 파일을 엽니다.
dashboard.ts 파일의 맨 위에서 웹 구성 요소 로더 모듈을 가져옵니다.
```
import * as AccUtils from "../accUtils";
import "demo-update-item/loader";
```
dashboard.ts 파일을 저장합니다.
JET_Web_Component_Application/src/ts/views 디렉토리로 이동하여 편집기에서 dashboard.html 파일을 엽니다.

Dashboard Content Area에서 div 요소의 내용을 demo-update-item 요소로 바꿉니다.

<div class="oj-hybrid-padding">
   <h1>Dashboard Content Area</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
</div>

h1 요소를 편집하여 Update Item Details를 제목으로 표시하고 oj-header-border 클래스를 추가합니다.

<div class="oj-hybrid-padding">
   <h1 class="oj-header-border">Update Item Details</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
</div>

웹 구성 요소에 대한 선택 테두리를 표시하려면 수정한 콘텐츠 주위에 oj-panel 클래스와 함께 div를 추가합니다.

<div class="oj-hybrid-padding">
   <div class="oj-panel oj-sm-margin-2x demo-mypanel">
      <h1 class="oj-header-border">Update Item Details</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
   </div>
</div>

dashboard.html 파일을 저장합니다.
터미널 창에서 JET_Web_Component_Application 디렉토리로 변경하고 앱을 실행합니다.
```
$ ojet serve
```
브라우저에 웹 앱의 대시보드 탭에 웹 구성요소의 항목 세부정보 업데이트 패널이 표시됩니다. 패널에 테두리와 기본 메시지가 표시됩니다.

그림 update_item_details_message.png에 대한 설명
웹 앱을 표시하는 터미널 창과 브라우저 창 또는 탭을 열어 둡니다.

ojet serve 명령을 사용하면 브라우저에 즉시 반영되는 앱 코드를 변경할 수 있습니다.

작업 4: 웹 구성 요소에 Form 추가

네 개의 입력 텍스트 필드가 있는 양식을 표시하도록 웹 구성요소를 구성합니다. 웹 구성요소 TypeScript 및 HTML 파일을 수정하여 양식 레이아웃 구성요소를 추가합니다.

Oracle JET Cookbook을 열고 Cookbook 홈 페이지로 이동한 다음 메뉴 모음에서 Forms를 누르고 Form Layout 구성 요소를 선택합니다. 양식에서 레이블 및 필드의 레이아웃을 관리하는 방법에 대해 알아봅니다.
JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-view.html 파일을 엽니다.

demo-update-item-view.html 파일의 내용을 항목 세부정보 업데이트 패널에 표시할 Oracle JET 양식 레이아웃 구성요소 4개와 Oracle JET 입력 텍스트 필드 4개로 바꿉니다.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
   <oj-input-text value="ID number" label-hint="Item ID"></oj-input-text>
   <oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
   <oj-input-text value="Price" label-hint="Item Price"></oj-input-text>
   <oj-input-text value="Description" label-hint="Item Description"></oj-input-text>
</oj-form-layout>

demo-update-item-view.html 파일을 저장합니다.
JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리에서 편집기에서 demo-update-item-viewModel.ts 파일을 엽니다.

ViewModel 클래스에서 createMediaQueryObservable() 메소드와 함께 ResponsiveKnockoutUtils 유틸리티를 사용하여 화면 너비에 따라 관찰 가능한 항목을 만드는 Knockout 관찰 가능 isSmall을 추가합니다.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
   busyResolve: (() => void);      
   . . .
   res: { [key: string]: string };
   smallQuery = ResponsiveUtils.getFrameworkQuery( ResponsiveUtils.FRAMEWORK_QUERY_KEY.SM_ONLY);
   isSmall: ko.Observable = ResponsiveKnockoutUtils.createMediaQueryObservable(this.smallQuery);

화면 크기가 작으면 top를 반환하고 그렇지 않으면 start를 반환하는 녹아웃 계산 관찰 가능 매개변수를 추가합니다.

. . .
isSmall: ko.Observable = ResponsiveKnockoutUtils.createMediaQueryObservable(this.smallQuery);

// For small screens: labels on top
// For medium or bigger: labels at the start
labelEdge: ko.Computed = ko.computed(() => {
  return this.isSmall() ? "top" : "start";

}, this);
. . . 

demo-update-item-viewModel.ts 파일의 맨 위에서 이전 단계에서 추가한 코드를 실행하는 데 필요한 다음 모듈을 임포트합니다.

"use strict";
. . .
import "ojs/ojknockout";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import "ojs/ojformlayout";
import "ojs/ojinputtext";


. . . 

demo-update-item-viewModel.ts 파일을 저장합니다. demo-update-item-viewModel.ts 코드는 demo-update-item-viewModel-ts.txt와 유사해야 합니다.
웹 앱의 변경사항을 보려면 브라우저로 돌아갑니다.

브라우저에는 웹 앱의 [대시보드] 탭에 네 개의 입력 텍스트 필드가 있는 웹 구성요소가 표시됩니다.

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

추가 학습 자원

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

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

제목 및 저작권 정보

Create an Oracle JET web component

F53183-01

February 2022