SCJD: GUI Screenshots

So let’s take a look at some screen shots of the certification assignment. The requirements are simple (see my previous posts), so I didn’t go crazy and add a whole lot of bells and whistles. I just added what I felt was necessary and things that followed standard GUI principles. However, I did at times cut a few corners and I think the Sun accessor was keen enough to nail me for it (more on that in next post).

The Client / Server scenario

The scenario here is that I want to run the program in network mode; i.e. client and server (the database) on different machines. I’ll start the server on one machine and then run the network client on another machine. The CSR will search for hotel rooms by certain criteria and then book a hotel suite as they would in a call center environment.

The Server

On Launch

When we start the server, behind the scenes the database file is validated and the database factory object (which will return instances of the DAO to remote clients) is bound on the RMI registry at the port specified. Thus “starting” the server.

Once Started

The server is now started and remote client can now make requests to it on the specified IP/Hostname and port.

Menu Options and Shortcuts

Each menu and menu item have standard mnemonics (ALT + various keys) and the important ones have shortcuts. For example…

CTRL + S will start the server.
CTRL + T will stop the server.
F1 will access the popup help window.

The Network Client

Configuring the Client

Since we’re connecting remotely, we’ll have to specify either the IP of the database server or the hostname. Of course, you’ll also have to specify the same port the server is running on, otherwise the RMI lookup will fail.

On Launch

So here’s the client on launch. When the BookingController is instantiated an initial call is made to the server to get data on launch of the app. Notice you can’t currently book a hotel, as no hotel record is selected in the JTable

Post Search

So the user enters some criteria for a hotel room and performs a search (via either CTRL + S, toolbar button, search button or menu item) and the JTable is updated to reflect the changes.

Booking a Hotel Room

A popup dialog is presented for the user to enter the customer information (more on why I chose not to allow table modification in another post). The user enters the info, clicks ok and the record is reserved.

Post Booking

Once the booking is successful, the view is updated with the latest records and shows that the user that the record is now reserved. Since the record is already reserved, the book components are disabled, as the assignment only allows a record to be booked once.

Menu Options and Shortcuts

F1 will launch the help window (a JEditorPane with html based content).
F5 will refresh the table with the latest values (essentially triggers a search with whatever criteria specified in the Hotel Name & Hotel Location fields).

CTRL + B will bring up the booking id dialog.
CTRL + S will search the based on specified criteria.
CTRL + Z will clear the search fields.

Next Post

I’ll be talking a bit about some of the GUI design principles I followed when designing the app, some I ignored and just my overall experience with Swing.

It's only fair to share...
Share on Facebook
Tweet about this on Twitter
Share on LinkedIn

1 thought on “SCJD: GUI Screenshots

  1. Pingback: SCJD: GUI Design Principles | i-Proving –

Leave a Reply