Lecture 27 Creating Custom GUIs (D&D 23)

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

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!

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

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.

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

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

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

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.

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

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

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.

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

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

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!

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.

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!

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.

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.

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).

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

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

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