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

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

  1. DOM 이미지 구성 요소 만들기

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

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

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

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

    다운로드

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

mycomponents 폴더 내의 디렉토리 구조

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

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

Components.js

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

참고:

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

범주 세부 정보

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

아이콘 필드의 값

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

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

(function($) {    

// Register a component with the className: my.Image,
	// and prototype with the following overrides 
	// getCreateOptions
	// getCreateString
	// getProperties
	// getAttributes
   	$.anwidget("my.Image", {
        	options: {
			'visible': true,
			'position': 'absolute'
        	},
		_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
		
_attrs: ["id", "src", "alt", "class", "border"],
		
// Return a unique ID with the prefix image
		// _widgetID is a global declared in anwidget
		// This id is used only if the user has not set any instance ID for the component in Animate CC
		// Otherwise the user configured name is used
		getCreateOptions: function() {
			return $.extend(this.options, { 'id': "image" + _widgetID++ });
		},
		
// Return the string for creating the DOM element
		// For image we just need to create the <img> tag
		getCreateString: function() {
			return "<img>";
		},
		
// Set of configurable properties
		getProperties: function() {
			return this._props;
		},
		
// Set of configurable attributes
		getAttributes: function() {
			return this._attrs;
		}    
	});   
})(jQuery);

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

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

jQuery-UI 구성 요소 래핑

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

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

다운로드

압축 해제된 컨텐츠의 구조

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

Components.js

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

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

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

기본 소스 파일: src/datepicker.js.

예제와 다른 섹션

  1. getCreateString:

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

  2. attach:

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

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

    대부분의 javascript 위젯은 비슷한 방식으로 작동합니다. 동일한 기술을 사용하여 같은 방법으로 원하는 구성 요소를 래핑하고 Animate CC로 가져올 수 있습니다.

  3. 업데이트: 업데이트를 재정의하고 컨테이너 div의 css 속성을 실제 DOM 요소에 연결합니다.

    참고:

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

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책