Oracle JET 웹 구성요소 향상 및 아카이브

소개

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

이전 튜토리얼에서는 네 개의 입력 텍스트 필드를 표시하는 웹 구성요소를 작성했습니다. 이 사용지침서에서는 품목 ID 필드를 읽기 전용 필드로 변경하고, 통화 변환기를 품목 가격 필드에 추가하고, 품목 설명 필드에 길이 검증자를 추가하는 방법에 대해 알아봅니다. 이러한 필드에 값을 전달하려면 웹 앱의 HTML 소스에 있는 4개의 입력 텍스트 필드에 대한 속성을 정의합니다. 사용하는 속성에는 웹 구성요소 메타데이터 파일에 정의된 해당 속성이 있어야 합니다. 정적 값을 속성에 전달하거나 웹 앱과 웹 구성요소 간에 단방향 또는 양방향 데이터 바인딩에 대한 데이터 바인딩 표현식 구문을 사용할 수 있습니다.

목표

이 사용지침서에서는 Oracle JET 웹 앱의 추가 기능을 사용하여 웹 구성요소를 개선합니다. 또한 웹 구성 요소를 패키지화하고 다른 앱과 공유할 준비를 하는 방법을 배웁니다.

필요 조건

JavaScript 런타임, Node.js 및 최신 Oracle JET 릴리스 명령행 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
JET_Web_Component_Application 폴더에 demo-update-item 웹 구성요소를 생성하도록 이 학습 경로에 이전 자습서가 완료되었습니다.

태스크 1: 항목 ID를 읽기 전용으로 편집

웹 구성요소의 항목 ID 필드는 읽기 전용이어야 합니다. 접근성을 위해 항목 ID 필드의 oj-input-text 사용자정의 HTML 요소를 oj-label-value 사용자정의 HTML 요소로 바꿉니다. oj-label-value 요소는 oj-bind-text 요소를 사용하여 항목 ID 필드를 읽기 전용으로 수정하는 슬롯을 정의합니다.

JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-view.html 파일을 엽니다.

oj-input-text 사용자 정의 HTML 요소를 속성 value="ID number"로 찾은 다음 oj-input-text 요소를 oj-label-value 요소로 대체합니다.

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

demo-update-item-view.html 파일을 저장합니다.

demo-update-item-view.html 코드는 readonly-itemid.txt와 유사해야 합니다.
JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-viewModel.ts 파일을 엽니다.

demo-update-item-viewModel.ts 파일에서 ojs/ojinputtext 모듈을 임포트하는 항목 뒤에 ojs/ojlabelvalue 로더 모듈을 임포트합니다.

"use strict";

import * as ko from "knockout";
import componentStrings = require("ojL10n!./resources/nls/demo-update-item-strings");
import Context = require("ojs/ojcontext");
import Composite = require("ojs/ojcomposite");
import "ojs/ojknockout";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";

demo-update-item-viewModel.ts 파일을 저장합니다.
터미널 창에서 JET_Web_Component_Application 디렉토리로 변경하고 앱을 실행합니다.
```
$ ojet serve
```
웹 앱의 대시보드 탭에 4개의 입력 텍스트 필드가 있는 웹 구성요소가 표시됩니다. 이제 항목 ID 필드가 읽기 전용 필드입니다.

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

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

태스크 2: 통화 변환기 추가

품목 가격 필드에 대해 통화 변환기를 사용하십시오.

JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-view.html 파일을 엽니다.

value="Price" 속성으로 oj-input-text 사용자 정의 HTML 요소를 찾은 다음 이후 단계에서 정의할 통화 변환기를 사용하도록 업데이트합니다. 변환기에 문자열 대신 적합한 숫자가 필요하므로 value 속성에 대한 위치 표시자 값으로 Price 대신 00를 입력합니다.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
...
<oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
<oj-input-text value="00" 
               help.instruction="enter an amount with or without grouping separator"
               converter="[[currency]]" 
               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 파일을 저장합니다. demo-update-item-view.html 코드는 currency-code-html.txt와 유사해야 합니다.
JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-viewModel.ts 파일을 엽니다.

demo-update-item-viewModel.ts 파일의 맨 위에 있는 ojs/ojconverter-number 모듈에서 IntlNumberConverter를 임포트합니다.

"use strict";

import * as ko from "knockout";
. . .
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";
import { IntlNumberConverter } from "ojs/ojconverter-number";

