Adapt JavaFX tutorial for Duke

Rather than to have distinct tutorials building up to a Duke-like
application, let's merge the tutorials into Duke's tutorials
to enhance cohesiveness in the course material.

We also merge the gradle/gradleless tutorials into one by providing a
universal entry point to JavaFX in the style of AddressBook
applications.

Fix header levels in JavaFX Tutorial 1.

Change code samples to use Duke.

Add hints on required import statements.

Add location hints to code snippets to help students find where to copy
and paste them.

Remove nitpicks to make the development process smoother.

Fix usage of `Collections` to `FXCollections`.

Replace image for JavaFX tutorial 3.

Specify location to place images.

Replace a screenshot that referred to the outdated package structure.

Remove reference to DukeStub.

tutorials/gradleTutorial.md

@@ -164,6 +164,6 @@ Now that you have a general idea of how to accomplish basic tasks with Gradle, h
 
 * [Official Gradle Documentation](https://docs.gradle.org/current/userguide/userguide.html)
 
-----------------------------------------------------------------------------------------
+--------------------------------------------------------------------------------
 **Authors:**
-* Initial Version: Jeffry Lum
+* Initial Version: Jeffry Lum

tutorials/javaFxTutorialPart1.md

@@ -10,7 +10,7 @@ A JavaFX application is like a play you are directing. Instead of creating props
 
 ## Setting up Java FX
 
-#### If you are not using Gradle
+### If you are not using Gradle
 
 1. Download the [JavaFX 11 SDK](https://gluonhq.com/products/javafx/) and unzip it.
 
@@ -23,7 +23,7 @@ A JavaFX application is like a play you are directing. Instead of creating props
    `--module-path {JAVAFX_HOME}/lib --add-modules javafx.controls,javafx.fxml`<br>
    e.g., `--module-path C:/javafx-sdk-11.0.2/lib --add-modules javafx.controls,javafx.fxml`
 
-#### If you are using Gradle
+### If you are using Gradle
 
 Update your `build.gradle` to include the following lines:
 ```groovy
@@ -52,11 +52,9 @@ import javafx.scene.Scene;
 import javafx.scene.control.Label;
 import javafx.stage.Stage;
 
-public class HelloWorld extends Application {
-
-    public static void main(String[] args) {
-        launch();
-    }
+public class Duke extends Application {
+
+    // ...
 
     @Override
     public void start(Stage stage) {
@@ -71,7 +69,23 @@ public class HelloWorld extends Application {
 
 Note how we have created a `Label` to contain the text that we want to show. We then create the `Scene` and set its content. Finally, we set the stage and show it. 
 
-Run the program and you should see something like this:
+Next, we create another Java class, `Launcher`, as an entry point to our application.
+The `Launcher` class is reproduced below in its entirety.
+
+```java
+import javafx.application.Application;
+
+/**
+ * A launcher class to workaround classpath issues.
+ */
+public class Launcher {
+    public static void main(String[] args) {
+        Application.launch(Duke.class, args);
+    }
+}
+```
+
+Run `Launcher` and you should see something like this:
 
 ![Hello World](assets/HelloWorld.png) 
 
@@ -91,6 +105,6 @@ Congratulations! You have created your first GUI application!
    1. Can you have more than one `Stage` an application?
    1. Try creating another stage and showing it! What happens?
 
-----------------------------------------------------------------------------------------
+--------------------------------------------------------------------------------
 **Authors:**
-* Initial Version: Jeffry Lum
+* Initial Version: Jeffry Lum

tutorials/javaFxTutorialPart2.md

@@ -49,7 +49,7 @@ import javafx.scene.layout.VBox;
 import javafx.stage.Stage;
 
 
-public class Main extends Application {
+public class Duke extends Application {
 
     private ScrollPane scrollPane;
     private VBox dialogContainer;
@@ -58,7 +58,7 @@ public class Main extends Application {
     private Scene scene;
 
     public static void main(String[] args) {
-        launch();
+        // ... 
     }
 
     @Override
@@ -105,34 +105,35 @@ Add the following code to the bottom of the `start` method. You'll have to add `
 
         //...
 
-         //Step 2. Formatting the window to look as expected
-         stage.setTitle("Duke");
-         stage.setResizable(false);
-         stage.setMinHeight(600.0);
-         stage.setMinWidth(400.0);
-
-         mainLayout.setPrefSize(400.0, 600.0);
-
-         scrollPane.setPrefSize(385, 535);
-         scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
-         scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.ALWAYS);
-
-         scrollPane.setVvalue(1.0);
-         scrollPane.setFitToWidth(true);
-
-         dialogContainer.setPrefHeight(Region.USE_COMPUTED_SIZE);
-
-         userInput.setPrefWidth(325.0);
-
-         sendButton.setPrefWidth(55.0);
-
-         AnchorPane.setTopAnchor(scrollPane, 1.0);
-
-         AnchorPane.setBottomAnchor(sendButton, 1.0);
-         AnchorPane.setRightAnchor(sendButton, 1.0);
-
-         AnchorPane.setLeftAnchor(userInput , 1.0);
-         AnchorPane.setBottomAnchor(userInput, 1.0);
+        //Step 2. Formatting the window to look as expected
+        stage.setTitle("Duke");
+        stage.setResizable(false);
+        stage.setMinHeight(600.0);
+        stage.setMinWidth(400.0);
+
+        mainLayout.setPrefSize(400.0, 600.0);
+
+        scrollPane.setPrefSize(385, 535);
+        scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
+        scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.ALWAYS);
+
+        scrollPane.setVvalue(1.0);
+        scrollPane.setFitToWidth(true);
+
+        // You will need to import `javafx.scene.layout.Region` for this. 
+        dialogContainer.setPrefHeight(Region.USE_COMPUTED_SIZE);
+
+        userInput.setPrefWidth(325.0);
+
+        sendButton.setPrefWidth(55.0);
+
+        AnchorPane.setTopAnchor(scrollPane, 1.0);
+
+        AnchorPane.setBottomAnchor(sendButton, 1.0);
+        AnchorPane.setRightAnchor(sendButton, 1.0);
+
+        AnchorPane.setLeftAnchor(userInput , 1.0);
+        AnchorPane.setBottomAnchor(userInput, 1.0);
 
         // more code to be added here later
     }
