Lecture 24: Graphical User Interface

1 View Tree

Views are arranged into a hierarchy of containment, in which some views contain other views. Views are arranged into a hierarchy of containment, in which some views contain other views.

1.1 How the View Tree is Used

• Output: Views are responsible for displaying themselves, and the view tree directs the display process.
• Input: Views can have input handlers, and the view tree controls how mouse and keyboard input is processed.
• Layout: The view tree controls how the views are laid out on the screen, i.e. how their bounding boxes are assigned.

1.2 Input Handling

GUI input event handling is an instance of the Listener pattern (also known as Publish-Subscribe). In the Listener pattern:

• An event source generates a stream of discrete events, which correspond to state transitions in the source.
• One or more listeners register interest (subscribe) to the stream of events, providing a function to be called when a new event occurs.

The control flow through a graphical user interface proceeds like this:

• A top-level event loop reads input from mouse and keyboard. In Java Swing, and most graphical user interface toolkits, this loop is actually hidden from you. It’s buried inside the toolkit, and listeners appear to be called magically.
• For each input event, it finds the right view in the tree (by looking at the x,y position of the mouse) and sends the event to that view’s listeners.
• Each listener does its thing (which might involve e.g. modifying objects in the view tree), and then returns immediately to the event loop.

2 Separating Frontend from Backend

Model-View-Controller pattern:

• It separates the user interface frontend from the application backend, by putting backend code into the model and frontend code into the view and controller.
• The controller is supposed to handle input, and the view is supposed to handle output.

The Model:

• The model is responsible for maintaining application-specific data and providing access to that data. Models are often mutable, and they provide methods for changing the state safely, preserving its representation invariants.
• A model must also notify its clients when there are changes to its data, so that dependent views can update their displays, and dependent controllers can respond appropriately.
• Models do this notification using the listener pattern, in which interested views and controllers register themselves as listeners for change events generated by the model.

The View Objects:

• View objects are responsible for output. The view queries the model for data and draws the data on the screen.
• It listens for changes from the model so that it can update the screen to reflect those changes.

The Controller:

• The controller handles the input. It receives keyboard and mouse events, and instructs the model to change accordingly.

Notice: Instances of the MVC pattern appear at many scales in GUI software.

3 Background Processing in Graphical User Interfaces

• Graphical user interfaces are event-driven programs, which means (generally speaking) everything is triggered by an input event handler.
• Input handling and screen repainting is all handled from different threads.
• If you use background threads to modify the model without blocking the event-dispatch thread, then you have to make sure your data structure is threadsafe.
• Another important shared mutable datatype in your GUI is the view tree. 如果view tree objects不是线程安全的，那么所有对view tree object 的修改需要使用 event-dispatch thread.

---

Reference

[1] 6.005 — Software Construction on MIT OpenCourseWare | OCW 6.005 Homepage at https://ocw.mit.edu/ans7870/6/6.005/s16/