Skip main navigation

Python and guizero: Intro to boxes

This article introduces how boxes are used to layout user interfaces using Python and guizero, and common challenges.

In this article, we are going to look at a specific kind of widget called a Box and learn how it can be used to control the layout of our GUI.

What is a Box?

A Box is a widget that acts as a container for other widgets. It is invisible by default and can be used to more easily place other widgets and alter their design.

You can create a Box in the same way that other widgets are created. The following code creates a Box called box which is part of the App called app:

 

from guizero import App, Box
app = App()
box = Box(app)
app.display()

 

When you create a box, you can set several starting parameters:

 

 

    • master: This describes where the Box is contained; in the above case the Box is contained in app.

 

    • align: This is used in the ‘auto’ layout to describe where the box will appear in its container — we’ll learn more about this later this week.

 

    • grid: This is used in the ‘grid’ layout to describe where the box will appear in the grid — again, we’ll learn more about this in a later step.

 

    • layout: This parameter describes how widgets inside the Box are laid out, i.e. in a ‘grid’ or ‘auto’ format. We will look at these two formats in more detail later this week and in Week 3.

 

    • visible: This parameter determines if the Box will be visible, which it is by default.

 

    • enabled: This parameter determines whether the Box will be enabled; if you don’t set this parameter it will take the same value as the same parameter for the master widget housing the Box.

 

    • width and height: These parameters describe the size of the box; they can be set to "fill" or specified in pixels.

 

    • border: This parameter determines the thickness of the border of the Box; the default is zero (i.e. no border), and a border can be made either by setting this parameter to True or to a number greater than 1.

 

 

A Box is not visible until it houses a widget. We will now look at how to add a widget to a Box and then we can see what happens when we change some of the above parameters.

 

Putting something in a Box

 

If you want to place a widget inside a Box, you simply set the master parameter of that widget to the name of your Box — this is the first parameter inside the brackets. For example, in the following code the PushButton is placed inside the Box:

 

from guizero import App, Box, PushButton
app = App()
box = Box(app)
button = PushButton(box)
app.display()

 

Multiple widgets can be housed in the same Box. Try adding another PushButton (or a different kind of widget) to your Box.

 

We will now create a new Box and change some of the starting parameters. Before you run the following code, try to imagine how it will appear different to the app we created above.

 

from guizero import App, Box, PushButton
app = App()
box = Box(app, align="left", width="fill", border=2)
button = PushButton(box)
button1 = PushButton(box, text="another button")
app.display()

 

A GUI window. In the centre of the window are two buttons, one above the other. The top button reads "Button", the bottom reads "another button". A black border surrounds a rectangle which covers the entire width of the GUI window, with its top just above the top button and its bottom just below the bottom button.

 

As we will see this week, Box widgets are extremely useful. They come in handy when attempting more sophisticated GUI layouts and can be used to position multiple widgets at the same time; we will see this in a later step. They are also useful when creating lots of widgets that all need to look the same, as we shall see in the next step.

 

Challenges

 

 

    • Create an app that contains three boxes of different sizes.

 

    • Change some more starting parameters of your boxes.

 

    • Create three more widgets and place each one inside a different Box. Can you guess what the app will look like before you run your script?

 

Note: Code in comments should be enclosed in tilde characters (~~~) — three tildes before and after the code. Refer to our ‘Sharing code on FutureLearn’ guide for more information.

This article is from the free online

Programming with GUIs

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education