A Programming Pattern to Create a Modeless Dialog with Adobe ScriptUI

I'd like to create a dialog box to input some special characters onto InDesign without running the dialog every time, after I clicked on some button to input characters.

A modeless dialog is the choice. But I got many crashes. Finally, with the sample from Adobe, I got a stable programming pattern, which works with Adobe CC.

Here is the code:

#targetengine session;
// the above line is necessary to create a modeless dialog with 
// var win = new Window("palette", ...);
//
// refer to the sample program from Adobe: "SnpCreateDialog.jsx".
// Which is usually located at the folder (Windows):
// C:\Program Files (x86)\Adobe\Adobe ExtendScript Toolkit CC\SDK\Samples\javascript

function AModelessDialog() {
 this.windowRef = null;
}

function setupWindow() {
 var ww = new Window("palette", "A Modeless Dialog");
 addComponents(ww);
 return ww;
}

AModelessDialog.prototype.run = function() {
 var win = setupWindow();
 this.windowRef = win;

 win.show();
 return true;
}

new AModelessDialog().run();

// Above lines are the programming pattern for a modeless dialog with ScriptUI
//
// The following lines are the function to create the "palette".
// You may modify the following function, splite it to functions, in order to design
// your window UI.
function addComponents(w) {
 w.orientation = "column";
 w.grpRadioBtns = w.add ('group');
 w.grpRadioBtns.orientation = "row";
 w.radio32 = w.grpRadioBtns.add ("radiobutton", undefined, "32 bit");
 w.radio64 = w.grpRadioBtns.add ("radiobutton", undefined, "64 bit");
 w.radio64.value = true;
 
 w.grpIPA = w.add ('group');
 w.grpIPA.orientation = "row";
 w.btnIPA01 = w.grpIPA.add ('button {text: "ɑ̃"}'); // U+0251 U+0303
 w.btnIPA01.onClick = function () { insertText(w.btnIPA01.text); }
 w.btnIPA02 = w.grpIPA.add ('button {text: "ɛ̃"}'); // U+025B U+0303
 w.btnIPA02.onClick = function () { insertText(w.btnIPA02.text); } 
  
 w.btnPanel = w.add("panel", [25,15,255,110], "A Panel");
 w.btnPanel.orientation = "row";
 w.btnPanel.okBtn = w.btnPanel.add("button",  [15,45,105,65], "OK");
 w.btnPanel.cancelBtn = w.btnPanel.add("button", [120, 45, 210, 65], "Cancel");  
 
 w.btnPanel.okBtn.onClick = function() {
  w.close();
 };
 w.btnPanel.cancelBtn.onClick = function() {
  w.close();
 }; 
}

function insertText(theText) {
 var myDoc;
 try {
  myDoc = app.activeDocument;
 }
 catch (xError) {
  return;
 }
 // check for selection
 if (myDoc.selection.length > 0) {
  if (myDoc.selection[0] instanceof InsertionPoint) {
   myDoc.selection[0].contents = theText; 
  }
 }
}

Line 1 and line 9 ~ 27 are the programming pattern of the modeless dialog in ScriptUI for Adobe CC.
Using "new Window('palette');" to create a modeless dialog is not true on CC. To make it work, line 1 is necessary to be added on top of the code.

Form Line 34 to the end are the sample UIs:

1. two radio buttons, 
2. two buttons: click on them, some characters will be inserted into an InDesign document.
3. one panel with
4. two more buttons to close the modeless dialog.

Here is the UI of the dialog with the input result in InDesign:

The code had been tested on Adobe InDesign CC 2017.1.

Enjoy!



Note:
The Adobe sample "SnpCreateDialog.jsx" is usually located at the folder (Windows):

• C:\Program Files (x86)\Adobe\Adobe ExtendScript Toolkit CC\SDK\Samples\javascript