25
Computer Science 209 GUIs Model/View/Controller Layouts

Computer Science 209 GUIs Model/View/Controller Layouts

Embed Size (px)

Citation preview

Page 1: Computer Science 209 GUIs Model/View/Controller Layouts

Computer Science 209

GUIs

Model/View/Controller

Layouts

Page 2: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 3: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 4: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 5: Computer Science 209 GUIs Model/View/Controller Layouts

Model/View/Controller Pattern

View

Controller Model

displays

listens

notifies

Page 6: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 7: Computer Science 209 GUIs Model/View/Controller Layouts

Example: A Data Modelpublic class Die{

private int value;

public Die(){ roll(); }

public void roll(){ value = (int)(Math.random() * 6) + 1; }

public String toString(){ return "" + value; }}

Page 8: Computer Science 209 GUIs Model/View/Controller Layouts

Example: An Empty Windowimport 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

Page 9: Computer Science 209 GUIs Model/View/Controller Layouts

Specializing the Viewimport 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); }}

import javax.swing.*;import java.awt.*;

public class MainView1 extends JFrame{

// Code for specializing the view}

Define a subclass of JFrame to represent the view

Page 10: Computer Science 209 GUIs Model/View/Controller Layouts

Add Two Controlsimport javax.swing.*;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); } }

The view’s constructor sets the attributes of the controls and layout and adds them to the frame

Page 11: Computer Science 209 GUIs Model/View/Controller Layouts

Hook Up the Model and the Viewimport 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

Page 12: Computer Science 209 GUIs Model/View/Controller Layouts

Display the Data Modelimport 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); }

Page 13: Computer Science 209 GUIs Model/View/Controller Layouts

Listening and Respondingimport 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);

Page 14: Computer Science 209 GUIs Model/View/Controller Layouts

Listening and Respondingimport 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()); } }}

Page 15: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 16: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 17: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 18: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 19: Computer Science 209 GUIs Model/View/Controller Layouts

Flow Layouts

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

Page 20: Computer Science 209 GUIs Model/View/Controller Layouts

Border Layouts

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

Page 21: Computer Science 209 GUIs Model/View/Controller Layouts

Grid Layouts

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

Page 22: Computer Science 209 GUIs Model/View/Controller Layouts

Gridbag Layoutspublic 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; constraints.gridy = 0; layout.setConstraints(widget2, constraints); c.add(widget2); constraints.gridx = 0; constraints.gridy = 1; constraints.gridwidth = 2; constraints.fill = GridBagConstraints.HORIZONTAL; layout.setConstraints(widget3, constraints); c.add(widget3);}

Page 23: Computer Science 209 GUIs Model/View/Controller Layouts

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

Page 24: Computer Science 209 GUIs Model/View/Controller Layouts

Refine the Layoutimport 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); c.add(dicePanel, BorderLayout.NORTH); c.add(rollPanel, BorderLayout.SOUTH);

Page 25: Computer Science 209 GUIs Model/View/Controller Layouts

A GUI for a Student Object