В этой статье приводится пример пользовательского компонента HTML5.

В этой статье описывается создание пользовательских компонентов. В первом примере рассматривается компонент изображения (который также включен в Animate CC), а также предоставляются общие сведения о структуре и действиях по разработке. Во втором примере описывается упаковка существующего компонента ИП (такого как jQueryUI) и его импорт в Animate CC.

  1. Создание компонента изображения DOM

    Создайте категорию под названием Мои компоненты

    a. Создайте папку с именем mycomponents в папке <HTML5Components> при первом запуске.

    b. Загрузите прилагаемый файл myimage.zip и извлеките его содержимое в папку

        mycomponents.

    Загрузить

    c. Перезапустите Animate.

Структура каталогов в папке mycomponents

Теперь должна отображаться новая категория «Мои компоненты» в папке components, а в ней новый компонент «Мое изображение». Его можно перетащить на рабочую область, задать свойство источника изображения и опубликовать фильм для просмотра пользовательского компонента в действии. 

Метаданные компонент — components.js

Components.js

Обратите внимание, что в качестве категории выбирается CATEGORY_MY_COMPONENTS. В именах каждого свойства также используются подобные ключи. Это ключ для локализованной строки для имени категории. При открытии файла strings.json из папки соответствующей локали отобразятся следующие записи.

Примечание.

Самая распространенная ошибка при редактировании этого файла заключается в добавлении лишней запятой после последнего элемента массива.

Сведения о категории

Полю значка icon задается значение Sp_Image_Sm. В папке ресурсов появятся следующие два файла png с префиксом Sp_Image_Sm.

Значение поля icon

Это значки для темного и светлого интерфейса пользователя.

Полю источника source в 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. Такой же подход можно использовать для упаковки любого другого существующего компонента из любой другой инфраструктуры интерфейса пользователя.

Давайте рассмотрим упакованный компонент DatePicker с Animate CC, который образует виджет jQuery-UI. Загрузите и извлеките содержимое следующего архива и используйте его в качестве справочного ресурса.

Загрузить

Структура извлеченного содержимого

Папка с именем jquery-ui-1.12.0 является источником инфраструктуры интерфейса jQuery, который содержит исходный виджет DatePicker и его ресурсы, такие как изображения и таблицы css, чтобы упаковать и использовать их в Animate CC, как любой другой компонент HTML5. Это необходимо только для локального предварительного просмотра; когда в параметрах публикации включены «размещенные библиотеки», предоставляется возможность использовать cdn для загрузки зависимых источников. 

Components.js

Имеется два источника по умолчанию: jQuery и anwidget.js. Так как anwidget.js отсутствует в CDN, в CDN нет соответствующей записи.

Следующий набор записей предназначен для других ресурсов, необходимых для загрузки виджета datepicker из пользовательского интерфейса jquery. Если вы упаковываете виджет из другой библиотеки, можно подобным образом задать для него набор зависимых источников. Эти зависимые объекты загружаются до инициализации компонента.

В разделе свойств отображается только одно свойство label, которое связано со свойством label для компонента date-picker. Аналогичным образом, можно отображать и другие свойства, которые нужно сделать доступными для настройки пользователем в среде разработке Animate. Во время выполнения каждое их этих свойств будет доступно для пары «ключ-значение» в массиве options, например. Настроенное значение можно извлечь и применить во время выполнения.

Главный исходный файл: src/datepicker.js.

Разделы, отличающиеся от примера

  1. getCreateString:

    Виджет datepicker из jQuery-UI принимает такой элемент текстового ввода и преобразует элемент date-picker во время выполнения. Поэтому соответствующим образом инициализируется DOM.

  2. attach:

    Необходимо переопределить эту функцию для данного виджета. Этот API-интерфейс вызывается каждый раз, когда элемент присоединяется к DOM. Однако из-за того, как работает базовая среда выполнения (в данном случае это createjs), этот API-интерфейс может вызываться несколько раз на протяжении одного диапазона кадра.

    Мы запоминаем состояние присоединения базового элемента, а затем вызовите API-интерфейс attach для базового класса (используя this._superApply(arguments)). Если элемент в первый раз присоединяется к родительскому DOM, то используется вызов базового виджета jQuery-UI, чтобы преобразовать DOM компонента в datepicker. См. https://jqueryui.com/datepicker/

    Большинство виджетов javascript работают одинаково. Можно использовать тот же прием для упаковки любого выбранного компонента и его импорта в Animate CC таким же образом.

  3. Обновить: API-интерфейс update переопределяется, свойства css применяется к контейнеру div и атрибуты к реальному элементу DOM.

    Примечание.

    Когда переопределяются API-интерфейсы, такие как attach, detach или update, проанализируйте реализацию по умолчанию для базового класса и вызовите базовую реализацию в нужное время, иначе инициализация компонента может завершиться ошибкой.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет