Practical 4: Graphical User Interfaces in Java

CAB302 Software Development
School of Computer Science, Faculty of Science

CAB302 Software Development
School of Computer Science, Faculty of Science

Expectations

Before this practical, we expect you to have completed Activity 4.1 - Reading, which goes through:

  • Creating a project in JavaFX
  • Following the Model-View-Controller architecture of JavaFX
  • Basic GUI design principles

In this practical, you can expect to:

  • Create a JavaFX application with a more complex GUI
  • Provide CRUD (Create, Read, Update, Delete) operations through the GUI
CAB302 Software Development
School of Computer Science, Faculty of Science

Activities

You will be provided with a step-by-step guide to complete the following:

  • Activity 1: Set up the project views:
    • Terms and Conditions screen
    • Address Book screen
  • Activity 2: CRUD operations:
    • Create a Contact model and DAO
    • View contacts
    • Create / Update / Delete contacts
    • Polishing the functionality
CAB302 Software Development
School of Computer Science, Faculty of Science

Before you start: Create a JavaFX project

Follow the instructions in Activity 4.1 - Reading to create a new JavaFX project in IntelliJ IDEA.

Have a look at the application - can you find the following files:

  • HelloApplication.java
  • helloView.fxml
  • HelloController.java
CAB302 Software Development
School of Computer Science, Faculty of Science

Activity 1.1: Terms and Conditions screen

In this task, you will:

  • Modify HelloApplication.java to set the title and window size
  • Modify helloView.fxml to add the Terms and Conditions elements
  • Update the HelloController.java to add the terms and conditions to the text area

Terms and Condition Screen

CAB302 Software Development
School of Computer Science, Faculty of Science

Activity 1.2: Address Book screen

In this task, you will:

  • Add a new view main-view.fxml for the Address Book
  • Create an empty controller MainController.java
  • Transition from the Terms and Conditions screen to the Address Book screen

Address_Book

CAB302 Software Development
School of Computer Science, Faculty of Science

Activity 2.1: Create a Contact model and DAO

Here you will:

  • Create a Contact model class with fields like firstName, lastName, email, and phone along with their getters and setters
  • Add an IContactDAO interface with addContact, updateContact, deleteContact and getAllContacts methods
  • Implement a MockContactDAO that implements the above interface
    • This stores the contacts in an ArrayList
    • Implement the methods above
CAB302 Software Development
School of Computer Science, Faculty of Science

Activity 2.2: View contacts

The purpose of this activity is to display the contacts in the ListView in the Address Book screen, and to select a contact to view its details. You will need to:

  • Modify the MainController to:
    • Use the MockContactDAO to get all contacts
    • Set up a CellFactory for the ListView to display the contacts and register mouse click events

View_Contacts

CAB302 Software Development
School of Computer Science, Faculty of Science

Activity 2.3: Update / Delete / Create contacts

Here you will provides functionalities in the MainController to:

  • Edit the contact details in the TextField and reflect the changes in the ListView
  • Delete a contact when the Delete button is clicked
  • Add a new contact when the Add button is clicked
    • Then the user can edit the details the same way as for an existing contact
CAB302 Software Development
School of Computer Science, Faculty of Science

Activity 2.4: Polishing the functionality

In this activity, you will polish the functionality to improve the user experience by:

  • Adding the ability to cancel the edit
  • Select the first contact in the ListView by default
  • Hide text fields when there is no contact
  • Clean up the boilerplate code

Polishing_Functionality

CAB302 Software Development
School of Computer Science, Faculty of Science

Homework

Before the next practical, you should:

  • Complete Activity 4.3 - Practical - JavaFX Application + Mock Database
    • Can use this application as a foundation for your group project
  • Complete **Java Readiness Module 4
  • Prepare for Submission 1 of the Project Progress and Performance assessment. Assessed during your scheduled tutorial Week 5
    • Completed all Java Readiness Modules
    • Team Formation Complete - Activity 2.5
    • Project Requirements: you have defined a project brief and have created an initial list of requirements
    • Project Requirements: you have defined a project brief and have created an initial list of requirements
    • Marked as Group AND Individual
CAB302 Software Development
School of Computer Science, Faculty of Science

Mention that since it is week 1, it is fine if students have not done the reading.