Utiliser la dernière version de jQuery avec les panels CEP ADOBE (CSXS)

alt

En tant que co-fondateur de Automate-IT, je code chaque jour des systèmes et panels spécifiques pour les applications Adobe, tels que After Effects ou Photoshop. Nos clients principaux sont des broadcasters et des chaînes de télévisions, aussi bien en France qu'à l'internationale, fournissant des solutions d'automatisation des flux de productions graphiques. Si vous voulez en savoir plus, allez faire un tour sur notre site :

http://www.automate-it.fr/

Depuis la version CC2014, Adobe fourni une API nommée CEP (précédemment CSXS), afin de créer des "panels de contrôles" utilisant HTML5/CSS3/Javascript du coté du panel et une API spécifique basée sur ExtendJavascript et C++ du coté de l'hôte. Même si chaque hôte à un lot différent de fonctions avec lesquelles jouer, bien souvent incompatible entre les différentes applications, pour la partie "WEB" une grande partie du code peut être réutiliser afin de porter un panel d'une application à une autre.

Développer un panel CEP n'est pas une tâche facile, car vous devez tout d'abord comprendre comment fonctionne un site web moderne, vous devez parfois savoir comment fonctionne également nodeJS ... tout en sachant aussi exactement comment marche l'application hôte et comment coder des scripts et plugins pour elle. Ça fait beaucoup de choses à apprendre d'un coup si vous n'avez jamais mis le nez dans chacun de ces sujets.

La partie WEB du panel est basée sur le Chromium Embedded Framework (CEF3). Vous pouvez le considérer comme un sous-ensemble du navigateur Chrome, qui tourne en permanence dans chaque application Adobe. Puisque vous pouvez créer un panel de la même manière qu'une page Web, il est possible d'utiliser des frameworks tel que AngularJS, Bootstrap ou jQuery. Chez Automate-IT, il nous arrive d'utiliser les deux derniers de temps en temps. Au tout début, nous avons commencer par intégrer une ancienne version de jQuery qui nous était fournie par Adobe avec quelques bouts de code. Mais nous avons essayé de remplacer jQuery par une version plus récente, pour nous rendre compte que cette librairie ne se charger pas au démarrage du panel.

Après beaucoup de recherche (la documentation du CEP ne donne que très peu d'informations sur ce genre de ... détails), j'ai enfin trouvé pourquoi jQuery était considéré comme librairie manquante.

Je ne suis pas vraiment sûr de la raison, mais je pense que sourcer cette librairie la fait entrer en conflit avec un des seveurs nodeJS interne, qui peut démarrer avec chaque application Adobe.

Afin de contourner le problème, il vous suffit d'ajouter cette simple ligne après votre balise Title :

<script type="text/javascript">window.module = undefined</script>

Si vous regardez le header de voter fichier HTML dans son ensemble, il devrait ressembler à ça :

<html lang="en"> <head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Automate-IT Adobe Panel</title>

<script type="text/javascript">window.module = undefined</script>

<script src="./js/CSInterface.js"></script> <script src="./js/Vulcan.js"></script> ...

Et voilà ! Vous pouvez à présent utiliser la dernière version de jQuery dans vos panels.

La mise en place n'est pas si compliquée, mais quand vous ne connaissez pas cette simple astuce, vous perdez énormément de temps. :)