Building a Text Editor

00:00 Building a Text Editor In this final part of the course, you’ll build a text editor application that can create, open, edit, and save text files. There are three essential elements in this application.

00:14 A button widget called btn_open for opening a file for editing, a button widget called btn_save for saving a file, and a text box widget called txt_edit for creating and editing the text file.

00:29 The three widgets will be arranged as seen on screen with the two buttons on the left-hand side of the window and the text box on the right-hand side.

00:38 The whole window should have a minimum height of 800 pixels and txt_edit should have a minimum width of 800 pixels. The layout should be responsive so that if the window is resized, then txt_edit is resized as well.

00:53 The width of the frame holding the buttons shouldn’t change.

00:58 You can achieve this desired layout using the .grid() geometry manager. The layout contains a single row and two columns, a narrow column on the left for buttons and a wider column on the right for the text box.

01:12 To set the minimum sizes for the window and text edit, you can set the minsize parameter of the window methods, row_configure, and column_configure to 800.

01:22 To handle resizing, you can set the weight parameters of these methods to one.

01:28 In order to get both buttons into the same column, you’ll need to create a Frame widget called frm_buttons. As per the layout, the two buttons should be stacked vertically inside of this frame with btn_open on top.

01:42 You could do that with either the .grid() or .pack() geometry managers, but for now, you’ll stick with .grid() since it’s a little easier to work with.

01:51 So now you have a plan. It’s time to start coding. The first step is to create all of the widgets that are needed. First, as you’d expect, you import tkinter then you create a new window with the title Simple Text Editor.

02:10 Next, you set the row and column configurations.

02:21 Take a look at line eight more closely. The minsize parameter of row configure is set to 800, and the weight is set to one. The first argument is zero, which sets the height of the first row to 800 pixels and makes sure that the height of the row grows proportionally to the height of the window.

02:39 There’s only one row in the application layout, so these settings apply to the entire window. Also, take a closer look at line nine. Here, you use column_configure to set the width and height attributes of the column with index one to 801 respectively.

02:57 Remember that row and column indices are zero-based, so these settings apply only to the second column. By configuring just the second column, the text box will expand and contract naturally when the window is resized, while the column containing the buttons will remain at a fixed width.

03:14 Then you create the four widgets you’ll need for the text box, the frame, and the open and save buttons.

03:37 Now you can work on the application layout. First, assign the two buttons to the frm_buttons Frame using the .grid() geometry manager.

03:57 These two lines of code create a grid with two rows and one column in the frm_buttons Frame, since btn_open and btn_save have their master attributes set to frm_buttons.

04:09 btn_ open is put in the first row and `btn _save` in the second row so the btn_ open appears above `btn _save in the layout just as you planned. Both btn_open` and btn_save have their sticky attributes set to ew, which forces the buttons to expand horizontally in both directions and fill the entire frame.

04:30 This ensures that both buttons are the same size. You place five pixels of padding around each button by setting the padx and pady parameters to five.

04:41 Only btn_open has vertical padding. Since it’s on top the vertical padding offsets the button down from the top of the window a bit and make sure that there’s a small gap between it and btn_save.

04:54 Now that frm_buttons is laid out and ready to go, you can set up the grid layout for the rest of the window. These

05:11 two lines of code create a grid with one row and two columns full window. You place frm_buttons in the first column and txt_edit in the second column, so that frm_buttons appears to the left of txt_edit in the window layout.

05:26 The sticky parameter for frm_buttons is set to ns, which forces the whole frame to expand vertically and fill the entire height of its column.

05:35 txt_edit fills the entire grid cell because you set its sticky parameter for nsew, forcing it to expand in every direction.

05:44 Now the application is complete add window.mainloop() to the bottom of the program and save and run the file.

05:53 You should see a window similar to the one on screen, and that looks great, but it doesn’t do anything yet, so you need to start writing the commands for the buttons.

06:04 You’ll start that process in the next section of the course by adding the ability to load text files into your editor.