AESTHETICS – MAKING YOUR DIALOG LOOK GOOD

In our last post we explored creating user dialogs for Adobe InDesign. We started with a dialog template that was called from within a try/on error trap. Whether you call it from a trap or not is up to you, but a good practice is to alert the user to the fact that the script will not continue when the Cancel button is pushed.

The script we developed in our last post added static text and editboxes to the template to create the following dialog.

…our first dialog

This does the job but, as far as appearance goes, can be improved. The problem is that editboxes do not align simply because the label and editbox is created in the same row. You could add spaces after the labels to try to get the editboxes to line up. Better is to use two columns in the dialog (one for the label, and one for the editbox). This ends up with a dialog that looks like the following:

… static text is right aligned

The code to create this dialog uses a slightly different template from that of the previous blog post. Here the dialog is not called from within an error trap, but relies on the result returned from the dialog to throw an error. This error, of course, should be trapped. For now we will leave this trap as is, see Error Trapping below. Of course you can prevent the user from canceling out of the dialog by setting the value for can cancel (canCancel variable) to false.

Dialog With Editboxes

set dlgName to "User Dialog"
set canCancel to true
set returnedList to userDialog(dlgName, canCancel)
--test for values returned here
if returnedList is {} then
	error "User Cancelled"
end if
copy returnedList to {myName, myAge, myScore}
on userDialog(dlgName, canCancel)
   tell application "Adobe InDesign CC 2019"
	activate
	set origLevel to user interaction level of script preferences
	set user interaction level of script preferences to interact with all
	set dlgRef to make dialog with properties {name:dlgName, can cancel:canCancel}
	tell dlgRef
	   tell (make dialog column) --column
		make static text with properties {static label:"Enter your name:"}
		make static text with properties {static label:"Enter yoiur age:"}
		make static text with properties {static label:"Enter score from test:"}
	   end tell --column
	   tell (make dialog column)
		set nameField to make text editbox with properties {min width:144}
		set ageField to make integer editbox with properties {min width:72, minimum value:10, maximum value:100, small nudge:1, large nudge:10}
		set scoreField to make percent editbox with properties {min width:72, minimum value:10, maximum value:110, small nudge:1, large nudge:10}
	   end tell --column
	end tell--dialog
	set userResult to show dlgRef
	set theInfo to {}
	if userResult is true then
	   set theName to edit contents of nameField
	   set theAge to (edit value of ageField) as integer
	   set thePcent to (edit contents of scoreField)
	   set theInfo to {theName, theAge, thePcent}
	end if
	destroy dlgRef
	set user interaction level of script preferences to origLevel
   end tell
   --pass result back to where called
   return theInfo
end userDialog

STATIC TEXT ALIGNMENT

Notice that in the example above static text is right aligned by default. A quirky thing about text alignment for static text is that we are given the static alignment property but this seems to only work when the parent of the static text is a row The static alignment property can be set to left align, center align, or right align. Change the portion of the script above that creates the static text to the code following and test.

tell (make dialog column) --column
   tell (make dialog row)
	make static text with properties {static label:"Enter your name:", static alignment:left align}
   end tell
   tell (make dialog row)
	make static text with properties {static label:"Enter yoiur age:", static alignment:left align}
   end tell
   tell (make dialog row)
	make static text with properties {static label:"Enter score from test:", static alignment:left align}
   end tell
end tell --column

…static text is left aligned

BORDER PANEL

To organize a dialog, you might want to consider using a border panel as it places a nice border around its contained widgets. A border panel works similar to a dialog row in that its widgets are placed horizontally. For vertical placement, add columns to the panel. See how this works by using the following in place of the code inside the tell dlgRef block above:

tell (make dialog column)
tell (make border panel)
tell (make dialog column)
make static text with properties {static label:"Enter your name:"}
make static text with properties {static label:"Enter your age:"}
make static text with properties {static label:"Enter score from test:"}
end tell
tell (make dialog column)
set nameField to make text editbox with properties {min width:144}
set ageField to make integer editbox with properties {min width:72, minimum value:10, maximum value:100, small nudge:1, large nudge:10}
set scoreField to make percent editbox with properties {min width:72, minimum value:10, maximum value:100, small nudge:1, large nudge:10}
end tell
end tell --border panel
end tell --dialog column

…Border panel added

Notice that here the static text is aligned to the right.

ERROR TRAPPING

In our example above, the script only tested to see if the value returned is an empty list (User Cancelled). However, the script will also fail if the user does not enter acceptable values. For instance, if the user does not click inside the editboxes, but hits the OK button instead, a list of values will be returned but the values will not be usable. One approach to the problem could be to change the code at the top of the script to read as follows:

 

--test for values returned here
try
if returnedList is {} then
	error "User Cancelled"
end if
copy returnedList to {myName, myAge, myScore}
if myName is "" or myScore is "" or myAge is less than 10 then
   error "Unacceptable Values entered"
end if
on error errStr
   activate
   display alert "Error: " & errStr
end try 

As you can see, the user can close a modal dialog without entering valid values, so some rigorous testing needs to be done.

ONWARD AND UPWARD

In the next blog post we will look at widgets that provide multiple choices.

Disclaimer:
Scripts provided are for demonstration and educational purposes. No representation is made as to their accuracy or completeness. Readers are advised to use the code at their own risk.