CompSci 308
Spring 2024
Advanced Software Design and Implementation

Lab Coding Exercise : GUI Practice

In this lab, you will refactor a forked version of the lab_browser project to clearly separate the "backend" Model (i.e., no imports from javafx.*) from the "frontend" View so it can more easily be varied as new frameworks or new kinds of devices are developed. Then you will add new features to the browser to practice making a Model that returns requested or computed data needed by the View rather than doing the work itself or calling its methods.

In pairs of your choosing, complete the following steps:

  1. Setup Pair Programming Environment
  2. Review Design Principles
  3. Refactoring Refresher
  4. Adding and Merging New Features
  5. Submit Your Work

Note, there should be a LOT of GIT commits for this lab!

Review Design Principles

Individually, share your interpretation of the Single Responsibility and Open-Closed Design Principles and how they are represented in the refactorings made to the example_roulette and lab_hangman code. Collectively, try to come up with a slogan, catchphrase, or shortened description for each.

Before Moving On: Add your names, interpretations, and slogans to the file, then add, commit the file, and push to your cellsociety_teamNN repository.

Refactoring Refresher: Encapsulating the Model

As a refresher from class this week, refactor the NanoBrowser class to split it into Model and View classes. Use Pair Programming (with three people) to work together within one person's local repository since this is a fairly big and comprehensive change.

Complete this refactoring in the following steps, mostly by moving the existing code to a new class and then calling the new methods in place of the old code:

Before continuing to the next part, use the suggested workflow to integrate the new version of the code with everyone else's copy of the code.

Adding and Merging New Features

Continue practicing using the suggested workflow to complete the following tasks by having each person take one set of tasks and integrating the changes after each step is complete. You are encouraged to discuss the changes with each other as you make them (either for better understanding OpenJFX or to avoid conflicts), but they should be coded independently. Note, the NanoBroswerModel changes should be very small and easy to complete (so most of the time will be spent figuring out the NanoBrowserView changes together) but doing them simultaneously will better help simulate working together in a project.

Model Changes
  1. Add a private URL instance variable and public methods to represent saving and retrieving a Home URL.
  2. Add a private Map<String, URL> instance variable and methods to represent saving a nickname with associated URL and retrieving a URL given its nickname.
Configuration Changes
  1. Change the CSS styling for the NanoBrowserView components to change it to more appealing colors, fonts, etc.
  2. Add new language properties file that provide different text to appear on the UI's buttons. Experiment with what kinds of text you can set as the values.
View Changes
  1. Add two Buttons, one to set the currently displayed URL to be the Home page and one to show the saved Home URL when pressed (this button should be disabled until a Home page has been set).
  2. Add a Button, that allow the user to add the currently displayed URL as a Favorite, and a ComboBox, that allows the user to select a Favorite later:
  3. Add a second HBox to the browser's input panel to separate these new user preference components from the navigation components. Then use a VBox to organize these two HBox components.

Submitting your Work

At the end of lab, use Gitlab's Merge Request from your forked repository's master branch back to the original organization repository's master branch to submit your group's answers to the discussion questions and refactored code.

You only need to create one Merge Request, no matter how many commits you make, and you do not worry about potential conflicts since your request will not be approved (it is just an easy way for us to see changes you made).

Make sure the Title of your Merge Request is of the form "lab_browser - everyone's NetIDs".