Building the User Interface

With Eclipse you have the option of building your User Interface by hand, or by using the Window Builder plugin for Eclipse. We have used the later when building this project, for instructions on how to install to it please refer to the Eclipse help system

Once it has been installed, select 'File->New->Other' in Eclipse.

Add a new file to the project

Scroll down to the WindowBuilder folder and expand it. Then expand the 'Swing Designer' folder and select 'Application Window'. Finally click 'Next'.

Select Application Window from the Swing Designer folder

On the 'New Swing Application' page we set the package that we want to use for our app and its 'Name'. We have used com.remobjects.dataabstract.samples.todotutorial for the package and TodoApp for the name.

Set package and name for the Swing Application

This will add the file to the project, highlight it in the 'Package Explorer' and open it in the editor. Note at the bottom of the editor there are two tabs "Source" and "Design". Select the design tab and it will open a design page which you can see in the figure below, with a palette of UI elements.

Our new Application open in Design mode

We aren't going to go into the nitty gritty of UI building here. For speed we selected the getContentPane() from the Components Window (see above figure) and changed the Layout to Absolute

Set the content pane's layout to Absolute

The next step is to resize the window to 500x300 and ensure its resizeable property is set to False. Now build the UI to match something similar to this:

Build the UI to match this

To the content pane add a row of 5 JButton's and for each one set its variable name and the text it will display:

Variable text
btnLoadData Load Data
btnAddTask Add Task
btnEditTask Edit Task
btnDeleteTask Delete Task
btnApplyUpdates Apply Updates

Then add a JTextField, its variable name is textFieldFilter and beside it a JButton with the variable name btnApplyFilter and the text it shows to Apply Filter

Add a JScrollPane with the variable name scrollPane and then add a JTable to that scroll pane. Set the JTable's variable name to table.

Finally configure the table's properties to

  • set columnSelectionAllowed to false
  • set rowSelectionAllowed to true
  • set selectionMode to SINGLE_SELECTION

Thats everything that we will need to do in design mode for the main application window. Next we will create a class that will handle communications with the Relativity Server and then begin to connect the user interface.