Наш гостевой пост для разработчиков на этой неделе написал Давид Барранка, ретушер и разработчик Photoshop из Италии.
Обновление от 10 апреля 2018 г. Наши ресурсы по началу работы с CEP теперь размещены на GitHub! Актуальную информацию смотрите в нашем репо.
Этот пост предназначен для начинающих разработчиков, которые создали панель или только начинают создавать панели и хотят понять, как CEP взаимодействует с хост-приложениями CC, такими как Photoshop, InDesign и т. Д. (Если вы никогда не создавали панель, ознакомьтесь с нашим первым постом: Как создать свою первую панель Adobe за 6 простых шагов).
- Эрин Финнеган, инженер сообщества, Adobe
В этом посте мы начнем рассматривать основные механизмы, с помощью которых панели HTML взаимодействуют со своим хост-приложением, а именно, как запускать сценарии.
Как это работает
Вкратце, вы можете рассматривать панели HTML как веб-приложения, работающие в контексте приложений Adobe Creative Cloud. Стек технологий, которые делают это возможным, известен как CEP (Common Extensibility Platform), и его можно проиллюстрировать следующим образом:
Панель буквально состоит из экземпляра браузера (Chromium Embedded Framework), который предоставляет среду для выполнения кода HTML / CSS / JS. Само по себе все это не было бы очень захватывающим, за исключением того, что CEP делает доступным канал связи между основным приложением (Photoshop, InDesign, Illustrator и т. Д.) И самой панелью. В результате панель может творить все чудеса, которые обычно делают веб-приложения, плюс она может управлять хост-приложением и получать информацию из хост-приложения с помощью сценариев.
Однако общего языка нет: хотя панели свободно используют современный JavaScript (JS), они не могут напрямую использовать ExtendScript (JSX), язык сценариев, с которым работают приложения Photoshop и Creative Cloud, даже если у них обоих общий предок ( спецификацию языка). Процесс интерпретации кода должен включать два отдельных механизма: панель (JS) и хост-приложение (JSX).
Итак, как происходит это общение? Сторона панели / JS может отправлять строки кода ExtendScript на сторону хост-приложения / JSX, а затем ждать, пока хост-приложение / сторона JSX запустит его и вернет результат (если есть). Это похоже на то, что панель говорит: «Привет, Photoshop, я понятия не имею, что эта ‘app.activeDocument.layers.length’
вещь может означать, не могли бы вы попробовать?». Фотошоп услужливо отвечает: «15. Пожалуйста". Это самый простой сценарий; вы могли бы сделать его событийным, но это был бы другой пост в блоге.
Давайте теперь рассмотрим несколько примеров. Я буду использовать Photoshop, потому что это то, с чем я в основном знаком, но подумайте о приложении Adobe по вашему выбору, и оно будет работать точно так же.
Связь с панели с хост-приложением
Все основано на классе CSInterface
(предоставленном файлом CSInterface.js
, который вы можете найти в репозитории Adobe GitHub), который вы должны сначала создать в JS-коде панели:
Затем вы можете отправлять сообщения из JS в JSX (т. Е. Из панели в хост-приложение), используя метод evalScript()
:
Это очень просто. На панели вы говорите ведущему приложению Adobe (например, Photoshop): «Пожалуйста, Photoshop, запустите alert("Hello World!")
, а?». И фотошоп, несомненно, сделает это с удовольствием.
Более значимые коммуникации могут включать в себя правильные вызовы функций, как в следующем примере - представим, что мы разработали, скажем, новую процедуру повышения резкости для веб-ориентированных JPG-файлов:
Здесь, из JS панели, вы отправляете эту интригующую 'addSharpeningForWeb()'
строку в Photoshop, но что должен делать Photoshop? Панель HTML хранит свой собственный код ExtendScript в одном (или нескольких) файлах .jsx
, главный из которых определяется в CSXS/manifest.xml
в теге <ScriptPath>
.
В этом hostscript.jsx
файле будет находиться фактический код для этой самой функции:
Что, если вам нужно передать данные этим функциям? Предположим, что функция повышения резкости в сети должна знать силу резкости - числовой параметр, который пользователь устанавливает на самой панели с помощью ползунка. Как передать этот параметр вместе со строкой вызова функции механизму JSX?
С помощью интерполяции строк вы можете легко вставить параметр между двумя круглыми скобками. Вместо этого вы также можете использовать новые строки шаблона ES2015 для интерполяции переменных (см. Сообщение в блоге Adobe I / O о строковых шаблонах для примеров). На всякий случай предлагаю вам протестировать свой код на предмет надлежащей обратной совместимости: каждая версия хост-приложения (скажем, Photoshop CC 2018, CC 2017 и CC 2015.5) реализует другую Chromium Embedded Framework, и ваш код может сломаться в более старых версиях.
Этот пост обогатил ваше понимание CEP? Дайте нам знать об этом в комментариях. По этой теме определенно есть что узнать, так что продолжайте проверять Adobe I / O для следующего сообщения в блоге!
Давид Барранка является автором двух книг о панелях: Разработка HTML-панелей в Adobe Photoshop и Полное руководство по встроенным установщикам и автоматизированным системам сборки. Он ведет блог о панелях и разработке скриптов на своей домашней странице davidebarranca.com.
Чтобы получить больше подобных материалов, подпишитесь на нашу Информационную рассылку для разработчиков Creative Cloud.