CW 12 (16th March – 22nd March) Client: Graphical User Interface

The development of initial version of the client side system has been completed this week.

Java programming language has been chosen as the development language to enable easy integration of the feature extraction code with Graphical User Interface (GUI).

Specifically, Java 8, the newest release of Java has been used, as it provides many features and tools that were not available in previous version of Java, such as the build in JavaFX library.

JavaFX is a set of graphics and media packages that enables developers to design, create, test, debug, and deploy rich client applications that operate consistently across diverse platforms. More details about JavaFX can be found at the following link.

A new visual layout tool – JavaFX Scene Builder, is also released. It allows users quickly design JavaFX application user interfaces, without coding. Users can drag and drop UI components to a work area, modify their properties, apply style sheets, and the FXML code, for the layout that they are creating, is automatically generated in the background. The result is an FXML file that can then be combined with a Java project by binding the UI to the applications logic [1].

The design of the client side system follows the Model-View-Controller (MVC) [2] pattern, which separates presentation, logic and data.

JavaFX Scene Builder

Figure 1: JavaFX Scene Builder

The view requests information from the model and present these information to the user. In this client system, the view is built using JavaFX Scene Builder (shown in Figure 1).

The controller contains a series of functions that handle user inputs (such as a click of a button) or system events (e.g. image feature is extracted).

The model notifies its associated views and controllers when there has been a change in its state, e.g. processing results returned from the server.

Figure 2: Packages of the client side system

Figure 2: Packages of the client side system

A list of packages is shown in Figure 2. GUIPanel.fxml is the designed UI file generated from JavaFX Scene Builder and it is linked to GUIController.java which handles all the users interactions and system events. ModelContainer.java contains all the data. Utils package consists of few tools including: reading/writing files from/to hard drive, reading system time and converting to string format for display etc.

A screen shot of the client side GUI is shown in Figure 3. This initial version of the client system does not contain the functionality of data communication with the back end server.

Figure 3: A screenshot of Client side system User Interface

Figure 3: A screenshot of Client side system User Interface

The project source code is hosted on a cloud based revision control system called Bitbucket.

References:
[1] JavaFX Scene Builder – A Visual Layout Tool for JavaFX Application, http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html, (Last Accessed: 22 March  2015)
[2] Glenn E. Krasner and Stephen T. Pope. 1988. A cookbook for using the model-view controller user interface paradigm in Smalltalk-80. J. Object Oriented Program. 1, 3 (August 1988), 26-49.

Advertisements

One response to “CW 12 (16th March – 22nd March) Client: Graphical User Interface

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: