Please let me know if you seen any typos or anything that can be clarified.
## Making a standard template JavaFX project
1. Review [Dr. Taylor's introduction to JavaFX](https://taylorial.com/cs1021/Install.htm).
2. Repeat, step-by-step, Dr. Taylor's instructions for creating a simple JavaFX project [in Section 3 of the the taylorial](https://taylorial.com/cs1021/Install.htm#configureintellij). Name your project something like "JavaFXTutorial"
* You should skip these steps if you have already done them:
- Click New... under Project SDK
- Select JDK and browse to C:\bin\Java\jdk-11.0.1
* Instead, ensure that Java 11 is selected as your Project SDK.
* <mark>Hint: If you get a runtime error about JavaFX, you may need to delete an existing run configuration and recreate by clicking on the green arrow again.</mark>
3. (Just for fun) Try out some of the techniques demonstrated in Section 17.2 and 17.3 of our text: Change the font size, alignment or title of your program.
## Making a JavaFX project from scratch
1. Repeat, step-by-step, Dr. Taylor's instructions for creating a simple JavaFX project [in Section 3 of the the taylorial](https://taylorial.com/cs1021/Install.htm#configureintellij). Name your project something like "JavaFXFromScratch". But note these key differences:
* Do not create a JavaFX project. Just create a plain vanilla ```Java``` project.
* As before, you should skip recreating your SDK. But you will need to confirm you are using the Java 11 SDK and language level just as always.
2. Create an empty class called Guide.
3. Extend Application
4. Implement the required start method (The IDE's autocorrect helps with this)
5. Create a main method in the Guide class.
* In main, call the static launch method, passing along the arguments given to main. <em>(Why is this method static?)</em>
6. In the start method, note that you are given a stage parameter. (This represents the main window of your application.) Write some code to show this stage.
7. Run your application!
## Customizing your application
Note: You can frequently run your program now to see the effect of your code.
1. Set the stage's title to "Guide"
2. Create a FlowPane and add a button to its children. (You have to get the children first, but no need to save these to a variable.)
* Call the button "Don't Panic"
3. Set the stage's scene to a new scene, which includes the pane as its root. Set the size to 300 by 400.
4. Add more children to the pane. Perhaps Text, or a TextField, or a TextArea.
## Respond to a Button
1. Make a class called PanicHandler.
2. Implement the ```EventHandler<ActionEvent>``` interface. This interface uses generics, just like ArrayList. You need to include the <ActionEvent> with the interface name so that the type of the parameter in the handle method is known.
3. Implement the handle method. It should be implemented as ```handle(ActionEvent e)```. If it is implemented as ```handle(Object e)``` or if you are getting comile errors, check that you are using generics as in the previous step.
4. In the panic handler class, print out something to the console (System.out) when the button is pressed. (We will respond to the user through the GUI later)
5. In the start method of the Guide, make the Button a variable, and set the onAction to a new instance of your PanicHandler class.
6. Run your program! You should see something appear in the console.
This is just a debugging strategy, but it illustrates we are closer to changing something in the GUI in response to the user.
## A more advanced layout
Using HBox or VBox, we can only lay out things in a single line. But if we combine them, the combination is powerful! In this section, we will create a simple "Microsoft Word" app with a toolbar across the top of the screen.
<toInstructors>TBA: Figure</toInstructors>
1. Create an outer VBox as the root of your stage's scene. (Recall that a "Stage" is what we normall call a "window" -- the complete box on the screen with an X to close it, a title, and all of the details of your program.)
2. Create an inner HBox as a child of the the VBox. Call it toolbar for a more meaningful variable name.
3. Add some buttons to the toolbar.
4. Add a TextArea to the root VBox. This is the blank space of the document that you can type into.
5. Run your program! If nothing shows, ensure that your outer VBox is the root assigned to the scene as in Step 1.
## Making a change in the GUI.
This is the first in a series of strategies for making changes in the GUI. Our final strategy will be to use lambda expressions or FXML.
1. Prepare to discard the PanicHandler class. (No action requried yet!)
2. Make your guide class implement the ```EventHandler<ActionEvent>``` interface in addition to extending Application. Be sure to include the generics ```<...>``` along with the interface name.
3. Implement the handle method within your Guide class. It should be implemented as ```handle(ActionEvent e)```. If it is implemented as ```handle(Object e)``` or if you are getting comile errors, check that you are using generics as in the previous step.
4. Make your Text object an instance variable of the Guide class. Be sure to set it to private. Be sure it is added to the pane.
5. In the handle method,
* Go ahead and print something to the console again. It's good for debugging.
* Set the text of the Text object to "In my professional opinion, now is the time to PANIC!!!!"
6. Instead of using the PanicHandler for the button's onAction, use ```this```
7. Run your program. The text should change when you click the button!
We will look at some alternative strategies for providing the code to respond to a button in the weeks ahead. The main drawback of this strategy is that every button would have to use the same handler method, which can be quite inconvenient.
## Defining an Inner Class
Our previous handler could not (easily) modify variables in the original class, although I'm sure you can think of ways we could make it work. Here, we instead use a new kind of class -- an inner class -- which can easily modify the private variables in the outer class.
1. Move your MyHandler class into your Guide class, but not into a method:
```
public class Guide {
...
public class MyHandler {
...
}
...
}
```
2. Make your TextArea a private variable of the Guide class.
3. In your button handler's method, in addition to the debugging println, set the text of your text area to "The answer is 42."
4. Run your program. When you press the button, it should provide this "template text" in the body of your document!