In this blog I am going to show how you can include images to the scene graph, as a normal image or as a button.
First of all we have to import the image library into the Sample.fxml file. This can be doing using this code.
<?import javafx.scene.image.*?>
Now we can begin. Before we can even give the location of the image we want to display on the scene. We have to pad it in a couple of tags first, these are <ImageView> <image> and finally the <Image> tags. Notice the difference between the two image tags the <Image> tag carries the url (image location) while the <image> tag nests the the <Image> tag. Like this.
<ImageView layoutX="160" layoutY="100">
<image>
<Image url="@logo.gif"/>
</image>
</ImageView>
Just like the hash tag (#) is used to differentiate between String and Methods, the at (@) symbol is also used to differentiate between String and relative Directories. So in this example the image logo will loaded from the same folder as the Sample.fxml file. However, if the image was to be in a img directory the url would be @img/logo.gif. Before clicking on the run button, lets give the image a location on the scene to be on. Add the following to the <ImageView> tag layoutX=”160″ layoutY=”100″ like this.
<ImageView layoutX="160" layoutY="100">
This is what it looks like (does the logo look familiar, 
).
To add an image to a button firstly you have to create a button and embed the <graphic> tag before finally adding the image mark up just like we did when adding the image.
<Button>
<graphic>
<ImageView>
<image>
<Image url="@smback.gif"/>
</image>
</ImageView>
</graphic>
</Button>
To give the button a location on the page we do the same thing we did with the <ImageView> tag, add layoutX=”250″ layoutY=”120″ to the button. Just for completeness I will add the textColor method to this button as well which means instead of clicking on the big buttons for the text to change color and size, the new button would be able to achieve the same feat.
<Button layoutX=”250″ layoutY=”120″ onAction=”#textColor”>
This is what you should have displayed which triggers the same method as the previous button.
To add the finishing touches to the button, I am now going to add a tool tip to the button giving users hints on the use of the button. The <tooltip> tag is on the same level as the <graphic> tag so inside the <Button> tag. Within the <tooltip> tag we need to include a <Tooltip> tag which has the message to be displayed. For example.
<tooltip>
<Tooltip text="Change text color" />
</tooltip>
This is what it should look like.
What do you guys think? What else do you want to see added to the app?
