BlackAdder is the most powerful Python GUI designer in existence. In fact, it compares favorably with every other GUI designer I have ever used. There are other GUI designers for Python, notably Pythonworks by Secret Labs and Boa Constructor, but Pythonworks gives you access to a only subset of the relatively feeble Tkinter GUI toolkit, and Boa Constructor, for wxWindows, is not integrated into a development environment.
With BlackAdder's GUI designer you can create dialog windows, custom widgets and wizards. In the next generation of BlackAdder, which will be based on Qt 3.0, you can even create complete main windows with menu's, toolbars and a main widget. BlackAdder gives you access to a wide range of widgets, and makes it possible to integrate your own widgets.
Note that everything mentioned in this chapter holds equally true for Qt Designer. The combination of Qt, Qt Designer, pyuic and PyQt gives you exactly the same power— just not the same convenience.
There are a number of unique features to the GUI designer in BlackAdder:
The designer produces XML files that can be compiled to Python or C++.
You can create signal/slot connections in the designer, thus tying together all aspects of interface logic.
You can use the layout management classes of Qt (like QLayout).
You can preview your work in any of the native styles that Qt supports.
You can add your own widgets — even if they are written in Python instead of C++
Working with the designer modules includes creating files with your interface definition, compiling those files to Python code, and then using that code in your application.
Beginning this process is easy, at least as far as GUI design is concerned! After choosing New from the File menu, you will be presented with a dialog that asks you to choose what kind of item you want to create:
Selecting a template for a new GUI design.
This dialog should be moderately familiar to developers who have worked with other GUI designers, such as Visual Basic and JBuilder. Currently, the available options are:
Dialog
Wizard
Widget
Configuration Dialog
Dialog with Buttons (bottom)
Dialog with Buttons (right)
Tab-Dialog
Adding templates: You are not limited to these choices — the list is infinitely extensible, because all valid designer files (those ending in .ui) are also valid templates for the designer. You can create a new template using the Designer, and then copy the .ui file to the templates directory in the BlackAdder/properties directory. The next time you want to create a designer file, your template will be among the choices. Of the original choices, Configuration Dialog, Dialog with Buttons (Bottom), Dialog with Buttons (Right) and Tab Dialog are based on .ui files, and are therefore customizable.
Dialog is relatively uninteresting. It is a base class for creating modal and modeless dialog boxes.
The Dialog template, which appears rather bare.
Wizard is more interesting. This template, based on QWizard, offers everything you need to create these popular "hand-holding" forms.
The wizard template.
Configuration Dialog is interesting, too. It is meant for application-wide preference dialogs, with a listbox containing configuration categories on the left, and a new set of tabbed forms for each configuration category on the right. Note that you can just as easily put pixmaps in a listbox as text strings. It is far more professional to give the user icons to select from instead of text labels in a listbox.
The Configuration dialog template.
The dialogs with buttons to the right or to the bottom are useful, everyday dialogs. The included buttons are already connected to the methods that close and cancel the dialog, and the contents are already subject to layout management. Which constellation you prefer is a matter of taste. For instance, the KDE desktop standard calls for buttons at the bottom; but Microsoft often puts the buttons that right-hand side.
The dialog-with-the-buttons-on-the-right template.
The last default template is for creating a bottom-buttoned dialog with a tab strip on top.
The tabbed dialog template.
I'm assuming that you are familiar with the concept of drawing a gui on a grid. Click on the icon that represents the widget you want, click on the grid, drag it to where you want, and alter any properties you want. It's as simple as that—I can't make it any more difficult for you.
A partially filled-in form.
One thing to keep in mind is the essential difference between container widgets and normal widgets. Container widgets can hold other widgets in a parent-child relation. One example is the groupbox around a set of radio buttons. It is essential to create the radio buttons inside the groupbox to make them a set; otherwise it would be difficult to keep the selection unique. Thus, you first create the groupbox, drag it to an agreeable size, and then place the radiobuttons inside the groupbox.
A groupbox holding radio buttons.
A layoutmanager is a container, too, but here the procedure is just the other way around. You first create the widgets. Then, you select all widgets that should be managed, and then select one of the layout managers (horizontal, vertical or grid). Every time you add a new widget to the container (or a spacer object) you will break the layout and have to recreate it. You can also nest layout managers, to create more complicated effects.
The toolbar buttons for the layout managers set size,: horizontal, vertical, grid, break layout and add a spring.
Layout management can be further augmented by adding size hints to each widget. These hints determine whether the widget should stretch as much as possible, or stay the same size.
A good GUI allows the user to do everything with just the keyboard. For this, it is necessary to give every control its own accelerator key. There are two possibilities for creating these accelerators. Either the widget has a label component of its own, in which case typing an & before the letter you want to make the accelerator will suffice. Or, and this is more usual, the widget is purely graphical, but can be associated with a QLabel. Again, the & defines the accelerator, but you must still somehow link the label with the widgets. This is done through the buddy option in the properties sheet. If you select the label, and then enter the name of the associated widget in the buddy field, a link will be made.
Selecting a buddy.
BlackAdder can check for duplicate accelerators. In the Edit menu, select the option Check Accelerators. There's a shortcut for this, too: CTRL-R .
Defining accelerators is one part of creating a GUI that is usable with the keyboard only. The tab order is important, too. If the user presses the Tab key, the focus should shift to the next widget (from left to right), instead of going hoppity-skip all over the form.
Therefore, fixing the tab order should be the last thing you do after completing a form. This is very easy: press the right button on the toolbar, or choose Tools Tab Order (shortcut: F4). BlackAdder then superimposes small numbered circles on every widget. You simply click on these widgets in the order you want the focus to follow, and BlackAdder does the rest. Life could not be more simple!
Setting the tab order.
Setting the tab order right now becomes one of those pleasurable little tasks that give a developer a bit of thinking time.