Build a user interface

1 A window unto the world

The Glade interface might remind you a little of Visual Basic, but don’t let that put you off. Select the Window tool from the Top levels section of the left panel. Click anywhere on the canvas to place your window. Scroll to the Appearance section of the lower-right panel and give your window a title, such as LXF Calendar.

2 Boxes within boxes

We can’t just go putting all our widgets straight into the Window object, they need to go inside a container, we’ll use the Box widget, which you can find in the Containers section. Place a box inside your Window and give it two items when prompted. Now put another two-item box inside the lower level of the first box and change its orientation to horizontal. Set the Expand option for this second box.

3 So laughs the calendar

Find the Calendar widget in the Control and Display section and employ it in the top half of your window. Locate the Text View widget and place one in the lower left of our window. Place a Button in the lower right and, from the General tab of the Properties panel in the lower right of Glade, set its label to ‘Save’.

4 The elements align

In the Packing tab of the Text View’s properties (lower right) activate the ‘Expand’ switch. This means the box will grow if the window is resized. In the Common tab, set the Vertical Alignment to ‘Fill’ so that the full height of our box is used. Set the Vertical Alignment for our button to ‘End’, so it doesn’t get freakishly huge.

5 Connecting signals and handlers

We now need to connect signals from our application to Python functions. This is done by defining a handler for each event that we care about. We are interested in when the user decides to close the window, so select window1 from the top right panel. In the Signals tab of the Properties panel, find the ‘delete-event’ and set its handler to ‘onDeleteWindow’.

6 Can’t stop the signals

We’re interested in the ‘clicked’ signal for the button, set its handler to ‘onButtonClick’. For the calendar, you’ll need to give the ‘day-selected’ signal the handler ‘onDaySelect’. Finally, we’ll also need to tie a number of signals, such as ‘month-changed’ , ‘prev-year’ and ‘nextyear’ to the handler ‘onPageChange’. Save your freshly rolled interface as ~/gtk3cal/calendar.glade.