Java - Programming Module5 (JavaFX)
Java - Programming Module5 (JavaFX)
5.1 JavaFXBasicConcepts
JavaFX is a Java library that is used to develop Desktop applications as well as Rich Internet
Applications (RIA). The applications built in JavaFX, can run on multiple platforms including
Web, Mobile and Desktops.
Our JavaFX tutorial includes all topics of JavaFX library such as Fundamentals, 2D Shapes,
3D Shapes, Effects, Animation, Text, Layouts, UI Controls, Transformations, Charts, JavaFX
with CSS, JavaFX with Media etc.
5.1.1 What is JavaFX?
JavaFX is a Java library used to develop Desktop applications as well as Rich Internet
Applications (RIA). The applications built in JavaFX, can run on multiple platforms including
Web, Mobile and Desktops.
JavaFX is intended to replace swing in Java applications as a GUI framework. However, It
provides more functionalities than swing. Like Swing, JavaFX also provides its own
components and doesn't depend upon the operating system. It is lightweight and hardware
accelerated. It supports various operating systems including Windows, Linux and Mac OS.
5.1.2 History of JavaFX
JavaFX was developed by Chris Oliver. Initially the project was named as Form Follows
Functions (F3) . It is intended to provide the richer functionalities for the GUI application
development. Later, Sun Micro-systems acquired F3 project as JavaFX in June, 2005.
Sun Micro-systems announces it officially in 2007 at W3 Conference. In October 2008,
JavaFX 1.0 was released. In 2009, ORACLE corporation acquires Sun Micro-Systems and
released JavaFX 1.2. the latest version of JavaFX is JavaFX 1.8 which was released on 18th
March 2014.
5.1.3 Features of JavaFX
Feature Description
CSS like styling JavaFX code can be embedded with the CSS to improve the
style of the application. We can enhance the view of our
application with the simple knowledge of CSS.
Swing interoperability The JavaFX applications can be embedded with swing code
using the Swing Node class. We can update the existing
swing application with the powerful features of JavaFX.
Canvas API Canvas API provides the methods for drawing directly in
an area of a JavaFX scene.
Rich Set of APIs JavaFX provides a rich set of API's to develop GUI
applications.
BorderPane Organizes nodes in top, left, right, centre and the bottom of the screen.
FlowPane Organizes the nodes in the horizontal rows according to the available
horizontal spaces. Wraps the nodes to the next line if the horizontal
space is less than the total width of the nodes
StackPane Organizes nodes in the form of a stack i.e. one onto another
However, we can add various objects to this primary stage. The objects can only be added in a
hierarchical way i.e. first, scene graph will be added to this primaryStage and then that scene
graph may contain the nodes. A node may be any object of the user's interface like text area,
buttons, shapes, media, etc.
Scene
Scene actually holds all the physical contents (nodes) of a JavaFX application.
Javafx.scene.Scene class provides all the methods to deal with a scene object. Creating scene
is necessary in order to visualize the contents on the stage.
At one instance, the scene object can only be added to one stage. In order to implement Scene
in our JavaFX application, we must import javafx.scene package in our code. The Scene can
be created by creating the Scene class object and passing the layout object into the Scene class
constructor. We will discuss Scene class and its method later in detail.
Scene Graph
Scene Graph exists at the lowest level of the hierarchy. It can be seen as the collection of
various nodes. A node is the element which is visualized on the stage. It can be any button, text
box, layout, image, radio button, check box, etc.
The nodes are implemented in a tree kind of structure. There is always one root in the scene
graph. This will act as a parent node for all the other nodes present in the scene graph. However,
this node may be any of the layouts available in the JavaFX system.
The leaf nodes exist at the lowest level in the tree hierarchy. Each of the node present in the
scene graphs represents classes of javafx.scene package therefore we need to import the
package into our application in order to create a full featured javafx application.
4 CheckBox Check Box is used to get the kind of information from the
user which contains various choices. User marked the
checkbox either on (true) or off(false).
5 TextField Text Field is basically used to get the input from the user
in the form of text. javafx.scene.control.TextField
represents TextField
9 ProgressBar Progress Bar is used to show the work progress to the user.
It is represented by the class
javafx.scene.control.ProgressBar.
11 ScrollBar JavaFX Scroll Bar is used to provide a scroll bar to the user
so that the user can scroll down the application pages.
}
public static void main(String[] args) {
launch(args);
}
}
Output:
}
public static void main(String[] args) {
launch(args);
}
}
Output:
5.6 JavaFX Button
JavaFX button control is represented by javafx.scene.control.Button class. A button is a
component that can control the behaviour of the Application. An event is generated whenever
the button gets clicked.
How to create a Button?
Button can be created by instantiating Button class. Use the following line to create button
object.
Button btn = new Button("My Button");
Adding a Button to the scene graph
To visualize the button on the screen, we must attach it to the scene object. The following code
creates a button and adds it to the scene object.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ButtonTest extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
}
public static void main(String[] args) {
launch(args);
}
}
Output:
Setting the image on the button
Button class contains a constructor which can accept graphics along with the text displayed on
the button. The following code implements image on the button.
import java.io.FileInputStream;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
FileInputStream input=new
FileInputStream("/home/javatpoint/Desktop/JavaFX/Images/colored_label.png
");
Image image = new Image(input);
ImageView img=new ImageView(image);
}
public static void main(String[] args) {
launch(args);
}
}
import java.io.FileInputStream;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
FileInputStream input=new
FileInputStream("/home/javatpoint/Desktop/JavaFX/Images/colored_label.png");
Image image = new Image(input);
ImageView img=new ImageView(image);
}
public static void main(String[] args) {
launch(args);
}
}
5.7 RadioButton
The Radio Button is used to provide various options to the user. The user can only choose one
option among all. A radio button is either selected or deselected. It can be used in a scenario of
multiple choice questions in the quiz where only one option needs to be chosen by the student.
The following code shows how one radio button is selected from a toggle group.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class RadioButtonTest extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Label l = new Label("What do you listen: ");
CheckBox c1 = new CheckBox("Radio one");
CheckBox c2 = new CheckBox("Radio Mirchi");
CheckBox c3 = new CheckBox("Red FM");
CheckBox c4 = new CheckBox("FM GOLD");
HBox root = new HBox();
root.getChildren().addAll(l,c1,c2,c3,c4);
root.setSpacing(5);
Scene scene=new Scene(root,800,200);
primaryStage.setScene(scene);
primaryStage.setTitle("CheckBox Example");
primaryStage.show();
}
}
Output:
5.9 ListView
The JavaFX ListView control enables users to choose one or more options from a predefined
list of choices. The JavaFX ListView control is represented by the class
javafx.scene.control.ListView . This JavaFX ListView tutorial will explain how to use the
ListView class.
Creating a ListView
You create a ListView simply by creating a new instance of the ListView class. Here is a
JavaFX ListView instantiation example:
ListView listView = new ListView();
Adding Items to a ListView
You can add items (options) to a ListView by obtaining its item collection and add items to it.
Here is an example that adds items to a JavaFX ListView :
listView.getItems().add("Item 1");
listView.getItems().add("Item 2");
listView.getItems().add("Item 3");
Adding a ListView to the Scene Graph
To make a ListView visible you must add it to the scene graph. This means that you must add
the ListView to a Scene object or to some layout component which is then attached to the
Scene object.
Here is an example showing how to add a JavaFX ListView to the scene graph:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class ListViewExperiments extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("ListView Experiment 1");
ListView listView = new ListView();
listView.getItems().add("Item 1");
listView.getItems().add("Item 2");
listView.getItems().add("Item 3");
HBox hbox = new HBox(listView);
Scene scene = new Scene(hbox, 300, 120);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
Output:
5.10 ComboBox
The JavaFX ComboBox control enables users to choose an option from a predefined list of
choices, or type in another value if none of the predefined choices matches what the user want
to select. The JavaFX ComboBox control is represented by the class
javafx.scene.control.ComboBox . This JavaFX ComboBox tutorial will explain how to use the
ComboBox class.
Creating a ComboBox
You create a ComboBox simply by creating a new instance of the ComboBox class. Here is a
JavaFX ComboBox instantiation example:
ComboBox comboBox = new ComboBox();
Adding Choices to a ComboBox
You can add choices to a ComboBox by obtaining its item collection and add items to it. Here
is an example that adds choices to a JavaFX ComboBox :
comboBox.getItems().add("Choice 1");
comboBox.getItems().add("Choice 2");
comboBox.getItems().add("Choice 3");
Adding a ComboBox to the Scene Graph
To make a ComboBox visible you must add it to the scene graph. This means that you must
add the ComboBox to a Scene object or to some layout component which is then attached to
the Scene object.
Here is an example showing how to add a JavaFX ComboBox to the scene graph:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class ComboBoxExperiments extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("ComboBox Experiment 1");
ComboBox comboBox = new ComboBox();
comboBox.getItems().add("Choice 1");
comboBox.getItems().add("Choice 2");
comboBox.getItems().add("Choice 3");
HBox hbox = new HBox(comboBox);
Scene scene = new Scene(hbox, 200, 120);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Label user_id=new Label("User ID");
Label password = new Label("Password");
TextField tf=new TextField();
PasswordField pf=new PasswordField();
pf.setPromptText("Enter Password");
Button b = new Button("Submit");
GridPane root = new GridPane();
root.addRow(0, user_id, tf);
root.addRow(1, password, pf);
root.addRow(5, b);
Scene scene=new Scene(root,300,200);
primaryStage.setScene(scene);
primaryStage.setTitle("PasswordField Example");
primaryStage.show();
}
}
Output:
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
ScrollBar s = new ScrollBar();
StackPane root = new StackPane();
root.getChildren().add(s);
Scene scene = new Scene(root,300,200);
primaryStage.setScene(scene);
primaryStage.setTitle("ScrollBar Example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
Output:
Setting values and orientation
As we see in the modern days application, the scrollbar is shown horizontally as well as
vertically. In JavaFX, we can set any of the orientation for the scrollbar. setOrientation() and
passing the Orientation.VERTICAL property into the method as an argument.
ScrollBar class also provide three methods named as:
1. setMin()
2. setMax()
3. setValue()
these methods are used to set the minimum, maximum and current value of the scrollbar. It
decides span of the scrollbar. The following code shows the implementation.
import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Progress_Indicator extends Application{
@Override
publicvoid start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
ScrollBar s = new ScrollBar();
s.setMin(0);
s.setMax(200);
s.setValue(110);
s.setOrientation(Orientation.VERTICAL);
s.setUnitIncrement(12);
s.setBlockIncrement(10);
StackPane root = new StackPane();
root.getChildren().add(s);
Scene scene = new Scene(root,300,200);
primaryStage.setScene(scene);
primaryStage.setTitle("ScrollBar Example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Output:
EXAMPLE:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class MenuExample extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
BorderPane root = new BorderPane();
Scene scene = new Scene(root,200,300);
MenuBar menubar = new MenuBar();
Menu FileMenu = new Menu("File");
MenuItem filemenu1=new MenuItem("new");
MenuItem filemenu2=new MenuItem("Save");
MenuItem filemenu3=new MenuItem("Exit");
Menu EditMenu=new Menu("Edit");
MenuItem EditMenu1=new MenuItem("Cut");
MenuItem EditMenu2=new MenuItem("Copy");
MenuItem EditMenu3=new MenuItem("Paste");
EditMenu.getItems().addAll(EditMenu1,EditMenu2,EditMenu3);
root.setTop(menubar);
FileMenu.getItems().addAll(filemenu1,filemenu2,filemenu3);
menubar.getMenus().addAll(FileMenu,EditMenu);
primaryStage.setScene(scene);
primaryStage.show();
}
}
Output:
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class LabelTest extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
FileInputStream input=new
FileInputStream("/home/javatpoint/Desktop/JavaFX/Images/colored_label.png");
Image image = new Image(input);
ImageView img=new ImageView(image);
@Override
publicvoid handle(ActionEvent arg0) {
// TODO Auto-generated method stub
System.out.println("Button clicked");
}
} );
}
public static void main(String[] args) {
launch(args);
}
}