COMPSCI4039: Programming
Java Swing continued 2
Who does what in a GUI program
Copyright By PowCoder代写 加微信 powcoder
● GUI programs can quickly become unreadable and a complete mess! ○ Unless we adopt a logical style to divide up the code
● The Model – View – Controller (or MVC design) style of programming is a way of deciding who does what in a GUI program
○ The application logic, independent of user interaction
○ The graphical display to the user, the components
● Controller
○ The code for dealing with user input, which appears as events
Demo program
See ShowPrintTextGUI.java and PrintTextGUI.java in program folder for this week’s lectures.
public class ShowPrintTextGUI
{ public static void main(String [] args)
{ PrintTextGUI myGUI = new PrintTextGUI(); myGUI.setVisible(true);
JFrame object constructed in another class
Code outline:
public class PrintTextGUI extends JFrame implements ActionListener { // instance variables are all the components
private JPanel top, middle, bottom;
private JTextField text;
private JLabel label;
private JButton printButton, clearButton;
// The constructor adds all the components to the frame
public PrintTextGUI() {
// normal JFrame stuff
// set layout:
layoutComponents();
// other methods: layoutComponents(), ActionPerformed() and helper methods
private void layoutComponents() {
// top panel is white and contains a button
top = new JPanel(); top.setBackground(Color.white);
// create buttons with listeners and add to the top panel printButton = new JButton(“Print text”); printButton.addActionListener(this); top.add(printButton);
clearButton = new JButton(“Clear text”); clearButton.addActionListener(this); top.add(clearButton);
// middle panel is green, contains label + text field
middle = new JPanel(); middle.setBackground(Color.green); // add a label and a text field to the middle panel
JLabel enterLabel = new JLabel(“Enter text here: “); middle.add(enterLabel);
text = new JTextField(10); middle.add(text);
// add empty label to bottom panel
bottom = new JPanel(); bottom.setBackground(Color.green); label = new JLabel(“”); bottom.add(label);
.. then add panels to content pane:
add(top, BorderLayout.NORTH); add(middle, BorderLayout.CENTER); add(bottom, BorderLayout.SOUTH);
Other methods:
// handle button events
public void actionPerformed(ActionEvent e) { if (e.getSource() == printButton)
printText();
else if (e.getSource() == clearButton)
clearText();
// helper method – action if print button pressed
private void printText() {
String s = text.getText();
label.setText(“You entered: \”” + s + “\””);
text.setText(“”);
// helper method – action if clear button pressed
private void clearText() { label.setText(“”);
text.setText(“”);
Simple GUI programs
● In a program like ShowPrintTextGUI the PrintTextGUI class can do
everything
○ The application logic is simple
○ There are only a few GUI components
○ The user input is simple
main class will just create a PrintTextGUI object
○ the View
○ the Model
GUI display is set up in the constructor
○ the Controller
user input is delivered to actionPerformed
simple program logic will be in actionPerformed and helper methods
Slightly longer programs
● When the application logic gets slightly more complicated ○ it makes sense to have a separate model class
● The View and Controller could still be handled by one class
○ the View is set up in the constructor
○ the Controller is the actionPerformed method
● The main class creates two objects
○ The Model object
○ The View – Controller object
Our Plotter example has this format – the main class acts as the controller and the main view. The DataList class is the model.
Even longer programs
● When the view and controller are more complex
○ It makes sense to have a separate class for each of the view and the controller
● The View class has:
○ a constructor to create the display
○ helper methods for updating the display
● The Controller class has:
○ An actionPerformed method
○ other helper methods to deal with user interaction
● The main class creates three objects
○ The Model object, the View object and the Controller object
Interactions between the three classes
● The View needs to know about: ○ the Model
■ it displays information about the Model ○ the Controller
■ it adds listeners from the controller to its components
● The Controller needs to know about: ○ the Model
■ user interactions could change the Model ○ the View
■ user interactions may require the display to be updated
● The Model does not need to know about the View or Controller
● Main creates the Model, View and Controller objects
○ and passes these objects as parameters to the class constructors as necessary
Class structure for a program using a GUI
MinMaxAve example
○ The model is an object that is given numbers, one at a time
○ It calculates the minimum, maximum and average of the numbers it has
○ The user interface has components to allow the user to type in a series
of numbers, one at a time
○ It will display the minimum, maximum and average of the numbers it has
seen so far
○ The user can also clear the numbers and start again, or quit
● Controller:
○ The controller listens for user interaction events
○ It updates the model data as required
○ It calls display methods from the View class as required
The View class
● The View class, MinMaxAveView, extends JFrame ○ The default Border Layout is replaced by a 5 x 2 Grid Layout
● The GUI components comprise:
○ Two JButtons
○ Four JLabels
○ Four JTextFields (only one editable)
● We only listen to three of the components
The Controller class
● The Controller class MinMaxAveController implements ActionListener
● It contains an actionPerformed method
● It calls methods in the Model object
○ To change the model when user enters a number
○ When user presses Clear
● It calls methods in the View object
○ When a new number is entered
○ When pressing Clear
The Model class
● The Model class is MinMaxAveModel
● It remembers (as instance variables)
○ minimum– smallest number entered so far
○ maximum– largest number entered so far
○ count– how many numbers entered so far
○ total– total of numbers entered so far
● It contains the following methods:
○ enterNum
■ updates count, total, minimum and maximum
○ resetFields
■ resets all of these to 0
○ getMinimum,getMaximum,getAverage
■ First two just return minimum and maximum;
■ third calculates average and returns it
A “Chicken and egg” problem
● The Main class creates Model, View and Controller objects
○ The View needs to know about the Controller
○ The Controller needs to know about the View
● Which do we create first?
● Solution 1:
○ Main creates Model object
○ Main creates Controller object, passing Model object to constructor
■ Controller doesn’t yet know about View
○ Main creates View object, passing Model and Controller objects to constructor
○ Main passes View object to Controller object via a special method
● Solution 2:
○ Main creates Model object
○ Main creates Controller object, passing Model object to constructor
○ Controller creates View object, passing Model and Controller objects to constructor
Demo programs
Solution 1: See ShowMinMaxAveGUI1.java, MinMaxAveModel.java, MinMaxAveController1.java, MinMaxAveView1.java
Solution 2: See ShowMinMaxAveGUI2.java, MinMaxAveModel.java, MinMaxAveController2.java, MinMaxAveView2.java
Note particularly that the models are the same!
In fact we could even put a console based interface (using Scanner) onto the application by using an identical model class for the application logic.
Code given on Moodle.
● We have looked at some other, more complex, examples of GUI applications.
● The Model-View-Controller (MVC) is a “design pattern” that splits GUI
applications into three main parts that allow easier understanding/debugging:
○ Model – the application logic that does not involve GUI components.
○ View – the GUI components which make up the view the user sees (and allows them to interact with the application).
○ Controller – the code which responds to user events either by changing the underlying model (i.e. application logic and the application state) or changing the view.
● This design “scales up” to allow building large complex applications such as Microsoft Word or web applications with Spring, Django and Angular.js.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com