Uxp developer tools adobe что это

UXP новая универсальная платфрма расширений

Adobe в версии Photoshop 2020 представила новую UXP архитектуру плагинов 3 поколения, так было заявленио на конференции MAX2020

UXP (Unified Extensibility Platform) платформа уже внедряется в течении 2 лет, на этой платформе сделаны многие элементы интерфейса Adobe программ — стартовые страницы, диалог создания нового документа? галерея нейронных фильтров в PS2021 и т.п. Предполагается развитие платформы на базе Adobe XD, как приложения для разработки интерфейсов плагинов, программная часть разрабатывается как и раньше в любых удобных редакторах кода. На момент написания статьи в доступе около 300 плагинов на базе платформы UXP.

В концепции UXP теперь все расширения и панели называются плагинами и ни как по другому.

Схема взаимодействия UXP и Adobe приложений:

Uxp developer tools adobe что это. 46797 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-46797 800. картинка Uxp developer tools adobe что это. картинка 46797 800

На схеме мы видим, UXP представляет собой общий высоко технологический стек, обеспечивающий современную высокоскоростную среду выполнения JavaScript движка, этот стек включает в себя общий набор API для доступа к сети, файловой системе, Dom модели HTML, системе визуализации, модели ML для обработки данных и вывода данных, а также API для доступа к службам Creative Cloud от имени пользователя, таким как библиотеки и облачные документы. Он также включает в себя слой пользовательского интерфейса, напоминающий React Native, для размещения собственных элементов управления совместимые c HTML и CSS. UXP имеет связи с конкретными API хостов, для взаимодействия с приложением и самим документом.

Унифицированная Среда Выполнения JavaScript

При создании панелей с помощью CEP мы не могли напрямую взаимодействовать с Photoshop — вместо этого мы использовали evalScript для передачи управления коду, работающему в среде ExtendScript, которая содержит API для связи с хост-приложением.

Для такого взаимодействия требоваться поддерживать два Java движка и две среды выполнения кода. Передача кода и данных по этому способу происходит медленно и невероятно трудно отлаживается. Единая среда выполнения позволяет UXP UI и бизнес-логике совместно использовать один и тот же высокоскоростной нативный Java движок, а это означает, что больше нет необходимости использовать evalScript!

Современная Среда Выполнения JavaScript

При использовании ExtendScript код выполнялся в среде JavaScript, основанной на стандарте ECMAScript 3 1999 года. Старый стандарт ограничивал возможности ExtendScript. Современные движки JavaScript значительно продвинулись в производительности и экономичном использовании оперативной памяти. UXP платформа, использует качестве виртуальной машины JavaScript версии V8.

Общие API

Cуществует общий набор API, к которым плагинам нужен доступ, независимо от хост-приложения. К ним относятся, файловая система ввода-вывода и сеть. Там, где это возможно, UXP следует существующим стандартам, например, сетевой ввод-вывод осуществляется с помощью API XMLHttpRequest, fetch и websocket.

API Хосты

Каждый хост-продукт имеет свою схему для взаимодействия с приложением и открытым документом, и UXP позволяет хост-продукту предоставлять эти API непосредственно разработчику. То, как выглядят эти хост-API, будет зависеть от конкретного приложения.

Пользовательский интерфейс

UXP использует HTML и CSS в дополнение к собственным виджетам для создания быстрого и адаптивного пользовательского интерфейса, который используется хост-приложением как собственный интерфейс. То есть мы продолжим использовать HTML и CSS для создания интерфейса, а UXP будет транслировать этот интерфейс как родную среду хост-приложения.

Теперь в UXP будут доступны элементы управления интерфейса от Spectrum UI, это позволит пользоваться общими элементами управления, шаблонами дизайна и поддержкой без необходимости тратить часы на воссоздание внешнего вида каждого приложения в пользовательском интерфейсе вашего плагина.

И так из плюсов новой платформы плагины будут работать быстрее, а создавать их будет проще, интерфейсы станут намного интереснее. Однозначно установка плагинов упростилась, после их загрузки они сразу доступны без перезапуска программы.

Теперь о минусах, панели уже вынесены в меню, как устаревшие расширения, не исключено, что на какой-то версии они будут исключены, также как когда то были исключены панели на Flash. Абсолютно изменится структура кода скрипта, все придется переписывать, и это не только вопрос синтаксиса, а в большей степени это изменение DOM модели в среде UXP, а это меняет все, будем надеяться к лучшему.

