JavaFX Event Handling,
Controls and Components
Syllabus
VAN ae Controls : Event Basics - Handling Key and Mouse Events. Controls :
Checkbox, id jeButton - RadioButtons - ListView - ComboBox - ChoiceBox - Text Controls -
serollPane. Layouts - FlowPane - HBox and VBox - BorderPane - StackPane - GridPane.
‘Menus - Basics - Menu - Menu bars - Menultem.
Contents "|
51 Basicas of JAVAFX
52 Event Basics
53 Handling Key and Mouse Events
54 Controls
55 Layouts
5.6 Menus
5.7 Two Marks Questions with Answers
Sree reise
» cians wal + Handling, Controls and Compon,
Object Oriented Programming, 5-2 JavaFX Even
(1) start) : This is the method in which we write the code for JavaFX application. The construct
for this method is
Public abstract void start(Stage primaryStage)
@) launchO : In the main method, you have to I
method. This method internal]
launch() method is static,
jaunch the application using the launch()
ly calls the start() method of the “Application class, Since the
you need to call it from a static method such as main()
Writing First JavaFX Application Program
We can create an application program in NetBean IDE or Ecii
ipse IDE. Following steps are
used to create this application program -
Prerequisite : Before executing the JavaFX application program,
things installed in your PC
i) Java 8 ii) NetBeans 8
you need to have following
Step 1: From the File menu, choose New Project. Then select JavaFX application category,
choose JavaFX Application. Click Next.
TECHNICAL PUBLICATIONS - an up-thrust for knowledge Object Oriented Programming
Ctrl+Shift+N
FE) New Project... aE
$F) New File...
Ctrl+Shift+O
(Open Project...
Open Recent Project
Close Project (MylavaFxApplication)
Close Other Projects
Close All Projects
Open File...
Open Recent File
Project Groups...
Project Properties (MyJavaF Application)
Import Project
Export Project
Save Ctrl+S
Save As.
Save All Ctrl Shift+S
Page Setup...
Print. Ctrl+Alt+ Shifts P
Print to HTML... & oriented Programming 5-5__JavaFX Event Handling, Controls and Componen’
Projects:
] {$2 22v2% hoplcaion 7
[B erterne |
1, Saver Fame Aaphcaton i
1G, Javahx in Sing Application |
|
|
()) Javaee | |
| (a 2ovaFX Project with Existing Sources
(L Maven |
|) eters Medes
|
CE.
|
|
ina standard IDE project. |
Noiemaugresteseac puree mpeconan cosnincanse merken |
}
[rojec. Standard projects use an TDE-generated Ant build script to buld, run, and debug your
Projet.
Name the project and click Finish.
2avahXPltfom: 30K L8 Defeut) ¥
(Cicreate custom ereoader
Project ame: (NysavaFXeepication Freloader
(Cus Deiated Fier fr Star bras
bers Faller
Different users ard projects can share the same competion ibares (ee Hap fer dette).
[Eicrest cation Css ninabanaton be Genkrion
Ta ia eal as ea, vent Handling, Controls and Components
Object Oriented Programming
[5.1] Panes and UI Controls d
» Pane is a container class using which the UE components can be placed st any on
location with any desired size,
1 inside a pane and then place pane into a scene. Actually node
* Generally you place a nod
shapes, or a image view.
is any visual component such as Ul controls,
+ Ul Controls refer to label, button, Checkbox, radii
+ Shapes refer to lines, rectangle, circle and so on.
«A Scene can be displayed in a Stage. The relationship between node, Pane, Scene, Stage is
shown by following figure.
io buttons and 80 on.
Stage|
| ~ut Control
‘Shape
Fig. 5.1.2 Relationship between Node(UI Control and Shape), Pane, Scene, and Stage
+ Programming Example
package myjavafxapplication;
import javafx.application. Application;
import javafx.scene.Scene;
import javafx.scene.control. Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class MyJavaFXApplication extends Application {
@Override
public void start(Stage primaryStage) {
Button btn = new Button('Click Me");
StackPane root = new StackPane();
root.getChildren().add(btn);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Demo Program");
primaryStage.setScene(scene);
primaryStage.show();
t
public static void main(String|} args) {
launch(args);
}
}
TECHNICAL PUBLICATIONS® - an up-thrust for knowledge =
alignment ‘The overal alignment ofthe flowpane’s content
within its width and height.
ObjectProperty ‘columnHalignment | ™° Trorizontal alignment of nodes within each
§ column of a vertical flowpane-
“The vertical alignment of nodes within each row
sectProperty row Valignment
ae of a horizontal flowpane-
[praet “The amount of horizontal space Derwee" each
gat
Den a node in a horizontal flowpane oF the space
between columns in a vertical flowpane-
_— mA PUBLIGATONS® an spe or none
ed : WaFX Event Handling, Controls and C
Object Oriented Programming 5-44 _JavaPX Event Handling, Controls and Components
DoubleProperty — vgap The amount of vertical space between each node
in a vertical flowpane or the space between rows
in a horizontal flowpane.
Object?'ropertyOrientation> orientation _ | The orientation of this flowpane.
* The FlowPane can be created using following syntax
FlowPane flowpane = new FlowPane();
Programming Example
package myjavafxapplication;
import javafx.application. Application;
import javafx.scene.Scene;
import javafx.scene.control Button;
import javafx.scene.layout. FlowPane;
import javafx.stage.Stage;
public class MyJavaFXApplication extends Application {
@Override
Public void start(Stage primaryStage) {
FlowPane root=new FlowPane();
Button B1 = new Button("One');
Button B2 = new Button("Two');
Button B3 = new Button("Three');
Button B4 = new Button("Four’);
Button BS = new Button('Five");
Button B6 = new Button('Six’);
root.getChildren().add(B1);
Toot.getChildren().add(B2);
toot. getChildren().add(B3);
toot. getChildren().add(B4),
Toot.getChildren().add(B5),
root. getChildren(),add(B6);
Scene scene=,
‘new Scene(root, 150,150);
PrimaryStage.setScene(scene);
PrimaryStage.setTitle;
("FlowPane Demo");
PrimaryStage, show();
}
Public static void m,
ain(Strin,
Jaunch(args); ll args) { 4
object Oriented Programming.
eo Ss FlowPane Demo
Five | Six
One | Two [ane | Two | Three | Four
| Three | Four
Five
ce eal |
Initially we get this window
Ie expand the window horizontally, the buttons get
arranged horizontally automatically
[552] HBox
‘The HBox layout arranges the children in the form of horizontal rows.
* The HBox class extends Pane class,
Method
getAlignment()
getSpacing()
Tt returns the value of alignment Property.
Itretuims the spacing between its children,
| Tt returns the spacing betwe
setAlignment(Pos Value)
getChildren()
Itsets the alignment of the HBox.
It returns the nodes in HBox.
* The constructors of HBox class are -
HBox(): Creates an HBox object with no nodes.
HBox(double s): Creates an HBox with spacing in between nodes,
Programming Example
Package myjavatxapplication;
import javafx.application. Application;
import javafx.scene.Scene;
import javafx.scene.control Button;
import javatx.scene.layout. HBox;
import javafx.stage Stage;
Public class MyJavaFXApplication extends Application {
TECHNICAL PUBLICATIONS® - an up-thrust for knowledge
' - ying
a
@Override
public void start(Stage primarystage) {
Box root=new HBOx():
Button B1 = new Button("One")
Button B2 = new Button("TWo")
Button B3 = new Button("Three’)
Button B4 = new Button(Four’);
Button BS = new Button('Five"):
Scene scene=new Scene(root,200,100); cee
root getChildren().addAl(B1,B2,B3.B4,B6): Ne ee al oN
primaryStage.setScene(scene);
primaryStage.setTitle("HBOX Demo’); [one | Two | Tee Four Five
primaryStage.show(); —
y
public static void maint
launch(args);
+
+
Program Explanation : In above code,
(1) We have created four button elements.
(2) The layout pane is set as HBox. All the
using getChildren(.addAll function.
(3) This pane is then added to the Scene.
.d this scene is then added to the PrimaryStage.
(String{] args) {
button elements are attached to the HBox pane by
(4) Using setScene metho:
vBox
+ The VBox layout arranges the children in the form of vertical rows.
* The VBox class extends Pane class.
«It requires javafx.scene-layout. VBox class which provides all the required methods of this
pane.
+ Various methods used for layout using VBox are -
Method Purpose
getAlignment() It returns the value of alignment property.
getSpacingd) Itzeturns the spacing between its children,
setSpacing(value) It sets some spacing around the nodes of VBox
setAlignment(Pos Value) _.| It sets the alignment of the VBox
getChildren() It returns the nodes in VBox
TECHNICAL PUBLIGATIONS®
~ an up-thust for knowledge onents
e by
object Oriented Programming
Ee
«The constructors of VBox class a JavaFX Bvent Handling, Controls and Components
S are - a corperen
VBox(): Creates an VBox object with no nodes.
(): Creat vi ject with no nod
101
VBox(double s): Creates an VBox with i
signees spacing in between nodes.
package myjavafxapplication;
import javafx.application. Application;
import javafx.scene.Scene; :
import javafx.scene.control Button;
import javafx.scene.layout.VBox;
import javafx.stage Stage;
public class MyJavaFXApplication extends Application {
@Override
public void start(Stage primaryStage) {
‘VBox root=new VBox();
Button B1 = new Button("One");
Button B2 = new Button("Two');
Button B3 = new Button("Three’);
Output
Button B4 = new Button("Four’);
Button B5 = new Button('Five’);
Scene scene =new Scene(root, 100,150);
root.getChildren(). addAll(B1,B2,B3,B4,B9);
primaryStage.setScone(scene):
primaryStage.setTitle("VBOX Demo");
primaryStage.show()i
i
public st
Jaunch(args):
} args) {
atic void main(String!
rust for knowied®
sgarions® ono
TECHNICAL PUBL! Object Oriented Programming.
BorderPane
5-48 __ JavaFX Event Handlling, Controls and Components
+ BorderPane lays out children in top, left, right, bottom, and center positions.
+ Itcan be used to create the
‘ic looking application layouts.
+ It is represented by javafx.scene.layout.BorderPane class.
+ Various methods of BorderPane layout are
| Method
Description
setBottom(node value)
This method sets the bottom node of the border pane
setCenter(node value)
This method sets the center node of the border pane.
setLeft(node value)
‘This method sets the left node of the border pane.
setRight(node value)
This method sets the right node of the border pane.
setTop(node value)
This method sets the top node of the border pane.
© The BorderPane layout is
created as follows ~
(2) BorderPane(): Creates a new Border Pane.
(2) BorderPane(Node o):
Creates a new Border Pane with specified node at center,
(3) BorderPane(Node center, Node top, Node right, Node bottom, Node left): Creates
an BorderPane layout wi
the Border Pane,
Programing Example
Package myjavafxapplication;
‘ith the given Nodes to use for each of the main layout areas of
import javafx.application. Application;
import javafx.scene.Scene;
import javafx.scene.control. Button;
import javafx.scene layout. BorderPane;
import javafx stage Stage;
Public class Mi
{
@Override
Public void start
{
Button B top = new
Button B center
Button B bottom
'yJavaFXApplication extends Application
(Stage primaryStage)
Button('One');
new Button("Two');
= new Button("Three");
TECHNICAL PUBLICATIONS® an p-thnust for knowiecdg 5-49 _JavaEX Event Handling, Contro's 2° “Sn —
Object Oriented Programming
Button B_left = new Button(‘Four’}; a
Output BorderPaneD.. = —
Button B_right = new Button(‘Five");
x
BorderPane root = new BorderPane();
Toot.setTop(B_top);
root.setCenter(B_center);
Toot.setBottom(B_bottom);
root.setLeft(B_left);
root.setRight(B right);
Scene scene=new Scene(root,250,250);
primaryStage.setScene(scene);
primaryStage.setTitle("BorderPane
Demo");
primaryStage.show();
}
Public static void main(String|] args) {
launch(args);
}
}
StackPane
* StackPane is a layout in which every new node is placed on the top of previous node.
+ It makes use of javafx.scene layout.StackPane class.
+ Various methods of StackPane layout are -
Method Purpose
getAlignment() Retums the alignment of the StackPane.
.getAlignment(Node c) Returns the node's alignment
getMargin(Node o) Retums the insets of the node
setAlignment(Node n, Pos v) _| Sets the alignment of the node which is a part of StackPane
setAlignment(Pos v) Sets the alignment of the StackPane
setMargin(Noden, Insets v)_| Sets the margin of the node which is a part of StackPane.
© The constructor for StackPane layout is
1. StackPane()
2. StackPane(Node... Children)
Programming Example
Package myjavafxapplication;
TECHNICAL PUBLICATIONS® - an up-thrust for knowledge Object Oriented Programming 5-50 _ JavaFX Event Handling, Controls and Components
import javatx application. Application;
import javatx.scene.Scene;
import javafx.scene.control. Button;
import javafx.scene layout, StackPane;
import javafx.stage.Stage;
Public class MyJavaFXApplication extends Application {
@Override
Public void start(Stage primaryStage) {
StackPane root=new StackPane();
Button B1 = new Button("This button is with caption One");
Button B2 = new Button("Two is on its top"
Button B3 = new Button("Thres");
Scene scene=new Scene(root,100,150);
Output
Toot.getChildren().addAll(B1,B2,B3);
primaryStage.setScene(scene);
primaryStage.setTitle("StackPane Demo
primaryStage.show();
+
Public static void main(String|] args) {
launch(args);
}
GridPane places its nodes into a grid of rows and col
columns. GridPane is the most flexible built
lumns. Nodes may span multiple rows or
in layout pane.
The GridPane is given by
Buttont | Button2
Button3 | Button
Button | Buttons
Mies) Buttons |
TEGHNICAL PUBLICATIONS® an uptiust for knowodge
Fol
pa
BE
pu or
oriented Programming
jus methods used in GridPane are -
—
“oid add(Node child, int columnindes, int
ex)
rowlnd!
void add(Node child, int columnindes, int
Index, int colspan, int rowspan)
yoid addColumn(int columnlndex, Node.
hildren)
JavaFX Event Hanal
ling, Controls and Componey
Components
Danae ~
Adds a child to the gridpane at the specified
ccolumn,row position and spans,
‘This method is for placing the specified nodes
sequentially in a given column of the gridpane,
oid addRow(int rowIndex, Node... children)
‘This method is for placing the specified nodes
sequentially in a given row of the gridpane.
ObjectProperty alignmentProperty()
‘The alignment of of the grid within the gridpane's
width and height.
Pos getAlignment()
Gets the value of the property alignment.
void setHgap(double value)
Sets the value of the property hgap.
void setVgap(double value)
The constructor used for GridPane layout is
Sets the value of the property vgap
GridPane gridPane = new GridPane();
Following example shows the use of GridPane layout
Programming Example
package myjavafxapplication;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene layout.GridPane;
import javafx.stage.Stage;
public class MyJavaFXApplication extends Application {
@Override
public void start(Stage primaryStage) {
GridPane grid=new GridPane();
Button B1 = new Button("One’):
Button B2 = new Button("Two'};
Button B3 = new Button(‘Thres!);
Button B4 = new Button("Four’);
Button BS = new Button(‘Five’);
Button B6 = new Button(‘Six’);
TECHNICAL PUBLICA’ TIONS? -
apenas ese
‘an upthrust for knowledge Object Oriented Programming. JavaFX Event Handling, Controls and Components
grid.add(B1,0,0);
grid.ada(B2,1,0);
grid.add(B3,2,0);
grid. ada(B4,0,1);
gtid.add(BS, 1,1);
Output
grid.ada(B6,2,1);
‘Scene scene=new Scene(grid, 150,150); oe
{ One | Two | Three
primaryStage.setScene(scene);
primaryStage.setTitle("GridPane Deino"); T Four | Five | Six
primaryStage.show();
}
public static void main(String|] args) {
launch(args);
}
+
Menus
[zi] menu
+ In JavaFX we can create a menu using a Menu class.
= For using the Menu class in our JavaFX application we need to import
javafx.scene.control. Menu so that the methods associated with this class can be used in the
application.
* Menu is a popup menu that contains several menu items that are displayed when the user
clicks a menu. The user can select a menu item from the menu.
© Constructors for Menu class are
Menu() |[€reates an empty menu
Menu(String str) Creates a menu with string str as label.
Menu(String str,Node nd) Creates a menu with string str as label and nd as
graphics node.
Menu(String stz, Node nd,ltem...i) _ | Creates a menu with string str as label, nd as graphics
node and add given item to the list
TECHNICAL PUBLICATIONS® - an up-thrust for knowledge Object Oriented Programming
+ Commonly used Methods are
items of the
hide the menu
The menus to show within this Menabar
+ Constructors for MenuBar class are
MenuBar() Creates a new empty Menubar
MenuBar(Menu... m)
Menultem
+ A Menultem is a basic item that goes on a menu.
Creates a new menubar with given set of menus
* Following Fig. 5.6.1 shows the menu, menubar and menuitems.
71 JavaFX Menu Demo.
Open File | Menu
Save
| Exit
oe Menu items
Fig. 5.6.1 Representing amenu
—Feimat At PLBLEATIONS?- upto
a IST SiN Object Oriented Programming 5-54 ___ JavaFX Event Handling, Controls and Components
Steps for creating JavaFX application for creating Menu
Step 1: Create a Menu bar is the first step, MenuBar can be instantiated using new
MenuBar menuBar = new MenuBar();
Step 2: Now create the menu. The name of the menu is passed as an argument to the Menu
clas
Menu fileMenu = new Menu('File");
Create the menuitem. The name of the menu is passed as an argument to the
Step 3
Menultem class.
Menultem newltem = new Menultem("New');
Step 4: Add menu items to the menu using add or addAlll method
fileMenu.getItems().addAll(newltem, openFileltem,saveltem, exitItem);
Step 5: Add Menu to Menu Bar using add or addAll method.
menuBar.getMenus().addAll(fileMenu, editMenu, aboutMenu);
Programming Example
package application;
import javatx.application. Application;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control. MenuBar;
import javafx.scene.control. Menultem;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// Creating MenuBar
MenuBar menuBar = new MenuBar();
// Creating three menus
Menu fileMenu = new Menu('File");
Menu editMenu = new Menu("Edit");
Menu aboutMenu = new Menu("About");
// Creating Menultems for File menu
Menultem newltem = new Menultem("New");
‘Menultem openFileltem = new Menultem("Open File’
Menultem saveltem = new Menultem('Save");
Menultem exititem = new Menultem('Exit");
TECHNICAL PUBLICATIONS® . an up-thrust for knowledge
