Open the project from last lesson
Double click on NotesUI.fmxl, this will open the JavaFX Scene Builder
On the left side you have a area called Hierarchy, from there press Del or Shift+Backspace on Mac to delete the Button and the Label. You'll receive a warning, that some components have been assigned an fx:id, click Delete as we don't need them anymore.
Resize the AnchorPane to have enough room for our design, eg. 820x550px
From the top left pick the Container called Accordion and drag over the AnchorPane design
Chose then from Controls a List View and drag inside the Accordion. You'll notice that by default the Accordion has 2 TitledPane, and you can switch between them by clicking on their name.
I'll let you the pleasure to do the rest in order to get the following result
Here is the list of objects used
Save it and then return to NetBeans
Run the application and it should be run without any issue. If you click on buttons they all are functional, but nothing happens as we didn't link them with any action. We'll see this in the next episode.
Now, let's play a little bit with the application and try to resize it… Have you notice the behavior? If the form is too small, some objects aren't visible, if it is too large there is too much space . That's for sure something that your users won't like and you as a programmer have to care about this.
From NetBeans double click NotesUI.fmxl so to return back to JavaFX Scene Builder
Select the TextField from bottom left of Notes, the one where I put the text Category and then from the right part of JavaFX Scene Builder you'll notice a panel called Inspector.
Chose Layout and then click on the dotted lines from left and bottom of the square, like you see in the below image
This will make the textfield to have always the same distance from left and bottom no matter the size of the form.
Save and run the application. Note that whenever the form is changing the Height, the Category TextField has the same distance from the bottom.
Select Accordion and do the same steps but also check the top dotted line, because we want the Accordion to have the same height as the main form has.
I'll let you the pleasure to do the same for the rest of components. It's very important to design an application that can be resize by user and in the same time, all the buttons are on place.
Last step is to make sure our application is not getting smaller then a certain size, as this will hide parts of our layout. So select the AnchorPane and from Inspector go to Layout and note down the Width and Height.
Go back to NetBeans and open the file Main.java and add the following code just after stage.setScene(scene); (around line 26)
stage.setMinWidth(820);
stage.setMinHeight(550);
Use your own width and height. This will prevent user to reduce the width or height of your application to a value that will hide parts of your layout.
So now you should have done most of the design part and next time we'll see how can we enter some data into our newly created application…
Note: in case you miss something, here are the source files of the project till this point.
