Add explanation on fx:root

[JiaXinEu]

As proposed in #21

[UdhayaShan1]

Correct me if im wrong on any of this 😅

I think can state the difference between using fx:root and not and its implications clearer, for example if we use fx:root construct then the controller is now set programmatically. Here it is set in DialogBox.

That being said, we can also provide answers for the exercise where MainWindow can either use fx:root or Stage as root node.

For eg, if use fx:root, we set the controller programmatically in MainWindow constructor

    public MainWindow() {
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/path/to/MainWindow.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);
        try {
            fxmlLoader.load();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

[JiaXinEu]

for example if we use fx:root construct then the controller is now set programmatically

Thank you for the suggestion, I have added a line on this. As for the sample solution, I am not too sure on whether to include it since it was left as an exercise and no solution has been given on previous exercises.

[UdhayaShan1]

Thanks for adding! Yep your right, I think that can be another issue for the future as well.

[damithc]

Good start @JiaXinEu
Added some comments/suggestions.

[damithc]

Suggested change

	The main difference here is that DialogBox checks `Use fx:root construct` and _does not define a controller class_. Checking this enables the use of the `fx:root` element, allowing you to reference a root element predefined by calling the `setRoot()` method. The controller can be programatically set using the `setController()` method.
	More about `fx:root` on the documentation [Introduction to FXML | JavaFX 2.2](https://docs.oracle.com/javafx/2/api/javafx/fxml/doc-files/introduction_to_fxml.html#root_elements).
	The main difference here is that we tick the checkbox `Use fx:root construct` and _do not define a controller class_. Ticking this enables the use of the `fx:root` element, allowing you to reference a root element predefined by calling the `setRoot()` method. The controller can be programatically set using the `setController()` method.
	More about `fx:root` on the documentation [Introduction to FXML | JavaFX 2.2](https://docs.oracle.com/javafx/2/api/javafx/fxml/doc-files/introduction_to_fxml.html#root_elements).

Reason: checks can be interpreted as verifies.

[damithc]

Can/should we also explain why we do the DialogBox differently? Must we do it this way for DialogBox or we are simply illustrating a different technique?

[damithc]

... by calling the setRoot() method.

It's not clear if you mean this allows you to call the setRoot() method or this has the same effect as calling the setRoot() method.

[JiaXinEu]

Can/should we also explain why we do the DialogBox differently? Must we do it this way for DialogBox or we are simply illustrating a different technique?

This is done differently since DialogBox is a custom component we build that will be reused.

[JiaXinEu]

... by calling the setRoot() method.

It's not clear if you mean this allows you to call the setRoot() method or this has the same effect as calling the setRoot() method.

Use of the fx:root element allows us to reference a root element. This root element will be predefined by calling the setRoot() method before we load().