M06-L01: Implement a GUI List View
Due Sunday by 11:59pm
Points 0
Overview
In the last lesson, you learned how to implement a simple application following the Model-View-
Controller (MVC) architecture pattern. The last activity involved implementing a simple application
allowing the user to view objects in a list one at a time. In this lesson, you will learn how to use classes
from the Java Swing API to display objects in a list and select any object from the list view to view that
object’s details. The list-detail user interface design pattern (sometimes called master-detail) is one of
the most common navigation mechanisms in user interface design.
Topic 1 - The List-Detail UI Pattern
Very often users and their applications are working with lists or tables of data; for example, a contact list.
You will also often encounter lists of lists. For example, a texting application might show a list of
conversations, each of which is a list of individual text messages. User interface designers and
developers have come up with a number of standard design patterns for displaying and working with lists
and tables of data, and for moving between a list view and a view showing the details of an individual
item in the list.
The specific pattern you will be working with in this lesson is often referred to as drilldown. The user is
presented with a list of items, such as instruments in the Vintage Sounds application, and may select an
item in the list to drilldown into the details of that item.
Image on the left shows a list in columns of Serial Numbers, Manufacturer, and Model. The
screenshot on the right shows how the input values can be edited.
Topic 2 - Working with AbstractTableModel
In the Java Swing framework, one approach to displaying lists and tables of data is to use the JTable
class. JTable manages many aspects of dealing with tabular data at the user interface, such as column
resizing, scrolling, sorting, and selecting individual items in the table.
The JTable class is a view class, which works together with another class AbstractTableModel to provide
an MVC-compliant solution to managing list and tabular data. On the surface this combination can seem
complex, but is actually quite simple and elegant once you have worked with it. It is worth spending the
time to learn.
The following topics present an example from the Vintage Sounds demo application. This example
implements a use case that shows a list of instruments available for sale, and allows the user to
drilldown into the details of a specific instrument.
The first step is to create a subclass of AbstractTableModel, an abstract class, and implement its
methods.
Check out this tutorial ([Link] for
more information on using an AbstractTableModel.
To begin, create a subclass of AbstractTableModel, as shown in the InstrumentTableModel example
below. Your class should include a String array for the column names and an ArrayList for your data
source. You will also want to initialize your data source in the class constructor. Notice that the IDE is
flagging the class as having an error because not all of the abstract methods of AbstractTableModel are
implemented yet.
public class InstrumentTableModel extends AbstractTableModel{
private String[] columnNames = {"Type", "Manufacturer", "Model"};
private ArrayList<Instrument> instrumentList;
public InstrumentTableModel(ArrayList<Instrument> newInstrumentList){
instrumentList = newInstrumentList;
}
The next step is to implement all of the abstract methods from AbstractTableModel. The easiest way to
do this is to copy and paste the code example from the JTable tutorial referenced above. There are only
two methods from the example that you absolutely must change for your subclass to work. These are
shown in the code snippet below.
public int getRowCount() {
return [Link]();
}
public Object getValueAt(int row, int col) {
switch(col){
case 0: return (Object) [Link](row).getType();
case 1: return (Object) [Link](row).getManufacturer();
case 2: return (Object) [Link](row).getModel();
default: return null;
}
}
The method getRowCount() is changed from returning an array’s length to returning the ArrayList’s size.
This part should be fairly straightforward.
To change the column headings from A, B, C, ... you need to override the getColumnName method, for
example:
@Override
public String getColumnName(int col){
return columnNames[col];
}
Changing the method getValueAt(…) is somewhat more complicated. The goal of this method is to return
the data source value at a particular row and column in your data source. JTable uses this to populate
the corresponding cell in its view. Remember, the subclass of AbstractTableModel is the model class,
JTable is the view class.
In the Vintage Sounds application the InstrumentList and the InstrumentTableModel are both instantiated
in a controller class called InstrumentCntl, which includes them as fields.
//Get the InstrumentList
//When instantiated it will get the individual Instruments
//Once the InstrumentList is instantiated, instantiate the InstrumentTableModel
theInstrumentList = new InstrumentList();
theInstrumentTableModel = new InstrumentTableModel ([Link]());
Finally, the controller also needs an accessor for the InstrumentTableModel. This will be used by the view
classes that display the data in instances of JTable.
public InstrumentTableModel getInstrumentTableModel(){
return theInstrumentTableModel;
}
Topic 3 - Connecting an AbstractTableModel to a JTable
The next step is to create a subclass of JFrame, which will be your list view. In the Vintage Sounds
example, we have created a simple JFrame subclass that looks like this.
JFrame that contains a subclass that contains three lists titled Serial Number, Manufacturer, and
Model.
The JFrame above includes two JPanels, one for the buttons at the bottom and one for the JTable. The
upper JPanel contains a JScrollPane, and the JScrollPane contains the JTable. Review the APIs for
these classes to understand some of their attributes such as the scrollbar behavior.
The code below shows how this view is assembled. In the next section, we show how users can move
between this list view, and a view providing the detail of a selected Instrument.
Note: you must defined all components at the start of the new class, ie: private JPanel tablePanel;
public void initComponents(){
tablePanel = new JPanel();
buttonPanel = new JPanel(new GridLayout(1,4));
instrumentTable = new JTable([Link]());
[Link](). getColumn(0).setPreferredWidth(25);
[Link](). getColumn(1).setPreferredWidth(50);
doneButton = new JButton("Done");
detailsButton = new JButton("Show Details");
[Link](new DetailsButtonListener());
newButton = newJButton("New");
[Link](newButton);
[Link](detailsButton);
[Link](doneButton);
tableScroller = new JScrollPane(instrumentTable);
[Link](true);
[Link](JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
[Link](new Dimension(350,300));
[Link](tableScroller);
[Link](500, 400);
[Link](null);
[Link](new JPanel(new BorderLayout()));
[Link]().add(buttonPanel, [Link]);
[Link]().add(tablePanel, [Link]);
}
The discussion here, along with code examples and your review of the resources listed at the end of this
lesson, should provide you with sufficient material to construct your own list view user interface following
the MVC pattern.
The next topic will describe an approach to using the list view to enable navigating to the detail of a
selected object.
Topic 4 - Navigating Between the List and Detail Views
The list-detail pattern supports allowing users to view a list of objects, select an object from the list, and
then view the detail of the selected object in a separate window. In the model-view-controller architecture
pattern, this behavior is always mediated by the controller class. Following the user interface design
above, when the user selects a row in the table and then presses the Show Details button, the list view
object does the following:
1. Gets the user-selected row in the JTable.
2. Translates this selection into the corresponding row in the source data set, i.e., the ArrayList of
Instruments. (see the example below)
3. Calls a method in the controller to get the detail view. (note: a new method must be added to the
controller)
4. The controller method does the following:
1. Hides the list view. (set visibility to false)
2. Instantiates the detail view passing the selected row as a parameter. (note: a new constructor
must be added)
5. When the detail view is instantiated it then calls back to the controller to get the selected detail object.
(note: add a new method to the controller)
6. The detail view parses the detail object and displays its fields in the view. (note: add a new method to
the detail view)
Steps 1-3 above are implemented in an event handling method in the list view class as shown below.
Note, this is done to demonstrate how to add a listener to the view class instead of the controller.
public class DetailsButtonListener implements ActionListener{
public void actionPerformed(ActionEvent evt){
int selectedTableRow = [Link]();
int selectedModelRow = [Link](selectedTableRow);
if(selectedModelRow < 0) //if the user does not highlight a row, this will be -1
selectedModelRow = 0; //set the model row to the first element in the list
[Link](selectedModelRow);
}
}
Lambda version:
Step 4 in the controller class looks like this.
public void getInstrumentUI(int selectedRow){
theInstrumentUI = new InstrumentUI(this, selectedRow);
[Link](false);
[Link](true);
}
Step 5 and the rest of the InstrumentUI class constructor looks like this.
public InstrumentUI(InstrumentCntl newInstrumentCntl, int selectedRow){
instrumentCntl = newInstrumentCntl;
currentSelectedRow = selectedRow;
currentInstrument = [Link](selectedRow); //calls the getInstrument method
initComponents();
parseInstrument(); //new method that must be added
}
Finally, Step 6 is performed by the parseInstrument() method, called from the InstrumentUI constructor,
and looks like this.
//populate the UI fields with data from the current instrument
public void parseInstrument(){
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
}
Also, you will notice that the code given above does not provide all of the functionality you need to
completely enable the desired behaviors. This leaves you some challenges to work through!
The InstrumentUI class uses JLabels, JTextFields, JButtons, JPanels, and the GridLayout to achieve the
look and feel shown in the figure above.
You should be familiar with these from prior coursework but for a refresher see the tutorial
([Link] . ([Link]
Reading & Other Resources
Oracle on the List-Detail pattern (they call it master-detail)
([Link]
The Oracle JTable Tutorial
([Link]
The Oracle Swing Tutorial ([Link]