ViewModel 클래스에서 다음 단계에서 초기화할 통화 변환기에 대한 통화 필드를 추가합니다.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
   busyResolve: (() => void);
   . . . 
   currency: IntlNumberConverter;

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {
. . .       

constructor() 메소드에서 관찰 가능한 항목 예제 뒤에 통화 변환기를 추가합니다.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

demo-update-item-viewModel.ts 파일을 저장합니다.

demo-update-item-viewModel.ts 코드는 currency-code-ts.txt와 유사해야 합니다.
웹 앱의 변경사항을 보려면 브라우저로 돌아갑니다.
품목 가격 필드에 가격을 입력하고 입력을 눌러 변경사항을 확인합니다.

그림 form-wc-currency-converter.png에 대한 설명

입력한 가격에는 USD 접두어가 표시됩니다. 숫자가 아닌 값을 입력하면 항목 가격 필드에 오류가 표시됩니다.
웹 앱을 표시하는 터미널 창과 브라우저 창 또는 탭을 열어 둡니다.

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

작업 3: 길이 검증기 추가

항목 설명 필드에 대해 길이 검증기를 사용합니다.

JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-view.html 파일을 엽니다.

value="Description" 속성으로 oj-input-text 사용자 정의 HTML 요소를 찾은 다음 이후 단계에서 정의할 길이 검증기를 사용하도록 업데이트합니다.

   
<oj-form-layout id="form-container">
...
<oj-input-text value="00" 
            help.instruction="enter an amount with or without grouping separator"
            converter="[[currency]]" 
            label-hint="Item Price">
      </oj-input-text> 
<oj-input-text
     value="{{lengthValue1}}" validators="[[validators]]"
     placeholder="Enter a description of 5-50 characters"
     label-hint="Item Description"
   ></oj-input-text>
</oj-form-layout>
   

demo-update-item-view.html 파일을 저장합니다.

demo-update-item-view.html 코드는 validator-code-html.txt와 유사해야 합니다.
JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-viewModel.ts 파일을 엽니다.

demo-update-item-viewModel.ts 파일의 맨 위에 있는 ojs/ojasyncvalidator-length 모듈에서 AsyncLengthValidator를 임포트합니다.

import * as ko from "knockout";
. . .
import { IntlNumberConverter } from "ojs/ojconverter-number";
import AsyncLengthValidator = require("ojs/ojasyncvalidator-length");

ViewModel 클래스에서 다음 단계에서 초기화할 녹아웃 관찰 품목의 필드를 추가합니다.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
 busyResolve: (() => void);
 . . . 
 currency: IntlNumberConverter;
 lengthValue1: ko.Observable<string>;
 validators: ko.ObservableArray<AsyncLengthValidator<string>>;

통화 변환기 뒤의 constructor 메소드에서 길이 검증기를 추가합니다.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

   this.lengthValue1 = ko.observable("");
   this.validators = ko.observableArray([
      new AsyncLengthValidator({ min: 5, max: 50 }),
    ]);

길이 검증기는 항목 설명 필드에 대해 최소 문자 길이 5와 최대 문자 길이 50을 정의합니다.

demo-update-item-viewModel.ts 파일을 저장합니다.

demo-update-item-viewModel.ts 코드는 final-demo-update-item-viewModel-ts.txt와 유사해야 합니다.
웹 앱의 변경사항을 보려면 브라우저로 돌아갑니다.
항목 설명 필드에 설명을 입력하고 Enter 키를 누른 다음 Tab을 눌러 도구 설명을 지웁니다.

그림 form-wc-length-validator.png에 대한 설명

설명이 설정된 범위보다 길 경우 항목 설명 필드에 오류가 표시됩니다.
웹 앱을 표시하는 터미널 창과 브라우저 창 또는 탭을 열어 둡니다.

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

작업 4: 웹 구성 요소 메타 데이터 정의

웹 구성요소 메타데이터 파일은 웹 구성요소의 필수 속성을 정의합니다. 웹 구성요소의 각 입력 텍스트 필드에는 웹 구성요소에서 업데이트를 다시 작성하는 연계된 속성이 있어야 합니다.

JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 component.json 파일을 엽니다.

displayName 및 description 메타데이터 속성을 정의합니다.

{
"name": "demo-update-item",
"version": "1.0.0",
"jetVersion": "^12.0.0",
"displayName": "demo-update-item",
"description": "A Web Component with form layout",
...
}

description 메타데이터 속성 아래에서 Camerael-case 이름 지정 규칙을 사용하여 웹 구성요소 뷰의 필드에 바인딩된 속성을 정의합니다.

"description": "A Web Component with form layout",
"properties": {
   "itemId": {
      "type": "number"
   },
   "itemName": {
      "type": "string",
      "description": "Description for the item-name attribute",
      "writeback": true
   },
   "itemPrice": {
      "type": "number",
      "writeback": true
   },
   "itemDesc": {
      "type": "string",
      "writeback": true
   }
},

writeback 등록 정보가 true로 설정되면 이러한 등록 정보가 양방향 데이터 바인딩 표현식에서 등록 정보를 참조하는 웹 구성 요소에서 업데이트를 수신하게 됩니다.

component.json 파일을 저장합니다.

component.json 코드는 component-json.txt와 유사해야 합니다.

작업 5: 속성 및 속성 값 정의

웹 구성요소 요소의 속성은 웹 구성요소 메타데이터 파일에서 선언한 속성을 참조할 수 있습니다. 웹 앱의 HTML 소스에서 속성 참조는 하이픈과 함께 대소문자를 구분하지 않는 HTML 요소 속성 이름으로 표시됩니다.

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

demo-update-item 요소에서 네 개의 입력 텍스트 필드에 대해 정적 값으로 속성을 정의합니다.

<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 item-id="34" 
                           item-name="John" 
                           item-price="3434.55" 
                           item-desc="This is an updated item">
                     </demo-update-item>
      </div>
   </div>
</div>

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

작업 6: 웹 구성 요소 뷰 정의

뷰 바인딩 컨텍스트의 $properties 변수를 사용하여 웹 구성요소의 메타데이터 파일에 정의된 모든 속성에 액세스할 수 있습니다.

JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리로 이동하여 편집기에서 demo-update-item-view.html 파일을 엽니다.

oj-form-layout 요소의 사용자 정의 HTML 요소에서 $properties 변수를 사용하여 component.json 파일에 정의된 속성에 value 속성을 바인딩합니다.

   
<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
. . .
<div slot="value">
      <oj-bind-text value="[[$properties.itemId]]"></oj-bind-text>
  </div>
</oj-label-value>  
   <oj-input-text value="{{$properties.itemName}}" label-hint="Item Name"></oj-input-text>
   <oj-input-text value="{{$properties.itemPrice}}" 
      help.instruction="enter an amount with or without grouping separator"
      ...> 
   </oj-input-text>
   <oj-input-text
      value="{{$properties.itemDesc}}"
      . . .>
   </oj-input-text>
</oj-form-layout>
   

속성 값을 정의하려면 [[]] 구문을 사용하여 단방향 데이터 바인딩 및 양방향 데이터 바인딩에 대한 {{}} 구문을 정의합니다.

demo-update-item-view.html 파일을 저장합니다.

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

브라우저는 네 개의 입력 텍스트 필드에 정적 값과 함께 웹 구성 요소를 표시합니다.
실행 중인 웹 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.
터미널 창에서 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다. 터미널 창을 닫습니다.

작업 7: 웹 구성 요소 아카이브

웹 구성요소를 구성한 후 다른 앱에 대한 웹 구성요소를 준비해야 합니다.

터미널 창을 열고 JET_Web_Component_Application 디렉토리로 변경한 다음 구성 요소 이름 demo-update-item를 명령 매개변수로 사용하여 ojet package component 명령을 실행합니다.

$ ojet package component demo-update-item

Oracle JET는 JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리의 내용을 JET_Web_Component_Application/dist 디렉토리에 생성하는 ZIP 파일(demo-update-item_1-0-0.zip)로 패키지화합니다. 패키징 작업의 일부로 Oracle JET는 JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리의 TypeScript 코드를 JavaScript 코드로 변환합니다. 예를 들어, JET_Web_Component_Application/dist/demo-update-item_1-0-0.zip 파일을 열면 JET_Web_Component_Application/src/ts/jet-composites/demo-update-item 디렉토리의 demo-update-item-viewModel.ts 파일에서 Oracle JET 도구가 변환된 demo-update-item-viewModel.js 파일이 포함되어 있습니다.

JET_Web_Component_Application/dist 디렉토리의 demo-update-item_1-0-0.zip 파일을 웹 앱에서 웹 구성요소를 재사용하려는 소비자에게 배포합니다. 웹 앱에서 웹 구성요소를 사용하려면 소비자가 ZIP 파일의 콘텐츠를 웹 앱의 demo-update-item 디렉토리로 추출합니다. 다음 튜토리얼에서는 이 후자의 작업에 대해 자세히 살펴보겠습니다.

추가 학습 자원

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

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

제목 및 저작권 정보

Enhance and archive the Oracle JET web component

F53197-01

February 2022