Description
Overview In this assignment you will build a user interface to demonstrate your skills with basic JavaFX development (including widgets, events, and layout). The assignment is divided into three parts that have increasing difficulty: part 1 covers simple widget creation and layout; part 2 covers event handling; and part 3 covers some improvements to the look and operation of the UI. The UI is for a simple JavaFX tool that allows the user to select colours for a three-colour palette and store the palettes in a list. The tool provides sliders for Red, Green, and Blue values, and a scrolling list for storing completed palettes. The tool will end up looking like the pictures below. Part 1: Basic widget creation and layout You should be able to start Part 1 after lecture on Sept. 7, and complete it after lecture on Sept. 9. Use the following JavaFX widget classes to create the interface shown in the “Part 1 target” picture: Circle class (for the top colour swatch) Button class (for the “Add to Palette” and “Add to List” buttons) Slider class (for the Red, Green, and Blue sliders) Label class (for the title labels to the left of the sliders, and the value labels to the right of the sliders) ListBox (for the list of palettes shown at the right side of the UI) For laying out the interface, use the following container widget classes: HBox (for horizontal arrangements) VBox (for vertical arrangements) Remember that you can have containers within containers to achieve your desired layout Useful methods for adjusting spacing and padding within HBox and VBox include setSpacing() and setPadding() Notes: All widgets and layouts must be created and manipulated programmatically, not using FXML Your UI does not have to respond to any user events (it just needs to show the widgets and layout) Your UI does not have to handle resizing Remember that a ListBox widget uses an ObservableList object as its abstract model You should add a few default strings to the ObservableList so your ListBox will show up in the UI Product of Part 1: a JavaFX project runnable in IDEA. Figure 1: Target of Part 1 Part 2: Events and Interaction You should be able to complete Part 2 after lecture on Sept. 14. In Part 2 of the assignment, you will add event handling and make the app interactive. To do this, you will create variables and classes to store information about the current colour and palette, and then add event handling to the widgets in your UI. First, add code to store information about the current colour and the current palette: Add an instance variable Color currentColor to store the current colour as set by the sliders Create class ColorPalette that stores three Color objects (which are white by default) Create method ColorPalette.addColor(Color c) to add colours to the palette (if all three colours are already assigned, the palette should wrap around to the first colour) Second, add event handling to the sliders: Attach a change listener to the value property of each slider, so that when the slider slides, your method setColor() will be called The listener can be coded as a lambda such as (observable, oldValue, newValue) -> setColor() Method setColor() should read the values of all three sliders, create a Color object using static method Color.rgb(), update the colour of the swatch with method setFill(Color c) of class Circle, and update all of the value labels of the sliders with a number between 0-255 Third, add event handling to the buttons: “Add to Palette” button handler: when the user clicks the “Add to Palette” button, the colour that is currently in the swatch should be added to the current palette “Add to List” button handler: when the user clicks the “Add to List” button, a String representing the current ColorPalette is added to the ListBox’s ObservableList It is a good idea to write this as a toString() method for class ColorPalette Notes: Set the fill colour of Circle objects using Circle.setFill(), not using CSS (e.g., don’t use Circle.setStyle()) Figure 2. Target of Part 2 (also see video demo). Product of Part 2: a JavaFX project runnable in IDEA. Part 3: Enhancements and Generalization You should be able to complete Part 3 after lecture on Sept. 16. In Part 3 you will add features to the application such as a custom cell renderer for the ListView, and you will convert aspects of the application to be reusable compound widgets. First, you will generalize your code for the three colour sliders into a single class, ColorSlider: A ColorSlider contains a Label for the title, a Slider, and a Label for the value The constructor for ColorSlider should take a string argument to use as the title, and should set up the slider to go from 0 to 255 with an initial value of 50 Remember that compound widget classes should extend Pane, and should add the top container widget to its own list of children The ColorSlider class should have methods getValue() and setValue() The ColorSlider class should make the instance variable for the Slider public so that listeners can be attached from the main application (this is a bit of a hack; we will discuss further in lectures) Second, you will generalize your code for showing the three colours of the palette into a single class, PaletteView: A PaletteView contains three Circle objects in an HBox, and also has a reference to a ColorPalette object The constructor of PaletteView should take a ColorPalette object as an argument; if the argument is not null it should use the argument as its ColorPalette instance variable; otherwise it should create a new ColorPalette for its instance variable PaletteView should extend Pane and add the top container widget to its list of children Third, you will create a custom cell renderer for showing the actual palettes as the items of the ListView: Change your definition of the ListView and ObservableList instance variables to use instead of Create class PaletteCell that extends ListCell PaletteCell should have one method, updateItem() that is similar to the following: public void updateItem(ColorPalette item, boolean empty) { super.updateItem(item, empty); PaletteView pv = new PaletteView(item); setGraphic(pv); } When you create your ListView, add a call to method setCellFactory() that is similar to the following: myListView.setCellFactory(listItem -> new PaletteCell()); Figure 2. Target of Part 2 (also see video demo). Product of Part 3: a JavaFX project runnable in IDEA. What to hand in (note: each student will hand in an assignment) Create a zip file of your IDEA project (File Export Project to Zip file…). Note that you do not need to hand in separate files for Part 1, 2, and 3: if you have completed Part 2, you do not need to hand in anything for Part 1; if you have completed Part 3, you do not need to hand in anything for Part 1 or 2. Add a readme.txt file to the zip that indicates exactly what the marker needs to do to run your code. (Note that systems for 381 should never require the marker to install external libraries, other than JavaFX). Where to hand in Hand in your zip file to the Assignment 1 link on the course Canvas site. Evaluation Marks will be given for producing a working GUI that correctly uses JavaFX widgets, events, and layout, and that follows the specifications given above. Code should be appropriately documented and tested (although documentation will not be marked). Note that no late assignments will be allowed, and no extensions will be given, without medical reasons.
