Level 3 Computing Year 2 Lecturer: Phil Smith

Transcription

1 Level 3 Computing Year 2 Lecturer: Phil Smith

2 We looked at: Debugging Previously BTEC Level 3 Year 2 Unit 16 Procedural programming

3 Now Now we will look at: GUI applications. BTEC Level 3 Year 2 Unit 16 Procedural programming

4 What have we done so far Understand key features of procedural programming. Written a procedural program. Know how to debug a procedural program. In other units you have Built a database in Microsoft Access. (Unit 18) Used MySql with Php. (Unit 27) BTEC Level 3 Year 2 Unit 16 Procedural programming

5 Graphical User Interface CONCEPT: A graphical user interface allows the user to interact with the operating system and other programs using graphical elements such as icons, buttons and dialog boxes. A computer s user interface is the part of the computer that the user interacts with. It was in the 1980s that this new type of interface known as a graphical user interface came into use in commercial operating systems. Now we see and use them everywhere. GUI programs are associated with event driven programs. However, we can write a GUI interface in Python.

6 GUI Window Much of the interaction with a GUI is done through dialog boxes, which are small windows that display information and allow the user to perform actions.

7 Important concept Instead of typing commands according to a specified syntax, the user interacts with graphical elements such as icons, buttons, and slider bars etc. In a text based environment, such as a command line interface, programs determine the order in which things happen. In a GUI environment, however, the user determines the order in which things happen.

8 Graphical User Interface Python does not have GUI programming features built into the language itself. CONCEPT: In Python you can use the tkinter module (program library) to create simple GUI programs. There are other third party modules you can download to create GUI s. E.g. Qt designer, wxglade etc We will use tkinter as it is supplied with Python.

9 Graphical User Interface The name tkinter is short for Tk interface. It is named this because it provides a way for Python programmers to use a GUI library named Tk. Many other programming languages use the Tk library as well (including IDLE).

10 Graphical User Interface A GUI program presents a window with various graphical widgets that the user can interact with or view. The tkinter module provides 15 widgets.

11 GUI widgets

12 Graphical User Interface In the.net world these widgets are called controls. We won t cover all of the tkinter widgets, but we will learn how to create simple GUI programs that gather input, display data and respond to events. Note IDLE uses tkinter for its interface so testing our GUI s using IDLE may give unpredictable results. pycharm or Visual studio may be better or another editor of your choice.

13 GUI Window Try this # be careful with the case on the import statement. import tkinter def main(): # Create the main window widget. main_window = tkinter.tk() # Enter the tkinter main loop. tkinter.mainloop() # Call the main function. main() What do you get?

14 GUI Window Result

15 GUI Window Line 3 imports the tkinter module. Inside the main function, line 7 creates an instance of the tkinter module s Tk class, and assigns it to the main_window variable. This object is the root widget, which is the main window in the program. Line 10 calls the tkinter module s mainloop function. This function runs like an infinite loop until you close the main window. This is an event loop.

16 GUI Window CONCEPT: You use the Label widget to display text in a window. To make a Label widget you create an instance of the tkinter module s Label class. Label = tkinter.label(main_window, text= Hello World! )

17 GUI Window add a label 1. from tkinter import * 2. def main(): 3. # Create the main window widget. 4. main_window = Tk() 5. # Create a Label widget containing the 6. # text 'Hello World!' 7. label = Label(main_window, text='hello World!') 8. # Call the Label widget's pack method. 9. label.pack() 10. # Enter the tkinter main loop. 11. mainloop() 12. # Call the main function. 13. main()

18 GUI Window # Call the Label widget's pack method. label.pack() # Enter the tkinter main loop. mainloop() With widgets we need to add (pack) them to the form. So the label.pack statement calls the Label widget s pack method. The pack method determines where a widget should be positioned, and makes the widget visible when the main window is displayed. (You call the pack method for each widget in a window.) The final statement calls the tkinter module s mainloop which displays the program s main window and listens for any form events. This is the event loop.

19 GUI Window So how do we pre define the size of our form? The Place geometry manager allows you explicitly set the position and size of a window, either in absolute terms, or relative to another window. The place manager can be accessed through the place method. It can be applied to all standard widgets. # width x height + x_offset + y_offset: root.geometry("170x ") Notice this is entered as a string.

20 GUI Window Button widgets CONCEPT: You use the Button widget to create a standard button in a window. When the user clicks a button, a specified function or method is called. A Button is a widget that the user can click to cause an action to take place. When you create a Button widget you can specify the text that is to appear on the face of the button, and the name of a callback function. A callback function is a function or method that executes when the user clicks the button.

21 GUI Window Button widgets NOTE: A callback function is also known as an event handler because it handles the event that occurs when the user clicks the button. To add a button my_button = tkinter.button(main_window, \text='click Me!', \ command=do_something) Notice the command=do_something, this is the callback function you will need to write to handle the click event.

22 GUI Window Button widgets For example def do_something(): # Display an info dialog box. tkinter.messagebox.showinfo('response', \ 'Thanks for clicking the button.') When the user clicks the button. The do_something function is called. Here we use a messagebox to display a message on the screen. You may have to add this statement to your program. import tkinter.messagebox

23 Summary What have we learnt What GUI applications are. How GUI applications work. Advantages/disadvantages of GUI compared to command based programs. BTEC Level 3 Year 2 Unit 16 Procedural programming