2.7 Creating a Dialog Window
Dialogs are used to interact with the user and get specific inputs. In
the previous sections we used the pre-built dialog wxFileDialog. We are
now going to develop our own Dialog for the About menu option.
-
The dialog we are going to create will require a new window. It is not
a component of the wxFrame1 window. It will exist in our application as
a separate python file. Select the application module 'wxApp1' in the editor.
Chose the 'Application' pane.
-
On the palette, select the 'New' pane. Select the 'wxDialog' button. This
will create a new source file wxDialog1.py, and will automatically add
this new source file to your module.
-
Select the wxFrame1 pane. We want to write the code for the 'About' menu
option, which is used to display the dialog. This option is implemented
by the method 'OnHelpitems0Menu'. The code is as follows:
def OnHelpitems0Menu(self, event):
dlg = wxDialog1.wxDialog1(self)
try:
dlg.ShowModal()
finally:
dlg.Destroy()
-
This code references the wxDialog1 module. Before this code works, we must
import the wxDialog1 module. By convention, we keep imports at the start
of the source. Add the following line to the wxFrame1.py after the line
which imports from wxPython.
import wxDialog1
-
Save the three source files. You can run the application now. When you
select the 'About' option from the 'Help' menu your new Dialog will appear.
Notice that the dialog is modal, i.e. you must close it before you can
access the wxFrame1 window. Exit the application and return to Boa Constructor.
-
Now we will add some fields to the dialog. For this exercise we will need
a bitmap file. For the demonstration I used one called Boa.bmp. You can
create your own bitmap using a paint utility. Copy the bitmap to your application
directory.
-
Select the wxDialog1.py pane. Start the Designer.
-
First we shall add a label to the Dialog. On the palette select 'Basic
Controls'. From this pane select the wxStaticText control. On the Designer
click the mouse button to create the label.
-
On the Inspector edit the field 'Label'. Set the value to 'Note book -
Simple Text Editor'. Notice that the label in the Designer will grow to
accomodate your text.
-
We use the style property to configure the alignment of the text within
the label. Set the style property to 'wxALIGN_CENTRE'. The other options
for this field can be seen in the wxPython online help.
-
Select the 'Properties' pane in the inspector. Edit the field called 'font'.
Set the font to a reasonably large font, e.g. 12 or 14 point. Notice that
you can change both the font and point size with this property.
-
In the Designer window your label will appear with eight markers on the
edges. You click the mouse left button (and hold it down) on one of these
markers then move the mouse to resize the box. You can also click in the
centre of the label, and hold down the mouse button, to move the label.
Position the label centrally at the top of the box.
-
Now add another label below the first. Set the text to 'This is my first
Boa Contstructor application'. In the Inspector, select the 'Properties'
pane. Edit the value 'BackgroundColour'. Pick a colour from the set available
and press OK. Now reposition and resize your label until it looks balanced.
-
Next we will add the bitmap. From the 'Basic Controls' select the wxStaticBitmap
control. Place this below the second label on your dialog. In the Inspector
select the Constructor pane. Edit the Bitmap field. This will give you
an 'Open File' dialog. Choose the bitmap you painted earlier. The wxStaticBitmap
field in the Designer will change to accomodate your bitmap. Move the bitmap
until it is balanced below the two labels.
-
Finally, we will add a button to the Dialog. In the Palette select the
'Buttons' pane. Select the basic button type, wxButton. Place this on the
form below the bitmap. On the Inspector Constructor pane edit the 'Label'.
Set this to 'Close'. Select the Events pane in the Inspector. Add a handler
for event type EVT_BUTTON. Hint: select the event group first, then the
event.
-
This is all the controls we are going to add to the Dialog. Size the Dialog
to accomodate the controls. Reposition and resize the controls until you
feel they are nicely balanced.
-
Select the wxDialog1 in the Designer. In the Constructor pane in the Inspector,
edit the Title field. Set this to 'About Notebook'.
-
Press the post button in the Inspector to update the source code with your
changes.
-
Finally, we need to implement the event handler for the Close button. In
the Editor select the source for wxDialog1. Go to the source for your method
'OnButton1Button'. We will use the same 'Close' method as we used in the
'Exit' menu item. Note that the Close closes the window. Closing the root
window exits the application. However, closing a child window will simply
return to the parent window.
def OnButton1Button(self, event):
self.Close()
Run the application. Your new Dialog should look something like this.
Congratulations: You have built your first application using Boa Constructor.
Your editor is complete. In this tutorial you have used the core components
of Boa.
Take time to review what you have done so far. You have learnt how to:
-
Create an application.
-
Create frames, menus and status bars.
-
Create controls such as buttons, text entry fields and labels.
-
Configure the controls to your requirements.
-
Work with common dialogs.
-
Design your own dialogs.