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++
Introduction
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.
Starting out with the designer module
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.
Creating a design
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.
Grouping widgets
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.
Layout management
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.
Tab order and accelerators
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 ToolsTab
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.