Graphical User Interfaces



Graphical User InterfacesMost user interaction with computer applications is done using graphical user interfaces (GUIs) rather than with console inputting and printing. Model 1. Widgets-76200254635123456789101112131415from guizero import App, Text, PushButton, TextBoxclass HelloApp: def __init__(self, app): app.title = 'Hello Application' app.font = 'Helvetica' app.text_size = 12 PushButton(app, text='Press Me!') Text(app, text="Hello, GuiZero!")app = App()HelloApp(app)app.display()0123456789101112131415from guizero import App, Text, PushButton, TextBoxclass HelloApp: def __init__(self, app): app.title = 'Hello Application' app.font = 'Helvetica' app.text_size = 12 PushButton(app, text='Press Me!') Text(app, text="Hello, GuiZero!")app = App()HelloApp(app)app.display()The following example creates a simple GUI application with two UI elements, called widgets.Questions (15 min)Based on the Python code:What GUI library is being used here?What do the first three lines of the HelloApp constructor (lines 6-8) do? (Try commenting out each one in turn and run the program).Why do the PushButton and Text constructors (called in lines 10 & 11) have the app parameter as their first argument?What do the last three lines of the program (lines 13-15) do?Copy the code and run it in Thonny.Draw a picture of the application. Label your picture with the basic widgets that you see (PushButton and Text).Which lines of code produce the two widgets?PushButtonTextModify these two lines of code to change the text displayed by the two widgets.Modify the code to add a TextBox widget, which is like a Text widget but allows the user to type in text. For an example, see the TextBox documentation. Add this TextBox above the button.Model 2. EventsGUI interfaces are driven by user events such as the user clicking on a button. The following code adds an event handler to respond to these events.0-6265312345678910111213141516171819from guizero import App, Text, PushButton, TextBoxclass HelloApp: def __init__(self, app): app.title = 'Hello Application' app.font = 'Helvetica' app.text_size = 12 self.message_text = Text(app, text="Hello, GuiZero!") PushButton(app, text='Press Me!', command=self.button_pressed) def button_pressed(self): self.message_text.value = 'You pressed the button.'app = App()HelloApp(app)app.display()0012345678910111213141516171819from guizero import App, Text, PushButton, TextBoxclass HelloApp: def __init__(self, app): app.title = 'Hello Application' app.font = 'Helvetica' app.text_size = 12 self.message_text = Text(app, text="Hello, GuiZero!") PushButton(app, text='Press Me!', command=self.button_pressed) def button_pressed(self): self.message_text.value = 'You pressed the button.'app = App()HelloApp(app)app.display()Questions (15 min)Based on the Python code:Highlight the key changes have been made in this version of the code above.What does the purpose of the new command argument to the PushButton constructor?How does the button_pressed method get called?What lines above define the event handler method?What additional data attribute does the HelloApp instance (self) now have that it did not have in Model 1? What is the purpose of this new attribute?Copy the code and run it in Thonny. Be sure to add in your new TextBox widget from the previous exercise. What happens now when you press the button?Try changing command=self.button_pressed to command=self.button_pressed().With this edit, what now happens when the application starts? Why?With this edit, when is the event handler self.button_pressed called?With this edit, what happens when you press the button? Why?When you are finished experimenting, revert the edit. Modify the code so that if the user enters a message (e.g., “hello”) in the text box and presses the button, the message box displays what they just typed (e.g., “You just typed: hello”). As you can see in line 14, you can access the value in a Text or TextBox widget by accessing its value attribute.Model 3. Layout0400685123456789101112131415161718192021from guizero import App, Text, PushButton, TextBox, Boxclass HelloApp: def __init__(self, app): app.title = 'Hello Application' app.font = 'Helvetica' app.text_size = 12 box = Box(app, layout='grid', border=2) Text(box, text='Type something here: ', grid=[0,0]) self.input_box = TextBox(box, grid=[1,0]) PushButton(app, text='Press Me!', command=self.button_pressed) self.message_text = Text(app, text="Hello, GuiZero!") def button_pressed(self): self.message_text.value = 'You typed: ' + self.input_box.valueapp = App()HelloApp(app)app.display()00123456789101112131415161718192021from guizero import App, Text, PushButton, TextBox, Boxclass HelloApp: def __init__(self, app): app.title = 'Hello Application' app.font = 'Helvetica' app.text_size = 12 box = Box(app, layout='grid', border=2) Text(box, text='Type something here: ', grid=[0,0]) self.input_box = TextBox(box, grid=[1,0]) PushButton(app, text='Press Me!', command=self.button_pressed) self.message_text = Text(app, text="Hello, GuiZero!") def button_pressed(self): self.message_text.value = 'You typed: ' + self.input_box.valueapp = App()HelloApp(app)app.display()GUI libraries provide a variety of ways to place the widgets on the interface. Questions (15 min)Based on the Python code:Highlight the key changes have been made in this version of the code above.What layout mode does this GUI use? How does that compare with the mode used in the previous examples? For background information, see the GuiZero Layout tutorial.Copy the code and run it in Thonny.Describe the different layout you get with this new code.What widgets are contained within the 2-pixel border (line 10)?What do the two arguments to the named grid argument (in line 11) do?Modify the code so that the push button and the message text are placed side-by-side. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download