Graphical User Interfaces GUIs are everywhere Most enduser

Graphical User Interfaces

GUIs are everywhere! • Most end-user software • Every phone app and web page

What is different about implementing GUIs? • Draw graphics • Handle inputs and events • Keep track of lots of state info

Widgets, controls, elements https: //www. usability. gov/how-to-and-tools/methods/user-interface-elements. html

Widgets, controls, elements https: //www. usability. gov/how-to-and-tools/methods/user-interface-elements. html

Widgets, controls, elements • Basics are provided by OS or library btn = Button(window, text="Click Me") btn. grid(column=1, row=0)

Lets examine a GUI https: //www. cs. cmu. edu/~aldrich/214/slides/gui-intro. pdf

GUIs are interactive How do you draw and process input at the same time? • What happens if you don’t? • Think about how a game has to work – Draw to screen – Take input from user – Perform logic “main loop”

Getting user input • Polling – Check if key is pressed – What if you check before/after it is pressed – Should you block? if Keyboard. Is. Down(KEY_SPACE) { Handle. Key. Space(); }

Getting user input • Message/event queue – Queue of every event that occurred – Process them when you can, in order

Getting user input • Event listener – Subscribe to listener and provide a callback – Many frameworks will use this my. Button. add. Event. Listener("click", my. Function); function my. Function() { text. Area. inner. HTML = "Hello World"; }

Next time: • Implementation details • Examples and demos • Have Python 3 or Go to follow along • Poll: Want me to cover VS Code?