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 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:

    def OnMenuHelpAboutMenu(self, event):
        dlg = Dialog1.Dialog1(self)
        try:
            dlg.ShowModal()
        finally:
            dlg.Destroy()

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.
Configure the controls to your requirements.
Work with common dialogs.
Design your own dialogs.