Indiscripts

From time to time, brilliant programmers appear on the scripting scene who both improve our workspace and expand our mindspace. That's the difference between a “skilled” and a “brilliant” developer. The latter not only masters code, he also blends and pushes ideas to practical solutions that we hadn't glimpsed.

In the microcosm of Adobe scripters—in short, those who speak ExtendScript/ScriptUI and/or CEP/HTML and/or UXP in the near future—we are lucky to have great idea pushers. Just considering the InDesign tribe, you already know illustrious names like Kris Coppieters or Theunis de Jong… Other great inventors energize the kingdom of Photoshop, Illustrator, After Effects as well.

In any of those parallel universes, the grail is the ability to quickly design and code a User Interface. ScriptUI-based dialogs remain (to date) the easiest and the most common base for this purpose. But scripters still have to painfully declare ScriptUI components in their code, then they must set and tweak properties to get things properly positioned in the layout, and so on. As detailed in Peter Kahrel's ScriptUI for Dummies, this is both a meticulous and erratic craft.

Note. — Peter mentions Joonas Pääkkö’s “extremely useful tool” in revision 2.16 of his guide (June 2019.)

So the most uncomfortable issue with ScriptUI (SUI) is the lack of visual feedback while you are coding. Joonas Pääkkö took up seriously that kind of WYSIWYG challenge when he started implementing his ScriptUI Dialog Builder tool for about a year now.

“I've designed many script dialogs using Photoshop, just by sort of wireframing it using SUI screenshots,” Joonas said by email. “I do like that even if you know how to build SUI dialogs like a master, ScriptUI Dialog Builder still has something to offer. Like say controlling complex nested item structures. Moving code around to design stuff never appealed to me as a graphic designer.”

A kind of magic

The resulting app is a UFO! Basically, all you have to do is to go into scriptui.joonas.me, then you're ready to design your custom interface. From the left pan, you can drag and drop new widgets (Buttons, StaticText, ListBox, Sliders…) in a window canvas, create Group or Panel containers, control how elements are nested. And for any object the relevant “Item Properties” are shown and can be fine-tuned by editing the associated field.

Smartly organized, clear and easy to use, the control panel also provides contextual fields, intuitive icons, tooltips and even warnings. For example, if you manually set the preferredSize of a container to a width which is by construction lower than the value implied by inner components, the field turns orange to alert you:

Note. — There are many “hidden things” to play with, Joonas adds. “All number inputs in the properties panel have more ways to edit the value than you'd ever need. It is mentioned in the GitHub Wiki but it's a little stiff in many ways. (…) You can click the arrows, you can use arrow keys, you can use scroll wheel and my favorite: you can Click and drag up and down. This takes into account the dragging speed. Also all of these methods increase the value if you use the Shift modifier.”

Once the UI looks fine and the controls fit the specification of your project, translating your dialog into ScriptUI/ExtendScript language is as easy as clicking “Export”:

You then obtain a nice JSX script file where all SUI components and settings are properly set, including subtleties like list selection, creation properties, etc. Note that a PNG logo was incorporated in my example, but that's not a problem for SDB, which perfectly knows how to stringify a ScriptUIImage. Here is what I finally saw when executing the exported script in InDesign:

Awesome, isn't it? Of course this is not absolute WYSIWYG, not only because Joonas' building blocks emanate from jQuery, but because ScriptUI itself is essentially too versatile across systems, apps, versions, to give meaning to the very principle of WYSIWYG! Anyway, SDB displays its own controls in a flavor that looks pretty close to what Mac OS users will get in Creative Cloud's Drover theme (dark mode.)

Focused on Design

Since I know you by heart, your next questions are: what about sending and recovering UI data, what about event handlers, what about making my controls react to mouse clicks and so?

On these topics, Joonas may not be definitely deaf to requests but he's clear about this: ScriptUI Dialog Builder primarily focuses on design features, as evidenced by its Issues thread. In my humble opinion this is a wise strategy, since SUI event management is a bottomless pit of bugs where Adobe never stops to throw new gems. Also, dealing with events would involve structures and functions that are innervated in non-UI code and then depend on your coding style, your framework and many other factors that a scaffolder cannot worry about.

“Despite the name, ScriptUI Dialog Builder could have maybe been more aptly named,” Joonas admits. “…something like ‘ScriptUI Dialog Designer’. It's pretty strictly for layout design because anything past that would be unrealistic or unnecessary. Or at least that has been my opinion so far. The name ‘builder’ was stuck in my mind probably because there's been quite a few over the years in different forms. Since the release, I've had a few requests where people wanted to implement some sort of support for events/code customization. I feel it's tough to argue against these requests since it's a dialog builder… yet you can't really build the full dialog in it. So I feel the name could give a false perception to some people.”

Well, that's a terminological debate in which I shall not venture. Famous SDB predecessors like P9UI, Rapid ScriptUI and ScriptUIBuilder were all “interface builders” in the above sense. Some may have fine-grained JSX blocks, but they still focused on design and layout, not beyond. On his part, Joonas Pääkkö remembers he was still using CS3 when he started thinking about his own project: “Not that it was an original idea, but just the idea that I would make one myself. I feel it's a bit of a shame that I made it so late in the game…”

Pros and Cons (Really?)

I would have added a pros and cons section to this post if it had not already drifted towards a more historical than technical mood…

1. Whatever its flaws, ScriptUI Dialog Builder deserves much better than an almost invisible mention on the Photoshop scripting forum and 34 stars on GitHub. By the way, this is a GitHub repository, that is, an open-source application that you can study, contribute to… This also means that, while SDB lives online, “it can also be downloaded and used offline.”

2. The tool evolves quickly. Both ExtendScript and CEP developers are in opening eyes on it, since a CEP export feature has been added a few days ago.

3. You can report bugs, share feedbacks, send feature requests, chat with the author…

There is therefore no point in quibbling here. Go there instead, and make it grow up. (Congrats for what has been already made up!)

• Online tool: scriptui.joonas.me/

• GitHub repo: github.com/joonaspaakko/ScriptUI-Dialog-Builder-Joonas

• Wiki: github.com/joonaspaakko/ScriptUI-Dialog-Builder-Joonas/wiki