JavaFX-MVC Architecture

Introduction

This is a brief set of notes to explain an implementation of the JavaFX MVC Architecture. Later, you will follow a tutorial that explores this in depth. It is important to understand this because your project will be based on it

MVC

1. The Model-View-Controller (MVC) is an architectural pattern that separates the modeling of the domain, the presentation of the Gui, and the user actions into separate components.

a. Model – The model represents and manages the data of the application domain. It generally provides CRUD (create, read, update, delete) services for the data, as well as other services that pertain to the application domain.

b. View – The view manages the display of information.

c. Controller - The controller interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate.

2. Dependencies

a. Controller depends on View and Model

b. View depends on Model

c. Model does not depend on either

3. Benefits of this separation:

a. Model can be built and tested independently of the other components

b. Model can be reused

c. Alternate Views (or Controllers) can be integrated.

4. Many frameworks exist for implementing the MVC architecture: PHP, JavaScript, Java, Ruby on Rails, Python, C#, C++, and others. The approach we use for MVC is FXML and JavaFX. We are not exactly using a framework, we are more building the MVC pattern from the ground up. I think this is a better approach to learn MVC.

JavaFX Review

The following is a brief, review of how JavaFX as was considered in CS 1302.

1. Recall that when using JavaFX, you must have a single Pane object which usually will contain nested Panes, where each nested pane will contain Controls.

2. For example, the Gui below has a VBox as the root pane (green), which contains three HBoxes (blue). As you can see, the top HBox contains a VBox and a GridPane. The VBox contains a Label and three RadioButtons. The other panes are similar.

3. In CS 1302 we used code to build a Gui. For example, a portion of the code to build the GridPane in the figure above:

GridPane gridShapeLengths = new GridPane();

lbl1 = new Label("Side 1:");

gridShapeLengths.add(lbl1, 0, 1);

txfValue1 = new TextField();

gridShapeLengths.add(txfValue1, 1, 1);

...

Another technique for building a Gui with JavaFX is to use FXML, which we consider next.

MVC in JavaFX

The following is a high-level overview of one way to implement MVC using JavaFX.

1. One way to represent the view in JavaFX is to use FXML. FXML is a markup language that is used to specify the layout of the Gui (e.g. AnchorPane, GridPane), the controller (more on this shortly), the controls (e.g. Label, Button), and event handler names (e.g. handleNewPerson). A partial FXML file is shown below (this is a different Gui from the one considered earlier):

minWidth="-Infinity" prefHeight="300.0" prefWidth="600.0" stylesheets="@DarkTheme.css"

xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1"

fx:controller="ch.makery.address.view.PersonOverviewController">

...

...

...

...

...

When the FXML is loaded and displayed, it looks as shown below (which is the app you will create in a future HW/Tutorial.

2. JavaFX provides a class, FXMLLoader which is used to display an FXML file.

// Load root layout from fxml file.

FXMLLoader loader = new FXMLLoader();

loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml"));

rootLayout = (BorderPane) loader.load();

// Show the scene containing the root layout.

Scene scene = new Scene(rootLayout);

primaryStage.setScene(scene);

primaryStage.show();

3. Each View (FXML file) has an associated Controller. The linkage is made in the root pane in the FXML file (you can see this in item 1 above, and copied below):

4. A Controller is a Java class. It has: (a) references to the controls in the Gui; (b) a special method, initialize that is automatically called; (c) and event handlers. These things will be explained in a tutorial you will do. For example:

public class PersonOverviewController {

...

@FXML

private Label lastNameLabel;

...

/**

* Initializes the controller class. This method is automatically called

* after the fxml file has been loaded.

*/

@FXML

private void initialize() {

...

}

/**

* Called when the user clicks the new button. Opens a dialog to edit

* details for a new person.

*/

@FXML

private void handleNewPerson() {

Person tempPerson = new Person();

boolean okClicked = mainApp.showPersonEditDialog(tempPerson);

if (okClicked) {

mainApp.getPersonData().add(tempPerson);

}

}

5. For a system with two views, the architecture would be expressed in a class diagram like this:

6. For example, the flow of the system might look like this:

Example in Tutorial

1. The example in the tutorial is a little bit more involved. For example, it defines

a. RootLayout.fxml which contains the menu and a place to insert a view inside it.

b. RootLayoutController.java which responds to menu events.

c. PersonOverview.fxml which displays a table of people. At runtime, it is placed inside the root layout.

d. PersonOverviewController.java which contains event handlers for New, Edit, Delete buttons.

2. When the user chooses, New, for example, the PersonEditDialog.fxml view is displayed modally. A modal dialog is one that appears on top of the main content and requires user interaction before returning to the main content. There is also a corresponding PersonEditDialogController.java that has event handlers for the OK and Cancel buttons.

3. The example in the tutorial, has 2 views, but one is modal. This could easily be modified to handle 2 or more views that can be swapped out in the RootLayout.fxml.

Steps to Build a Java FXML Desktop Application

After doing the tutorial, I wrote down the general directions below. I wanted to document (for myself), the general flow of the development when using JavaFX and FXML. After you have been through the tutorial, you might find this useful.

1. Create a JavaFX Project (can delete the application package).

2. Create packages: myAppName.model, myAppName.view, myAppName.controller packages. As needed create: myAppName.resources, myAppName.utill

3. Create an FXML document in the view package.

4. Open FXML document in Scene Builder (SB)

5. Select the root pane in the hierarchy. Set some layout properties. For example, with an AnchorPane, you might set: Pref Width, Pref Height.

6. Add another pane inside the AnchorPane. For example: SplitPane, GridPane, TabPane, HBox, VBox.

7. Select this inner pane and set some layout properties. For example, with a GridPane you might set: Anchor Pane Constraints, Hgap, Vgap (Don’t need Pref Width, Pref Height because it fills the enclosing pane (anchor).

8. Add some controls to the pane. Set appropriate properties.

9. Create the JavaFX main class in the controller package.

10. Create the model class in the model package. Define properties for the instance variables.

11. Create the controller in the controller package. Need to declare instance variables for any controls that need to be referenced by code.

12. Connect the main class to the controller (see initRootLayout)

13. Connect the view to the controller.

14. Add id’s for the controls defined in the controller (i.e. the ones the code needs access to).

15. Add an event handler in the controller class.

16. Link events to event handlers.

2