Руководство пользователя Отмена

Создание пользовательских компонентов: примеры

Поиск

Последнее обновление 25 мая 2023 г.

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

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

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

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

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

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

mycomponents.

Загрузить

Загрузить файл
Чтобы загрузить файл myimage.zip, щелкните здесь.

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

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

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

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

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

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

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

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

Полю источника source в 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;],
  
// Возврат уникального идентификатора с префиксом image
  // _widgetID является глобальной переменной, объявленной в anwidget
  // Этот идентификатор используется, только если пользователь не задал никакой идентификатор экземпляра для компонента в Animate
  // В противном случае используется настроенное пользователем имя
  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. Такой же подход можно использовать для упаковки любого другого существующего компонента из любой другой инфраструктуры интерфейса пользователя.

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

Загрузить

Загрузить файл

Чтобы загрузить файл datepicker.zip, щелкните здесь.

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

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

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

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

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

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

getCreateString:

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

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

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

Большинство виджетов javascript работают одинаково. Можно использовать тот же прием для упаковки любого выбранного компонента и его импорта в Animate таким же образом.
Обновить: API-интерфейс update переопределяется, свойства css применяется к контейнеру div, а атрибуты к реальному элементу DOM.

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