@@ -152,6 +153,6 @@ Run the application again. It should now look like this:
    1. What happens when you press the `Enter` key or left-click the send button?
    1. Why?
 
-----------------------------------------------------------------------------------------
+--------------------------------------------------------------------------------
 **Authors:**
-* Initial Version: Jeffry Lum
+* Initial Version: Jeffry Lum

tutorials/javaFxTutorialPart3.md

@@ -1,8 +1,6 @@
 # JavaFX Tutorial 3 – Interacting with the user
 
-Picking up from where we left off last tutorial, we have successfully achieved the desired layout. Now let’s make the application respond to user input.
-
-:info: You should substitute the provided `DukeStub` class with your completed Duke. 
+Picking up from where we left off last tutorial, we have successfully achieved the desired layout. Now let’s make the application respond to user input. 
 
 Rather than to do everything in one try, let’s iterate and build up towards our final goal. 
 
@@ -39,6 +37,7 @@ public void start(Stage stage) {
  * @return a label with the specified text that has word wrap enabled.
  */
 private Label getDialogLabel(String text) {
+    // You will need to import `javafx.scene.control.Label`.
     Label textToAdd = new Label(text);
     textToAdd.setWrapText(true);
 
@@ -103,10 +102,16 @@ import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 ```
 
-Next, add two images:
+Next, add two images to the `main/resources/images` folder.
+For this tutorial, we have two images `DaUser.png` and `DaDuke.png` to represent the user avatar and Duke's avatar respectively.
+
 ```java
-private Image user = new Image(this.getClass().getResourceAsStream("/images/DaUser.png"));
-private Image duke = new Image(this.getClass().getResourceAsStream("/images/DaDuke.png"));
+public class Duke extends Application {
+    // ...
+    private Image user = new Image(this.getClass().getResourceAsStream("/images/DaUser.png"));
+    private Image duke = new Image(this.getClass().getResourceAsStream("/images/DaDuke.png"));
+    // ...
+}
 ```
 
 Add a new method to handle user input:
@@ -125,6 +130,14 @@ private void handleUserInput() {
     );
     userInput.clear();
 }
+
+/**
+ * You should have your own function to generate a response to user input.
+ * Replace this stub with your completed method.
+ */
+private String getResponse(String input) {
+    return "Duke heard: " + input;
+}
 ```
 
 Update the event handler code in the `start` method to use the new `handleUserInput` method:
@@ -154,18 +167,13 @@ Run the program and see how it works.
 One additional benefit of defining a custom control is that we can add behavior specific to our `DialogBox`. Let’s add a method to flip a dialog box such that the image on the left to differentiate between user input and Duke’s output.
 
 ```java
-// Make the constructor private
-private DialogBox(Label l, ImageView iv) {
-    //...
-}
-
 /**
  * Flips the dialog box such that the ImageView is on the left and text on the right.
  */
 private void flip() {
     this.setAlignment(Pos.TOP_LEFT);
     ObservableList<Node> tmp = FXCollections.observableArrayList(this.getChildren());
-    Collections.reverse(tmp);
+    FXCollections.reverse(tmp);
     this.getChildren().setAll(tmp);
 }
 
@@ -224,6 +232,6 @@ You have successfully implemented a fully functional GUI for Duke!
    * What was the development workflow like?
    * Is the code base well-organized?
 
-----------------------------------------------------------------------------------------
+--------------------------------------------------------------------------------
 **Authors:**
 * Initial Version: Jeffry Lum