AfraLISP - Learn AutoLISP for AutoCAD productivity

Dialog Box Layout - Part 1

by Kenny Ramage

Laying out Dialog Boxes in DCL can be a bit tricky and entails quite a lot of "trial and error". But, if you follow a few simple guidelines, a complicated dialog box can be simplified quite considerably. To view the dialogs throughout this tutorial, we will be making use of the Visual LISP Editor and the "Preview DCL in Editor" function. If you are unfamiliar with this very handy function, you'll find step by step instructions in the Previewing DCL Files tutorial.

If you would rather call the dialog boxes from AutoCAD, I have included AutoLisp coding that will fulfill this purpose in the download file that you can find at the end of this tutorial.

In addition, explanations for all the tile attributes are covered in the DCL Tile Attributes reference. I suggest you refer to this whilst going through this tutorial.

OK, let's get started. Consider this :

complex dialog box

Rather a complicated dialog hey?

Laying out a dialog is similar in way to writing a program. You don't start off by writing the whole program in one go. You write the program in sections, testing each part as you go along. Only when each part has been thoroughly tested, do you start to put the whole program together.

We are going to do exactly the same, splitting our dialog into 3 separate DCL files before merging them all together into one.

Let's have a look at the button section first :

the button section

We'll start off by creating a dialog with just two buttons, namely the "OK" and "Cancel" buttons. Open a new file in the Visual Lisp editor and Copy and paste this.

afra : dialog {
         label = "A" ;
 
	: button {
       	 label = "OK";
	 key = "accept";
	 mnemonic = "O";
             alignment = centered;
             width = 12;
             is_default = true;
	}
 
	: button {
             label = "Cancel";
	 key = "cancel";
	 mnemonic = "C";
             alignment = centered;
             width = 12;
	}
 
        }

Save this as afra.dcl.

Using the "Preview DCL in Editor" function, your dialog should look like this :

preview of dialog box

Did you notice something? The button layout "defaulted" to a column layout. But we need these two buttons to be in a row! Ok, lets do that :

afra : dialog {
	label = "A" ;
 
	: row {
 
	: button {
	label = "OK";
	key = "accept";
	mnemonic = "O";
	alignment = centered;
	width = 12;
	is_default = true;
	}
 
	: button {
	label = "Cancel";
	key = "cancel";
	mnemonic = "C";
	alignment = centered;
	width = 12;
	}
 
	}
	
}

Your dialog should now look like this :

preview of dialog box

A word of advice. Do not rely on your tiles to default to columns. Rather explicitly define a column within your DCL Coding. If not? Well, confusion will reign…

Now we'll add the other four buttons to create our button cluster :

afra : dialog {
	label = "A" ;
 
	: column {
 
	: row {
 
	: button {
	label = "OK";
	key = "accept";
	mnemonic = "O";
	alignment = centered;
	width = 12;
	is_default = true;
	}
 
	: button {
	label = "Cancel";
	key = "cancel";
	mnemonic = "C";
	alignment = centered;
	width = 12;
	}
 
	}
 
	: row {
 
	: button {
	label = "Save";
	key = "save";
	mnemonic = "S";
	alignment = centered;
	width = 12;
	}
 
	: button {
	label = "Load";
	key = "load";
	mnemonic = "L";
	alignment = centered;
	width = 12;
	}
 
	}
 
	: row {
 
	: button {
	label = "Help...";
	key = "help";
	mnemonic = "H";
	alignment = centered;
	width = 12;
	}
 
	: button {
	label = "About...";
	key = "About";
	mnemonic = "H";
	alignment = centered;
	width = 12;
	}
 
	}
 
	}
	
}

And, our dialog should now look like this :

preview of dialog box

Did you notice how only one of the button tiles has the "is_default" attribute set to "true"? Good, you did! And why? Think about it!

For the sake of readability, and to save some space, you could also write the DCL coding like this :

afra : dialog {
	label = "A" ;
 
	: column {
 
	: row {
 
	: button {label = "OK"; key = "accept";	mnemonic = "O";
			alignment = centered; width = 12;
			is_default = true;}
	: button {label = "Cancel"; key = "cancel";mnemonic = "C";
			alignment = centered; width = 12;}
 
	}
 
	: row {
 
	: button {label = "Save"; key = "save"; mnemonic = "S";
			alignment = centered; width = 12;}
	: button {label = "Load";key = "load"; mnemonic = "L";
			alignment = centered; width = 12;}
 
	}
 
	: row {
 
	: button {label = "Help..."; key = "help"; mnemonic = "H";
			 alignment = centered; width = 12;}
	: button {label = "About..."; key = "About"; mnemonic = "H";
		         alignment = centered; width = 12;}
 
	}
 
	}
 
}

In Part 2 of this tutorial we'll continue with our dialog.