
PlayersModel will be exposed to the UI as a property playersProperty. The Player objects are maintained in an ObservableList called players. Public Player(String team, String playerName) The playerId is generated from a simple counter which is a static class variable. A Player is a domain object that contains playerId, playerName and team String fields. To keep the GridPane appearing centered, the column width of the third column – usually with hidden controlls – is deducted from the padding of the right side of the GridPane. Player.fxml with Validation Markings Turned On This next screenshot also shows the dialog, but with the Labels' opacities set to 1. The preceding screenshot showed the Labels with and opacity of zero which is the correct initial setting. These Labels are red asterisks that are hidden unless there are validation errors. This column contains a pair of Labels: lblErrPlayerName, and lblErrTeam. Notice in the GridPane that there is a thin column to the right of the data gathering controls. Both are required for the Add to take effect. The data gather controls are a TextField for the Player Name and a ComboBox for the Team selection. The dialog contains a top GridPane for the data gathering controls and a lower HBox for the Add and Cancel Buttons. This next screenshot shows the dialog that opens when the + Button is pressed. It is important to fully visualize the UI in Scene Builder and adding placeholder objects helps along these lines. These ToggleButtons will be removed when the app starts and replaced with the real values: Show All, BOS, HOU, WSH. The set of the ToggleButtons present in the FXML exists as a design aid.

The HBox containing the ToggleButtons will fix the ToggleButtons to the left on a resize while the + Button will pull to the right. The top controls – a set of ToggleButtons and a + Button - are themselves grouped in HBoxes to align the UI properly on a resize operation. The UI root is a VBox that contains an HBox for the top controls and the ListView. The following screenshot shows the main view of the FilterListApp.
