HTML Extensibility in InDesign CC

The InDesign update you received in August 2013 (InDesign 9.1) included the enabling of HTML5 extensions.

As you may already know, starting in the middle of 2014 Adobe will begin removing Flash-based extension support in Creative Cloud products, starting with Photoshop CC.

If you have any hybrid or regular Flash extensions for InDesign you need to begin migrating them to HTML5 as soon as possible.

I just create plug-ins, why should I care?

HTML5 extensions are a great opportunity to create compelling user-interfaces for native plug-ins. But that’s not all. Creating hybrid extensions (where you have a native plug-in and a UI extension) also forces you to properly separate model and UI in your overall architecture.

I’m not saying you should slap an HTML UI on every-one of your plug-ins. For example, if your plug-in only has dialogs I wouldn’t bother. But if the plug-in had its own panel, then I would certainly consider using HTML.

Where do I start?

Adobe Extension Builder has been updated for HTML5 development. If you are not a fan of eclipse, just create your project in Extension Builder then use a text editor from that point on.

To get the latest Extension Builder and other tools visit the Extension Builder 3 site at Adobe Labs: http://labs.adobe.com/technologies/extensionbuilder3/.

How do I connect the HTML extension to the native plug-in?

There are two methods for enabling two-way communication between an HTML extension and a native plug-in:

  1. You can add a scripting interface to your plug-in with some methods and properties, and have the HTML/JS extension use evalScript calls to run ExtendScript which calls these methods/properties.
  2. You can send CSXS events back and forth between the native plug-in and HTML/JS extension.

The easiest method is the latter: using CSXS events. The attached sample, which includes an HTML extension and native plug-in, uses this method. It does also demonstrate how to add a scripting interface to a plug-in, should you wish to go down that route. If you wanted to call this scripting API from an HTML extension, you would need to use the evalScript function provided by CSInterface. For example:

Sending/receiving a CSXS event from a native plug-in

Here’s how to construct and send a CSXS event in InDesign CC onwards:

Here is how to add an event listener for CSXS events:

The sample attached to this post has the following message handler, which nicely demonstrates how to handle a received message, do something with its data (in this case, show it in an alert dialog), and send a message back. Here is the code:

A good place to create such a message listener is in a startup/shutdown service – so the message listener gets created on InDesign startup.

Sending/receiving a CSXS event from a HTML extension

Sending a message to the above native message listener is done as follows:

Adding a message listener is also straightforward:

Download source

Download the sample here: ScriptingComms

You will need the InDesign SDK in order to build the native plug-in part of this sample. Download the SDK here: http://www.adobe.com/devnet/indesign.html

One Response to HTML Extensibility in InDesign CC

  1. Pingback: Dew Drop – November 7, 2013 (#1662) | Morning Dew