User Interface

The application’s user interface is defined using two UI files: window.ui describes the application’s window and menus.ui describes its app menu. The window.ui file was created using the Glade user interface design tool and menus.ui was written using a text editor.

Application Window

The window is a simple collection of widgets contained within a GtkApplicationWindow widget. At the top of the window is a HdyTitleBar from the libhandy library which contains a standard GtkHeaderBar with a title string and a GtkMenuButton that is used at run-time to let the user access the app menu.

The application window as shown in Glade

Beneath the title bar is a GtkBox container that holds a GtkGrid, where the game is played, and two GtkLabel widgets that are used to show scores and other messages.

The structure of the window is shown in the following figure:

Widget hierarchy of the application window

This hierarchy is presented to the designer in the Glade user interface, and is convenient for selecting and navigating between widgets.

The Glade Tutorials page on the GNOME website provides links to tutorials that give instruction on how to use the Glade tool to construct user interfaces.

Primary Menu

Unlike the user interface for the window, the menu’s UI file was defined in a text editor and relates menu items to actions that the application’s code can handle:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <menu id="menu">
    <section>
      <item>
        <attribute name="action">app.new_game</attribute>
        <attribute name="label" translatable="yes">New Game</attribute>
    </item>
      <item>
        <attribute name="action">app.quit</attribute>
        <attribute name="label" translatable="yes">_Quit</attribute>
        <attribute name="accel">&lt;Primary&gt;q</attribute>
    </item>
    </section>
  </menu>
</interface>

The actions are defined to be application-wide: each has the app. prefix. Their strings are marked as translatable so that they will be included in the message catalogs described in Translations Directory. Actions are described in more details in the Actions section of the Python GTK 3 Tutorial.