Class Checkpoint

TKinter · Part 2 of 2

Tkinter GUIs: windows, labels, entry boxes and buttons

Build your first Python GUI with Tkinter, from an empty window to a login form and a working register.

#computer science#gcse#python#tkinter#wjec
← Previous part
Build your first Python GUI with Tkinter, from an empty window to a login form and a working register. This lesson joins videos 48 to 51 of my WJEC GCSE Computer Science Unit 2 Python series into one walkthrough. You will create a window with tk.Tk(), title() and geometry() and keep it open with mainloop(). Then you add labels and style them with font, fg and bg, read, clear and fill Entry boxes with get(), delete() and insert(), hide a password with show="*", and make buttons run a function with command=. Chapters 0:00 Introduction 0:35 Your first window 2:30 Labels 4:42 Entry boxes 7:23 Buttons 9:37 Summary Each part ends with a "Your turn" task, so pause and try it before the next chapter. From section G, Graphical user interfaces with Tkinter (specification references 2.2.1 and 2.3.1). The narration uses an AI clone of my own voice.
Transcript
  1. Tkinter GUIs.
  2. In this video, you will build your first Python programs with windows, labels, boxes
  3. and buttons, using Tkinter.
  4. There are 4 parts. First, you will create a window and give it a title and a size.
  5. Next, you will add labels and change their font and colour.
  6. Then you will read, clear and fill entry boxes, and hide a password.
  7. Finally, you will make buttons run a function when they are clicked.
  8. Each part ends with a task for you to try.
  9. Pause the video when you get there, and try it before you move on.
  10. Part 1. Your first window. You will create a Tkinter window, give it a title and a
  11. size, and keep it open with mainloop.
  12. Click File, then New File.
  13. Type import tkinter as tk. This loads Tkinter, and tk
  14. is the short name you use for it from now on.
  15. Next, type window equals tk.Tk, with a capital T, followed by empty
  16. brackets. This creates the main window.
  17. Add window.title, and in brackets and speech marks, Pentre Bach Pre-School.
  18. This sets the text in the title bar.
  19. Add window.geometry, and in brackets and speech marks, 400, small x,
  20. 300. This makes the window 400 pixels wide and 300 pixels high.
  21. Use a small letter x, not a times sign, and no spaces.
  22. Add window.mainloop, with empty brackets, as the last line.
  23. mainloop keeps the window open until the user closes it.
  24. Without it, the window opens and closes straight away.
  25. Click File, then Save As, and save the file as
  26. first_window.py.
  27. Press F5 to run it. An empty grey window opens, 400 pixels wide and
  28. 300 pixels high, with Pentre Bach Pre-School in its title bar.
  29. Nothing appears in the Shell.
  30. Change the numbers in geometry to 600, small x, 200.
  31. Save and press F5 again. This time you see a wider, shorter window.
  32. Close the window with the X in its corner.
  33. The program ends, and the Shell shows the 3 greater than signs of the prompt again.
  34. Your turn. Change the title to Staff System and the size to 500 by 400,
  35. then save and run it to check the new window.
  36. Part 2. Labels. You will add labels to a window and change their font, size and
  37. colour.
  38. Click File, then New File, and type the 4 lines that create the window.
  39. Import tkinter as tk, set window equals tk.Tk,
  40. set window.title to Labels, and window.geometry to 400,
  41. small x, 200.
  42. Now create welcome_label. Set it equal to tk.Label, and in the
  43. brackets give it the window, a comma, then text equals Welcome to
  44. Pentre Bach Pre-School in speech marks.
  45. The first thing in the brackets is always the window the label goes in.
  46. Call welcome_label.pack, with empty brackets.
  47. A label does not appear until you place it in the window, and pack is what places
  48. it.
  49. Next, create heading_label with the text Staff System, and add font equals,
  50. then in brackets, Arial in speech marks, 20, and bold in speech marks.
  51. The 3 parts are the font name, the size and the style.
  52. Then create hours_label with the text Open 8am to 6pm, font
  53. Arial 12, f g equals white, and b g equals green.
  54. f g sets the text colour, and b g sets the background colour.
  55. Pack both new labels, and add window.mainloop at the end.
  56. Save the file as labels.py and press F5 to run it.
  57. A 400 by 200 window titled Labels shows 3 labels stacked in the centre.
  58. Welcome to Pentre Bach Pre-School is in the normal font.
  59. Staff System is in large bold Arial 20.
  60. Open 8am to 6pm is in Arial 12, with white text on a green background.
  61. Try other colour names, such as blue or orange, and other sizes, then run it again.
  62. Your turn. Add a fourth label called phone_label with the text Call
  63. 01558 123456, in Arial 14, with black text on
  64. a yellow background, then pack it and run the program.
  65. Part 3. Entry boxes. You will read text from an entry box with get, clear it with
  66. delete, fill it with insert, and hide a password with show equals the star symbol.
  67. Click File, then New File. Import tkinter as tk, and create a
  68. window titled Login, 300 by 200.
  69. Add a label with the text Username, then an Entry box called username_entry,
  70. set to tk.Entry with the window in brackets.
  71. Pack both.
  72. Add username_entry.insert, and in brackets, 0, a comma,
  73. and staff in speech marks. This puts starting text in the box.
  74. 0 means the first position.
  75. Add a label with the text Password, and an Entry box called password_entry
  76. with show equals the star symbol in speech marks.
  77. Each character you type shows as a star.
  78. Pack both.
  79. Now write the show_details function, near the top of the program.
  80. Type def show details, empty brackets and a colon.
  81. Inside, set username equals username_entry.get, and password
  82. equals password_entry.get. get reads what is in each box.
  83. Then print Username, colon, and username, and print Password, colon, and
  84. password, so the text shows in the Shell.
  85. Write the clear_boxes function.
  86. Inside it, type username_entry.delete, with 0, a comma, and
  87. tk.END in capitals. Do the same for password_entry.delete 0 to
  88. END removes everything from the first character to the end.
  89. Add a button with the text Show and command equals show details, and a button with
  90. the text Clear and command equals clear boxes.
  91. Pack them, then add window.mainloop.
  92. Save the file as entry_boxes.py and press F5.
  93. The Login window shows a Username box that starts with staff, a Password box, and
  94. the Show and Clear buttons.
  95. Delete staff. Type jjones as the username and Parkwood27 as the
  96. password. The password box shows only stars.
  97. Then click "Show".
  98. Look at the Shell to see what get read: Username: jjones, and Password:
  99. Parkwood27. The real password is printed, even though the box hid it.
  100. Then click "Clear" and watch both boxes empty.
  101. Your turn. Change the insert line so the Username box starts with the text admin,
  102. then run it, click "Show" without changing anything, and check what the Shell
  103. prints.
  104. Part 4. Buttons. You will make a button run a function when it
  105. is clicked, using command equals.
  106. Click File, then New File, and type import tkinter
  107. as tk.
  108. Create the variable children_in, and set it to 0.
  109. Write the child_arrives function.
  110. Type def child arrives, empty brackets and a colon.
  111. Inside, type global children in, so the function can change the variable outside
  112. it. Then set children in equals children in plus 1, and print Children
  113. in, colon, and children in. It adds 1 to the count and prints the new count.
  114. Write the child_leaves function in the same way.
  115. It also starts with global children in, then takes 1 away with children in equals
  116. children in minus 1, and prints the new count.
  117. Create a window with window equals tk.Tk, title it Register,
  118. and set the geometry to 300, small x, 150.
  119. Create arrive_button. Set it equal to tk.Button, with the
  120. window, text equals Child arrives, and command equals child arrives.
  121. Do not put brackets after the function name.
  122. If you do, it runs once when the program starts, instead of on each click.
  123. command equals just names the function to run.
  124. Create leave_button with the text Child leaves and command equals
  125. child leaves. Pack both buttons and add window.mainloop.
  126. Save the file as buttons.py and press F5 to run it.
  127. A window titled Register shows 2 buttons, one above the other: Child arrives and
  128. Child leaves.
  129. Click "Child arrives" 3 times, then "Child leaves" once, and watch the count in the
  130. Shell. It shows Children in: 1, then 2, then 3, and then back down to
  131. 2.
  132. Your turn. Add a third button called Reset with a function that sets children in
  133. back to 0 and prints the count, then run it and check that clicking "Reset" prints
  134. Children in: 0.
  135. That's Tkinter GUIs done. You made a window, added labels,
  136. read and filled entry boxes, and made buttons run a function when they're clicked.
  137. If you skipped any of the 4 tasks, go back to the end of that part and have a go.
  138. Next, watch the next video on screen, or pick another topic from the playlist.