사용 안내서 취소

사용자 정의 구성 요소 만들기: 예제

검색

마지막 업데이트 날짜 2023년 5월 24일

이 문서에서 샘플 HTML5 사용자 정의 구성 요소에 대해 알아보십시오.

이 문서는 사용자 정의 구성 요소를 만드는 방법에 대해 설명합니다. 첫 번째 예제에서는 개발과 관련된 프레임워크 및 단계를 이해하기 위한 이미지 구성 요소(Animate와 함께 제공) 및 프로세스에 대해 설명합니다. 두 번째 예제에서는 기존 UI 구성 요소(jQueryUI 등)를 래핑하여 Animate 안으로 가져오는 방법에 대해 설명합니다.

DOM 이미지 구성 요소 만들기

My Components라는 범주를 만듭니다.

a. 처음 실행할 때 <HTML5Components> 폴더 아래에 mycomponents라는 폴더를 만듭니다.

b. 첨부된 myimage.zip 파일을 다운로드하고

mycomponents 폴더 아래에 컨텐츠를 압축 해제합니다.

다운로드

파일 받기
myimage.zip 파일을 다운로드하려면 여기를 클릭하십시오.

c. Animate를 다시 시작합니다.

구성 요소 폴더에 “My Components”라는 새 범주 그리고 그 안에 My Image라는 새 구성 요소가 보일 것입니다. 이 구성 요소를 스테이지로 드래그 앤 드롭하고, 이미지 소스 속성을 설정하고, 동영상을 제작하여 사용자 정의 구성 요소가 어떻게 사용되는지를 볼 수 있습니다.

구성 요소 메타데이터 - components.js

범주는 CATEGORY_MY_COMPONENTS로 설정되어 있습니다. 각 속성의 이름도 비슷한 키를 사용하고 있습니다. 이것은 범주 이름에 대해 지역화된 문자열의 키입니다. 로케일 폴더에서 strings.json을 열면 다음과 같은 항목이 보입니다.

이 파일을 편집할 때의 가장 흔한 오류는 배열에 있는 마지막 요소의 뒤에 불필요한 쉼표를 두는 것입니다.

아이콘 필드의 값은 Sp_Image_Sm으로 설정됩니다. 에셋 폴더로 이동하면 그 아래에 Sp_Image_Sm 접두사가 붙은 두 개의 png가 있을 것입니다.

어두운 UI 및 밝은 UI에 대한 아이콘입니다.

components.json에 있는 ‘소스’ 필드의 값이 ‘src/myimage.js’로 설정됩니다.

(function($) {    

// 구성 요소를 className: my.Image로 등록하고,
 // 다음 오버라이드로 프로토타입 설정 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// 접두사 이미지가 있는 고유 ID 반환
  // _widgetID는 위젯에서 선언하는 글로벌 변수
  // 이 ID는 사용자가 Animate의 구성 요소에 대한 인스턴스 ID를 설정하지 않았을 때만 사용
  // 그 외의 경우 사용자가 구성한 이름 사용
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// DOM 요소 생성에 대한 스트링 반환
  // 이미지의 경우 <img> 태그만 만들면 됨
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// 구성할 수 있는 속성 세트
  getProperties: function() {
   return this._props;
  },
  
// 구성할 수 있는 속성 세트
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

코드에 있는 주석을 통해 쉽게 이해할 수 있습니다.

Animate와 함께 제공되는 다른 구성 요소의 소스도 자유롭게 살펴보십시오. 대부분의 경우 그중 하나를 시작점으로 사용한 후에 각자의 요구 사항에 맞게 구성할 수 있습니다.

jQuery-UI 구성 요소 래핑

이 섹션에서는 jQuery-UI 위젯을 래핑하고 Animate에서 사용하는 방법에 대해 설명합니다. 같은 개념을 사용하여 다른 UI 프레임워크로부터 다른 기존 구성 요소를 래핑할 수도 있습니다.

Animate와 함께 패키징된 DatePicker 구성 요소를 살펴보겠습니다. 이 구성 요소는 jQuery-UI 위젯입니다. 다음 아카이브의 컨텐츠를 다운로드 및 압축 해제하고 참조를 위해 사용하십시오.

다운로드

파일 받기

datepicker.zip 파일을 다운로드하려면 여기를 클릭하십시오.

원본 DatePicker 위젯 그리고 이미지 및 css와 같은 해당 리소스를 포함하고 있는 jQuery UI 프레임워크의 소스인 jquery-ui-1.12.0이라는 폴더를 여타 HTML5 구성 요소처럼 Animate에서 래핑하고 사용하고자 합니다. 이것은 로컬 미리 보기에 대해서만 필수입니다. 제작 설정에서 “호스팅되는 라이브러리”를 사용할 때는 cdn을 사용하여 종속 소스를 다운로드할 수 있습니다.

jQuery 및 anwidget.js의 두 가지 기본 종속성이 있습니다. anwidget.js는 CDN에 있지 않기 때문에 이에 대한 CDN 항목이 없습니다.

다음 항목 세트는 jQuery UI로부터 datepicker 위젯을 로드하는 데 필요한 다른 리소스를 위한 것입니다. 다른 라이브러리로부터 위젯을 래핑하는 경우 해당 위젯에 대한 종속성 세트를 비슷하게 지정할 수 있습니다. 이러한 종속성은 구성 요소가 초기화되기 전에 다운로드됩니다.

속성 섹션에서는 label이라는 하나의 속성만 표시됩니다. 이것은 date-picker 구성 요소의 label 속성에 연결되어 있습니다. 사용자가 Animate의 제작 환경에서 구성할 수 있도록 할 다른 속성을 표시할 수도 있습니다. 런타임에 인스턴스의 옵션 배열에서 각각을 키-값 쌍으로 사용할 수 있습니다. 구성된 값을 추출하여 런타임에 적용할 수 있습니다.

예제와 다른 섹션

getCreateString:

jQuery-UI의 datepicker 위젯은 이러한 입력 텍스트 요소를 가져와서 런타임에 date-picker 요소로 변환합니다. 따라서 이에 맞게 DOM을 초기화합니다.
attach:

이 위젯에 대해 이 기능을 재정의해야 합니다. 이 API는 요소가 DOM에 연결될 때마다 호출됩니다. 하지만 기본 런타임(이 경우에는 createjs)의 작동 방식 때문에 이 API는 프레임 범위 동안 여러 번 호출될 수도 있습니다.

기본 요소의 연결된 상태를 기억한 후에 기본 클래스의 연결 API를 호출합니다(this._superApply(arguments)를 사용함). 요소를 부모 DOM에 처음 연결하는 경우에는 기본 jQuery-UI 위젯의 호출을 사용하여 구성 요소의 DOM을 datepicker로 변환합니다. 참조 - https://jqueryui.com/datepicker/

대부분의 javascript 위젯은 비슷한 방식으로 작동합니다. 동일한 기술을 사용하여 원하는 구성 요소를 래핑하고 같은 방법으로 Animate로 가져올 수 있습니다.
업데이트: 업데이트를 재정의하고 컨테이너 div의 css 속성을 실제 DOM 요소에 연결합니다.

attach, detach 또는 update와 같이 API를 재정의할 때는 기본 클래스의 기본 구현을 평가하고 적절한 시점에 기본 구현을 호출하십시오. 그렇게 하지 않으면 구성 요소 초기화가 실패할 수 있습니다.