1. GUIs Model/View/Controller Layouts
Computer Science 209
GUIs
Model/View/Controller
Layouts

2. Graphical User Interfaces
A GUI provides a human user with a view of the state of a data model and with controls for manipulating it
A GUI consists of windows, icons, a mouse, and pull-down menus (WIMP), among other things

3. Event-Driven Programming
An application sets up and displays a window
The application waits for user events, such as mouse clicks on buttons or menu items
The application responds to these events by manipulating the data model and updating the display

4. Model/View/Controller Pattern
In the MVC pattern
The model is responsible for managing the data and updating the view
The view is responsible for displaying the data and controls (buttons, etc.)
The controller listens for user events and informs the model of them

5. Model/View/Controller Pattern
displays
View
listens
Controller
Model
notifies

6. Separation of Concerns
We can keep the model fixed and change the view
We can keep the view fixed and change the model
Each control in the view has its own set of listeners, each of which is responsible for acting on a distinct event

7. Which Toolkit to Use? BreezySwing is for quick and easy GUIs in Java
Swing and AWT are standard and are for professional-quality GUIs
A newer toolkit, called JavaFX, available starting with Java 7

8. Example: A Data Model
public class Die{
private int value;
public Die(){
roll(); }
public void roll(){
value = (int)(Math.random() * 6) + 1;
public String toString(){
return "" + value;
All files in GUIExamples.zip in the Resources folder on Sakai

9. Example: An Empty Window
import javax.swing.JFrame;
public class GUIApp{
public static void main(String[] args){
final JFrame view = new JFrame();
view.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
view.setSize(200, 200);
view.setVisible(true); }
main instantiates the frame and sets its principal attributes

10. Specializing the View
import javax.swing.JFrame;
public class GUIApp{
public static void main(String[] args){
final JFrame view = new MainView1();
view.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
view.setSize(200, 200);
view.setVisible(true); }
Define a subclass of JFrame to represent the view
import javax.swing.*;
import java.awt.*;
public class MainView1 extends JFrame{
// Code for specializing the view }

11. Add Two Controls
The view’s constructor sets the attributes of the controls and layout and adds them to the frame
import javax.swing.*;
import java.awt.*;
public class MainView1 extends JFrame{
private JTextField diceField = new JTextField(1);
private JButton rollButton = new JButton("Roll");
public MainView1(){
this.setTitle("Roll the Die");
diceField.setEditable(false);
diceField.setHorizontalAlignment(JTextField.CENTER);
Container c = this.getContentPane();
c.add(diceField, BorderLayout.NORTH);
c.add(rollButton, BorderLayout.SOUTH); }

12. Hook Up the Model and the View
import javax.swing.JFrame;
public class GUIApp{
public static void main(String[] args){
final JFrame view = new MainView2(new Die());
view.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
view.setSize(200, 200);
view.setVisible(true); }
The GUIApp class instantiates the model and the view and connects them

13. Display the Data Model import javax.swing.*; import java.awt.*;
public class MainView2 extends JFrame{
private JTextField diceField = new JTextField(1);
private JButton rollButton = new JButton("Roll");
private Die model;
public MainView2(Die model){
this.model = model;
setTitle("Roll the Die");
diceField.setEditable(false);
diceField.setHorizontalAlignment(JTextField.CENTER);
diceField.setText(model.toString());
Container c = this.getContentPane();
c.add(diceField, BorderLayout.NORTH);
c.add(rollButton, BorderLayout.SOUTH); }

14. Listening and Responding
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class MainView3 extends JFrame{
private JTextField diceField = new JTextField(1);
private JButton rollButton = new JButton("Roll");
private Die model;
public MainView3(Die model){
this.model = model;
this.setTitle("Roll the Die");
diceField.setEditable(false);
diceField.setHorizontalAlignment(JTextField.CENTER);
diceField.setText(model.toString());
rollButton.addActionListener(new RollListener());
Container c = this.getContentPane();
c.add(diceField, BorderLayout.NORTH);
c.add(rollButton, BorderLayout.SOUTH);

15. Listening and Responding
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class MainView3 extends JFrame{
private JTextField diceField = new JTextField(1);
private JButton rollButton = new JButton("Roll");
private Die model; …
private class RollListener implements ActionListener{
public void actionPerformed(ActionEvent e){
model.roll();
diceField.setText(model.toString()); }

16. Components, Containers, and Layouts
Some GUI components are primitives, such as buttons and fields
Others are containers in which components can be placed, such as frames and panels (panels can be nested recursively)
The manner of organizing components can vary with the container and with the application

17. Layout Managers
Components are added to a container under the influence of a layout manager
The default layout manager for frames and dialogs is BorderLayout
The default layout manager for panels and applets is FlowLayout

18. The Layout Strategy
The different layout managers implement the LayoutManager interface
A container calls methods in this interface to lay out the components
The user of the container supplies an instance of this interface for a particular type of layout

19. Common Layouts FlowLayout Wrap around effect BorderLayout
5 distinct areas
GridLayout
Two-dimensional grid of equal-sized areas
GridBagLayout
Allows stretching of cells across rows and columns

20. Flow Layouts Can specify alignment and margins between components
public FlowView(){
Container c = getContentPane();
c.setLayout(new FlowLayout(FlowLayout.CENTER, 10, 15));
c.add(new JButton("One"));
c.add(new JButton("Two"));
c.add(new JButton("Three"));
c.add(new JButton("Four")); }
Can specify alignment and margins between components
Components occupy the minimum space necessary

21. Border Layouts Components stretch to fill their areas
public BorderView(){
Container c = getContentPane();
c.add(new JButton("North") , BorderLayout.NORTH);
c.add(new JButton("East") , BorderLayout.EAST);
c.add(new JButton("South") , BorderLayout.SOUTH);
c.add(new JButton("West") , BorderLayout.WEST);
c.add(new JButton("Center”), BorderLayout.CENTER); }
Components stretch to fill their areas
Filled areas expand to fill areas left empty

22. Grid Layouts Cells are filled in row major order
public GridView(){
Container c = getContentPane();
c.setLayout(new GridLayout(2, 2));
c.add(new JButton("One"));
c.add(new JButton("Two"));
c.add(new JButton("Three"));
c.add(new JButton("Four")); }
Cells are filled in row major order
Components stretch to fill their cells

23. Gridbag Layouts public GridBagView(){
GridBagLayout layout = new GridBagLayout();
GridBagConstraints constraints = new GridBagConstraints();
Container c = getContentPane();
c.setLayout(layout);
constraints.gridx = 0;
constraints.gridy = 0;
layout.setConstraints(widget1, constraints);
c.add(widget1);
constraints.gridx = 1;
layout.setConstraints(widget2, constraints);
c.add(widget2);
constraints.gridy = 1;
constraints.gridwidth = 2;
constraints.fill = GridBagConstraints.HORIZONTAL;
layout.setConstraints(widget3, constraints);
c.add(widget3); }

24. Planning a Layout Draw a picture of the desired look
Use nested panels to structure components where necessary
Choose appropriate layout managers for each subarea in the main window

25. Refine the Layout import javax.swing.*; import java.awt.*;
import java.awt.event.*;
public class MainView3 extends JFrame{
private JTextField diceField = new JTextField(1);
private JButton rollButton = new JButton("Roll");
private Die model;
public MainView3(Die model){ …
Container c = this.getContentPane();
JPanel dicePanel = new JPanel();
dicePanel.add(diceField);
JPanel rollPanel = new JPanel();
rollPanel.add(rollButton);
this.setLayout(new GridLayout(2, 1));
c.add(dicePanel);
c.add(rollPanel);
this.setSize(200, 100);

26. A GUI for a Student Object