1. Lecture 27 Creating Custom GUIs
(D&D 23)

2. Summary of Previous Lecture
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
Waiting state
Notify
NotifyAll
Producer/Consumer Relationship
Concurrent Collections
ArrayBlockingQueue
synchronizedList()
Issues with Threading
Deadlock
Starvation

3. Assignment – Simulation Time
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
Every second the Police Units should update their status and location, based on what their current status is. This will happen 60 times in the simulation.
The above loop will be executed once per second, 60 times. You may use this in your assignment! You just need to determine what logic should be added inside the loop.
Don’t forget to shutdown your ExecutorService, and consider if any threads are still running when you try to output data!

4. Assignment – Move Assignment Java Swing/ AWT Swing Elements
MVC Pattern
JTable
Summary

5. Assignment – Move
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
In moveToPoint we are moving in the X direction first. If it reaches the X co-ordinate required, then we move in the Y direction instead.
This moveToPoint method can be reused for all the different moves required by a Police Unit. Pass in a destination Point (Java class) and number of units to move.
If moveToPoint returns true it means the destination was reached and we can update the status accordingly.
If it returns false, then the destination was not reached.

6. Java Swing Components
Things such as buttons, checkboxes, text fields, lists, images, menus, etc. that we find in GUIs are known as components.
The Java Swing classes know two types of components:
Heavyweight components: Like AWT components, they use operating system specific code in the background and are only partially written in Java.
Lightweight components: Written entirely in Java. Most Swing components are lightweight. The only heavyweight Swing component we are focusing on is the JFrame.
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary

7. Java Swing vs AWT
Some basic Swing components have counterparts in AWT, e.g., a JButton is the Swing version of a Button. Swing has more components than AWT.
We will use only Swing components due to their lightweight nature. They have effectively replaced AWT as the choice for creating custom Graphical User Interfaces.
As Swing components are entirely built by the JVM they do not require OS code. This means they are platform independent and will look similar across multiple operating systems. AWT will be dependent on the OS that is being used to run the program.
We will still need to understand some AWT methods that are used with Swing components.
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary

8. Java Swing Classes Assignment Java Swing/ AWT Swing Elements
MVC Pattern
JTable
Summary

9. GUI Elements
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
Windows: These are also called ‘top-level containers’ and represent the initial window created to hold Swing elements inside it. The Swing JFrame is and example of this.
Components: GUI Widgets that can be placed inside containers. These are the elements that we use to view data in the GUI and interact with the GUI. E.g. JButton, JLabel, JTextArea, JTable.
Containers: Logical grouping of swing components. These can have separate default layouts applied to arrange the order of swing components inside the container.

10. GUI Elements
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
JButton
JLabel
JTable
The blue area with the top bar represents the JFrame. This contains multiple JPanels (Orange areas) which in turn are used to organize their contained Swing Components logically.
Our GUI should have the structure Window->Container->Component.
Specifically with Swing this is JFrame->JPanel->JComponent

11. Creating a JFrame
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
We can design our own Frame by extending the JFrame class. There are a variety of methods that can be used to customize the style of the frame.
setLayout(): Set the layout of the frame. This will organize how the containers and components fit inside the frame.
setSize(): Determines the original size of the frame
setDefaultCloseOperation(): We are setting this to terminate the program upon closing the JFrame

12. Creating a JPanel
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
We can design our own Panel by extending the JPanel class. We can customize this like a frame, with methods like setBorder(). We can also create custom Components, and use the add() method to add them to the Panel.
In this simple example we are adding a simple JTextArea component to our Panel.

13. Creating our GUI We can now create our GUI in the main thread.
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
We can now create our GUI in the main thread.
Instantiate the SimulationFrame object we defined earlier, passing in the desired name.
Instantiate a CustomPanel object
Add this to the ContentPane of the frame
Finally call the setVisible(true) method on the frame

14. Creating our GUI Assignment Java Swing/ AWT Swing Elements MVC Pattern
JTable
Summary

15. Model-View-Controller (MVC)
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
Controller
Change State
User input
Change Display
View
Model
Model has changed!

16. Model-View-Controller (MVC)
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
Controller: This takes in the user input and interprets this to determine how the state of the data should be changed. For our ambulance example, this is the execution of our Ambulance objects on their threads to change their state.
Model: The model holds all of the data and its state. In our Ambulance example, this is the List<Ambulance> that stores every Ambulance that we have created.
View: This is the GUI that we create that displays the model that we have created in the back end. The view and model don’t have access to the logic of each other, but can pass this information through an interface.

17. Creating a JTable
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
We will use the MVC pattern to establish a JTable that represents the current state of all the Ambulances.
The important method to highlight when creating the JTable is the setModel() method. This defines what data will be in the table, and we must create our own custom model class!

18. Creating a Table Model
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
To create a table model we will extend the AbstractTableModel class which defines a set of methods that we need to override to create a functioning model.
getColumnCount()
getRowCount()
getValueAt(int row, int col)
getColumnName(int col)
This table model can then be used in the setModel method in our JTable to apply data to the GUI.

19. Creating a JTable
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
We pass in our List of Ambulance objects that we want to show in the GUI table. We also create a String[] to define the column names.

20. JTable getValueAt()
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
arg0 refers to the row, with each row containing an Ambulance record.
arg1 refers to the column, with each row containing a different type of data (i.e ID,Location,Status,Patient).

21. Instantiating the JTable
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
This is very similar to creating our custom Panel from earlier. The only difference is our Panel now takes in a SimulationTableModel parameter.
Instantiate our SimulationFrame
Instantiate a SimulationTableModel with a list of Ambulances
Instantiate a SimulationTablePanel with our model
Add the Panel to the ContentPane of the frame
Set the frame to visible

22. Problems!
Assignment
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
We are creating our GUI on the main thread. If there are also calculations being done on this thread, it will make the GUI slow and unresponsive!
While our ‘Model’ is being changed while the simulation is running, there is no communication between our ‘Model’ and ‘View’. When we click on data, or arrange the columns, we notice that some data is updated. This is because we are Notifying the View to update. How can we get this to happen when the data is changed?
We will look at solving these issues in the next lecture

23. Summary Covered common difficulties with Assignment 2
Java Swing/ AWT
Swing Elements
MVC Pattern
JTable
Summary
Covered common difficulties with Assignment 2
Recap of Java GUI creation
AWT (Abstract Window Toolkit)
Swing
Object hierarchy and layout of Swing elements
JFrame
JPanel
JComponent
Model View Controller (MVC) pattern
Creating a custom JTable