Dialogs are used to interact with the user and get specific inputs. In
the previous sections we used the pre-built dialog wx.FileDialog. 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 Frame1 window. It will exist in our application as
a separate Python file. Select the application module 'App1' in the
editor.
Chose the 'Application' pane.
On the palette, select the 'New' pane. Select the 'wx.Dialog'
button.
This
will create a new source file Dialog1.py, and will automatically add
this new source file to your application module.
Select the Frame1 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 'OnHelpAboutMenu'. The code is as follows:
This code references the Dialog1 module. Before this code works,
we must
import the Dialog1 module. By convention, we keep imports at the start
of the source. Add the line 'import Dialog1' to the Frame1.py after the
line
'import wx'.
import wx
import Dialog1
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 Frame1 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.jpg. You can
create your own bitmap using a paint utility. Copy the bitmap to your
application
directory.
Select the Dialog1.py pane. Start the Designer by clicking on the
button .
First we shall add a label to the Dialog. On the palette select
'Basic
Controls'. From this pane select the wx.StaticText control. On the
Designer
click the mouse button to create the control.
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 'wx.ALIGN_CENTRE' or select this
style after clicking on the check box to the left of style.
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
wx.StaticBitmap
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
wx.StaticBitmap
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, wx.Button. 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 are 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 Dialog1 in the Designer. In the Constructor pane in
the
Inspector,
edit the Title field. Set this to 'About Notebook'.
Press either post button 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 Dialog1. 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 this 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.