Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Programming with GUIs. Join the course to learn more.

Skip to 0 minutes and 3 seconds In this step, you’re going to build a text editor in GUI Zero. Before you begin, plan out your editor by thinking about what it needs to do and which widgets are best suited to the task. If you open a text editor like Notepad, you can see some of the options it gives you like Open and Save. You’ll also need some text boxes to write into and to specify file names and some push buttons to say open and save your files. So take a moment to design the layout of your editor. Will you put the Save button at the top or the bottom of your GUI? Will it be positioned next to the Open button?

Skip to 0 minutes and 45 seconds How big do you want your text box to be? So here is a script from my text editor, and there’s a copy in the article text below. How would you modify this code and change the design?

Skip to 1 minute and 0 seconds Now we can see in this design, a text box fills the majority of the screen. And all of the controls for a file name and buttons to open and save the files are at the top. Now I’ve kept the controls together by using a box called File_controls. Now at the moment, the Save and Open buttons don’t do anything. I haven’t added the code to do that. So let’s do that by adding two new functions.

Skip to 1 minute and 35 seconds We can see that there’s an open file function that loads the text contents of the file into the editor. It does this by opening a file which matches the value of the text box file_name. The function then sets the value of the editor text box to be the contents of the file. And the save file function does the same thing but just in reverse. Now I need to instruct the Save button to call the save file function when it’s clicked by adding a command parameter to that widget. We can do that by saying command equals save_file.

Skip to 2 minutes and 15 seconds Now can you make the same edit to the open button widget to instruct it to call the open file function? What abilities and tools might people using your text editor want? How could they resize text or perhaps change the font? In the next step, you’re going to work on making your text editor more interesting by giving the users more style options. Be sure to share your creations in the comments and help one another If? You get stuck.

Making a text editor

In this step we are going to use the knowledge we have gained so far to build a text editor in guizero.

Getting started

First we need to plan our text editor by thinking about what it needs to do and which widgets are best suited to the task. Look at an existing text editor for inspiration (open WordPad or similar, and click on the file icon (or equivalent) to see some options that the text editor gives you).

You’re going to build a very basic text editor in this step. For this you will need:

  • A TextBox to write into
  • A TextBox to specify a filename
  • A PushButton to save our file
  • A PushButton to open saved files

Take a moment to design the layout of your text editor, incorporating all four elements. Will you put the save button at the top or bottom of your GUI? Will it be positioned next to the open button? How big do you want your TextBox to be?

I’m going to work through adding each component. Try to modify the code as we go so that your text editor looks like your design. Remember that guizero adds widgets in the order they are created, starting from the top. This means you might have to reorder the following code to recreate your design.

I’ll begin by designing each widget that our text editor is comprised of, before writing functions to make them work as a text editor.

My text editor will have all of the controls at the top and a TextBox filling the rest of the screen. From left to right, there will be a box for a file name, a button to open files, and a button to save them.

A sketch of a text editor design. Under the windows title bar is a long horizontal box labelled "filename" and two smaller boxes labelled "OPEN" and "SAVE", all in one row across the width of the window. Another box labelled "my editor" fills up most of the rest of the space in the window below that row.

The easiest way to arrange these controls and keep them together is to put them in a Box. It’s named file_controls because it houses the controls for creating and saving a file, but you could name yours something else as long as it clearly describes what the box contains.

from guizero import App, TextBox, PushButton, Box

app = App(title="texteditor")

# create a box to house the controls, we want the box to span the entire width of the app
file_controls = Box(app, align="top", width="fill")

# create a TextBox for the file name
file_name = TextBox(file_controls, text="text_file.txt", width=50, align="left")

# create a save button which uses the save_file function
save_button = PushButton(file_controls, text="Save",  align="right")

# create an open button which uses the open_file function
open_button = PushButton(file_controls, text="Open",  align="right")

# create a TextBox which is not in the box and fills the rest of the GUI
editor = TextBox(app, multiline=True, height="fill", width="fill")

app.display()

A guizero app with a layout matching that above. Below the window title bar is a textbox and "Open" and "Save" buttons in a row. Below this is a large empty textbox.

Currently, the save and open buttons don’t do anything. In order to instruct them to open or save a file, I need to create two functions.

# function for reading files
def open_file():
    with open(file_name.value, "r") as f:
        editor.value = f.read()

# function for writing files
def save_file():
    with open(file_name.value, "w") as f:
        f.write(editor.value)

These functions use the Python function open. If you are unfamiliar with it, you can read more here.

Before reading further, try to work out what the parameters file_name.value and editor.value are and determine what each function will do when called.

The open_file() function opens a file where the name of the file matches the value property of the TextBox file_name. It then sets the value property of the editor TextBox to be the contents of the file, i.e. it loads the text contents of the file into the editor TextBox.

The save_file() function performs the reverse. Can you deduce what file_name.value and editor.value are in this case?

Finally, I need to instruct the open and save PushButtons to call their respective functions when they are activated. This is done by setting the command parameter of each to the correct function, i.e. by replacing line 11 above with

save_button = PushButton(file_controls, text="Save", command=save_file, align="right")

Can you make the equivalent edit to the open_button widget?

When your text editor is functioning, you can work on making it more interesting by giving its users more style options. We’ll do this in the next step so remember to save your code.

Challenge

Before moving on to the next step, consider what abilities and tools a user might want to have when editing their text. Will they want to resize their text or change its font, for example? You might want to use text editors such as Notepad or Textedit for inspiration.

Share this video:

This video is from the free online course:

Programming with GUIs

Raspberry Pi Foundation