Question

Here’s my current GUI layout for my checkers game:

As you can see, it consists of a Menu along the top, a Canvas on the left where I draw the checkerboard, a toolbar (Frame) on the top right where I have various formatting/navigation buttons, and a Text widget that is used to annotate moves. Currently, I am using a grid layout for the widgets.

Here’s what I need to do:

1. Be able to show/hide a scrollbar in the Text widget when the amount of text grows larger than the widget size. (This seems to require the grid layout, according to this article.)
2. Change the font and/or size of the text in the Text widget [via a Preferences dialog] and not leave weird gaps around the Text widget. (This seems to require a pack layout because the Text widget can only be given a width and height in characters not pixels … that means the Text widget grows or shrinks when I change the font or size, and the window won’t adjust to fit with a grid layout. I’ve been trying to use Font.measure to adjust the Text widget size according to the font selected, but I still get gaps because I can’t resize the widget down to the exact pixel.)
3. My final solution needs to be cross-platform (both Windows & Linux, and hopefully Mac).

Which layout can I use to meet my requirements? If neither will work completely, which layout (grid or pack) will get me closest to my goal? Thanks!

Answer 1

For this simple layout you could use grid, pack or both. Neither has a clear advantage in this particular case. Both have the resize behavior you desire.

Off the top of my head I would use a horizontal frame to hold the buttons, and pack the buttons in it. I would then probably use grid to place the toolbar, text widget and scrollbar inside a frame. Pack can be used too, either would work. That takes care of the right side.

If you want the menubar the way it is in the picture (ie: non-standard, only over the chessboard) I would use a similar technique: another frame for the left side with the menubar packed on the top, chessboard on the bottom.

i would then use pack in the main window, with statusbar on the bottom, the chessboard on the left, and then the text area on the right.

However, it’s better to use a standard menubar which means you don’t need a containing frame for the chessboard/menubar combination

Here’s a quick hack at one solution using a standard menubar. This uses the technique of putting most widgets as children of the parent, then using the in_ parameter to put them in a container. This makes it much easier to change the layout later since you don’t have to change a whole hierarchy, but only placement of widgets in containers.

import Tkinter as tk
import random

class App(tk.Tk):
    def __init__(self, *args, **kwargs):
        tk.Tk.__init__(self, *args, **kwargs)

        size = 40
        menubar = tk.Menu(self)
        menubar.add_cascade(label="Game")
        menubar.add_cascade(label="Options")
        menubar.add_cascade(label="Help")
        chessboard = tk.Canvas(width=8*size, height=8*size, borderwidth = 0,
                               highlightthickness=0)
        statusbar = tk.Label(self, borderwidth=1, relief="sunken")
        right_panel = tk.Frame(self, borderwidth = 1, relief="sunken")
        scrollbar = tk.Scrollbar(orient="vertical", borderwidth=1)
        # N.B. height is irrelevant; it will be as high as it needs to be
        text = tk.Text(background="white",width=40, height=1, borderwidth=0, yscrollcommand=scrollbar.set)
        scrollbar.config(command=text.yview)

        toolbar = tk.Frame(self)
        for i in range(10):
            b = tk.Button(self, text="B%s" % i, borderwidth=1)
            b.pack(in_=toolbar, side="left")

        self.config(menu=menubar)
        statusbar.pack(side="bottom", fill="x")
        chessboard.pack(side="left", fill="both", expand=False)
        toolbar.grid(in_=right_panel, row=0, column=0, sticky="ew")
        right_panel.pack(side="right", fill="both", expand=True)
        text.grid(in_=right_panel, row=1, column=0, sticky="nsew")
        scrollbar.grid(in_=right_panel, row=1, column=1, sticky="ns")
        right_panel.grid_rowconfigure(1, weight=1)
        right_panel.grid_columnconfigure(0, weight=1)

if __name__ == "__main__":
    app = App()
    app.mainloop()