The Application Class and Setting a Scene.
To help us explore the JavaFX modules, packages, and classes, open up the Java Version 9 API. This version of the API has a really helpful search bar that you can use to quickly find the classes we need.
To make an Application in Java we have to do several things:
Design a scene.
Set the scene on a stage.
Show the stage.
You might notice that the words used to describe making an application are a lot like presenting a play in real life. We can set up multiple scenes and switch between them on our stage. Then, we reveal each scene like pulling back the curtain on stage.
For our first example, we will be using the javafx.graphics module along with our typical java.base module we are so familiar with.
Our graphics will be organized into a Group. The graphics we want to show must be added to list kept for us in our Group. The Group is called a node in the graphics tree – more on this later.
Example 1.1
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.Group;
import javafx.stage.Stage;
public class Fun extends Application {
public static final int SCENE1_WIDTH = 400;
public static final int SCENE1_HEIGHT = 300;
public void start(Stage stage) {
Group root = new Group();
Scene scene1 = new Scene(root, SCENE1_WIDTH, SCENE1_HEIGHT);
stage.setTitle("My Fun Application!");
stage.setScene(scene1);
stage.show();
}
}
Run this application file!
Notice that we did not make the Stage. The Stage we are setting up is a parameter this passed to the start method. The start method is automatically called with a Stage created by the Java Virtual Machine whenever we choose to run an application. You can think of the start method as being similar to the main(String[] args) method that we used with non-graphics applications.
After creating our Group, which is a root node in our tree graph (again don’t worry, I’ll explain what that means in a little while), we create a scene.
Check out the Scene constructors in the API, what do you notice!
Hopefully you notice that they all have a parameter caller Parent root. The root is just a description for what it is, but the important thing to realize is that the root is a Parent. Parent is a subclass of Node. A Parent is a node that can have other Node objects attached to it.
Since Group subclasses Parent, a Group is a Parent Node
Before displaying our scene, we set the stage’s title, scene, and finally show it!
Before we go any further with this we need to discuss Lists. Lists are like arrays, but you are not set with one size and that’s all. A List can grow and shrink in size as you need it. Java keeps all graphical shapes and text in a GUI application in lists, so we need to know how to use them!
You add to a list with the add method and remove with remove method. To access an element in a list, you use the get method with the index in the list of the item you want.
There are a couple of trade offs about lists – they can only hold Object types and you must type them using what are called angle braces < >. When a class requires you to set its type, the class is said to be using generics.
List is an interface that is implemented by several classes. Recall that it is typically preferred to type instances as their interface for greater flexibility.
Since the return types and some parameter types are set by you, we use the letter E to represent “element type” meaning String, Node, Group, or whatever other Object you want the List to hold.
There are quite a few methods in the List interface, but the most important are shown in Diagram 1.1 below. Be sure to confirm that you can find this interface. You can search the API for it, or find it in the java.base module in the java.util package
Diagram 1.1 Important Methods of List Interface
boolean add(E element) : Adds the element of type T to this list and returns true if it adds successfully (for most List adding is always successful) .
E get(int index) : Returns the element at index
E remove(int index): Returns and removes the element at index.
E set(int index, E newElement): Replaces the element at index with the newElement and returns the old element that was there.
int size(): Returns the number of elements in this list.
Now let’s briefly look at a couple of examples of basic classes that use List. The next example create two lists using two different instantiating classes. For a full description of all classes that can make a List check out the API’s list of all known implementing classes.
Example 1.2 List instances using LinkedList and ArrayList class.
import java.util.List; // List interface
import java.util.ArrayList; // class that implements List
import java.util.LinkedList; // another class that implements List
public class ListExample {
public void exampleA() {
// we have to use < > around the element type
List<String> words = new ArrayList<String>();
words.add("hi");
words.add("I");
words.add("am");
words.add("making");
words.add("a");
words.add("list");
System.out.println(words );
System.out.println("Size = " + words.size());
words.set(3, "made");
words.remove(2);
System.out.println(words);
System.out.println("Size = " + words.size());
}
public void exampleB() {
// another class to implements List is LinkedList
// LinkedList are faster at accessing the first and last
// element, but slower in the middle.
List<Integer> nums = new LinkedList<>();
// notice we do not have to put Integer in the second <>
// notice we use Integer, not int, because a List
// can only hold Object types
nums.add(1);
nums.add(23);
nums.add(15);
int total = 0;
// we can use for - each loops with lists!
for(Integer x : nums) {
total += x;
}
System.out.println(total);
}
public static void main(String[] args) {
ListExample ex = new ListExample();
ex.exampleA();
ex.exampleB();
}
}
Output:
[hi, I, am, making, a, list]
Size = 6
[hi, I, made, a, list]
Size = 5
39
Each graphical item you add to the scene belongs in a parent node that contains a List of all memebers.
Now, that we know what a List is… r let’s describe what the graphical tree system is. Each item in the scene graph is a node. Therefore, the items you add to the scene must be instances of Node class or a subclass of Node. There are two types of Node subclasses: branches and leafs. Branches can have children or not, but leafs cannot have any children. The trees we are talking about are like factor trees. They look like upside down trees. Branches hold together the different leafs.
Consider this diagram:
Now, let’s write an application that creates this crazy, crazy scene!
The nodes are added to Group nodes by adding them to the Group node’s List object
Example 1.3
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.Group;
import javafx.stage.Stage;
import javafx.scene.image.ImageView;
import javafx.scene.text.Text; // for adding text
import javafx.scene.shape.*; // imports all classes in shape
// including Rectangle, polygon, circle...
public class Fun extends Application {
public static final int SCENE1_WIDTH = 400;
public static final int SCENE1_HEIGHT = 300;
public void start(Stage stage) {
Group root = setUpRoot();
Scene scene1 = new Scene(root, SCENE1_WIDTH, SCENE1_HEIGHT);
stage.setTitle("My Crazy Application!");
stage.setScene(scene1);
stage.show();
}
public Group setUpRoot() {
Group root = new Group();
// we use getChildren method to get the list of child nodes
// then we add, remove, or get however we want
root.getChildren().add(new Circle(50)); // radius = 50
root.getChildren().add(new Rectangle(100, 200));
// w = 100, h = 200
// now we add a URL (web link) to a picture.
// find any picture you want and copy it’s URL instead of
// mine if you like.
ImageView pupper = new ImageView("http://pulpbits.net/wp-
content/uploads/2014/02/brazil-dog-puppies-330x220.jpg");
root.getChildren().add(pupper);
return root;
}
}}
If you used my image line, you should see something like
So what happened to our circle and rectangle!
Well, you see the Nodes are added to the scene in layers in order that you create them. Our picture is covering up our rectangle and circle.
Try changing the code so the ImageViewer is added first and you should get the following
As you can see the circle ad rectangle are overlapping too much for us to make out both of them. Let’s try moving the circle.
No worries, though! We just need to use a different Circle constructor.
Circle(double centerX, double centerY, double radius)
Change the call to the Constructor of the circle to the following:
root.getChildren().add(new Circle(200, 150, 50));
And we get:
