Наш гостевой пост для разработчиков на этой неделе написал Давид Барранка, ретушер и разработчик 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.