Источник

Создаем первый UXP плагин для Photoshop

Итак платформа UXP в строю, учимся с ней работать.

Uxp developer tools adobe что это. 47066 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-47066 800. картинка Uxp developer tools adobe что это. картинка 47066 800

Платформа еще сырая, некоторые ссылки внутри разделов документации ведут на пустые срамницы, они еще в разработке, но основа уже есть.

Качаем программу для создания и управления плагинами Adobe UXP Developer Tool, устанавливаем и запускаем.

Для работы потребуется Photoshop верией не ниже 22.00.00, запускаем его.

В программе Adobe UXP Developer Tool нажимаем кнопку Create Plugin:

Uxp developer tools adobe что это. 47283 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-47283 800. картинка Uxp developer tools adobe что это. картинка 47283 800

Заполняем поля, для первого примера из шаблонов выбираем ps-starter — простой плагин основанный на JavaScript без дополнительных библиотек.

Далее нажимаем кнопку Select Folder — выбираем папку, где будет располагаться наш плагин.

Uxp developer tools adobe что это. 47372 original. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-47372 original. картинка Uxp developer tools adobe что это. картинка 47372 original

В программе UXP Developer Tool появится запись об установленном плагине, заходим в меню и выбираем load:

Uxp developer tools adobe что это. 47765 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-47765 800. картинка Uxp developer tools adobe что это. картинка 47765 800

После этого в Photoshop откроется панель тестового плагина:

Uxp developer tools adobe что это. 47900 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-47900 800. картинка Uxp developer tools adobe что это. картинка 47900 800

в этом плагине при нажатии на кнопу на панель выводится список слоев в документе. Можно изучать содержимое папки с плагином:

Uxp developer tools adobe что это. 48180 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-48180 800. картинка Uxp developer tools adobe что это. картинка 48180 800

основные файлы manifest.json — описание плагина, основная информация, размеры панели плагина, аналогично манифесту из CEP, но синтаксис уже другой. Index.html — как обычно это интерфейс плагина на html. Index.js — JavaScript код плагина:

Uxp developer tools adobe что это. 48398 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-48398 800. картинка Uxp developer tools adobe что это. картинка 48398 800

Как можно заметить, что из единого JavaScript плагин может обращаться как к элементам HTML, так, и к API Photoshop и это очень здорово!

Рассмотрим создание плагина с библиотекой React. Создание плагина отличается выбором шаблона — вместо ps-starter выбираем ps-react-starter. При попытке загрузить в программе UXP Developer Tool — получаем ошибку:

Uxp developer tools adobe что это. 48752 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-48752 800. картинка Uxp developer tools adobe что это. картинка 48752 800

Открываем папку созданного проект в VS Code и действуем по инструкции:

Uxp developer tools adobe что это. 48926 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-48926 800. картинка Uxp developer tools adobe что это. картинка 48926 800

Открываем терминал из меню VS Code — Терминал — Создать терминал.

Выполняем команды из инструкции:

результат должен выглядеть примерно так:

Uxp developer tools adobe что это. 49313 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-49313 800. картинка Uxp developer tools adobe что это. картинка 49313 800

если при выполнении команды появится ошибка:

Uxp developer tools adobe что это. 49468 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-49468 800. картинка Uxp developer tools adobe что это. картинка 49468 800

запускаем PowerShell с правами администратора из строки поиска (Win 10):

Uxp developer tools adobe что это. 49685 original. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-49685 original. картинка Uxp developer tools adobe что это. картинка 49685 original

в PowerShell запускаем команду:

подтверждаем a + Enter:

Uxp developer tools adobe что это. 50159 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-50159 800. картинка Uxp developer tools adobe что это. картинка 50159 800

В терминале VS Code повторяем команду:

Uxp developer tools adobe что это. 50246 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-50246 800. картинка Uxp developer tools adobe что это. картинка 50246 800

Uxp developer tools adobe что это. 50453 original. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-50453 original. картинка Uxp developer tools adobe что это. картинка 50453 original

Теперь в программе UXP Developer Tool загружаем наш плагин:

Uxp developer tools adobe что это. 50909 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-50909 800. картинка Uxp developer tools adobe что это. картинка 50909 800

В Photoshop откроются 2 панели тестовых плагинов:

Uxp developer tools adobe что это. 51139 800. Uxp developer tools adobe что это фото. Uxp developer tools adobe что это-51139 800. картинка Uxp developer tools adobe что это. картинка 51139 800

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *