13.1. Getting Started¶

In this chapter, we will extend an existing JavaFX class to build our own custom JavaFX component. Follow along with the following steps:

Important

Before you begin, you should ensure that your terminal emulator supports X-forwarding. If you have not completed the JavaFX Chapter, please do so now.

Use the following command to download and execute a shell script that retrieves the starter code for this tutorial and places it into a subdirectory called cs1302-components:
```
curl -s -L https://git.io/fjfie | bash
```
Change into the cs1302-components directory that was just created and look around. There should be multiple Java files contained within the directory structure. To see a listing of all of the files under the src subdirectory, use the tree command as follows:
```
tree src
```

Compile and run the provided code without any errors or warnings. If you need a reminder of the compile commands, review the relevant parts of the JavaFX Compilation Section

Note

We recommend creating a compile script so you don’t have to retype the compilation commands. If you completed the previous steps correctly, your app should look similar to the screenshot below. You may also find it helpful to review the scene graph for this app (also seen below).

                                     --|
                      Stage            |
                        |              |
                      Scene            |
       |--              |              |
       |               VBox            | Overall
       |               / \             | Containment
Scene  |              /   \            | Hierarchy
Graph  |            HBox  ImageView    |
       |            / \                |
       |           /   \               |
       |    TextField  Button          |
       |--                           --|

The default size for the image in the ImageView container is 500x500 (even though the image says 300x300). Do a quick Google search for “500x500 images” and load one or two of the images you find to ensure the app functions properly. Note: The Image class only supports the BMP, GIF, JPEG, and PNG file types.