Unit 5
Unit 5
JAVAFX:
JavaFx is a set of graphics and media packages that enables developers to design, create,
test, debug and deploy rich client applications that operate consistently across diverse
platforms.
Components: stage, scene, node
Every Javafx application must be:
import javafx.application.Application;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
//…
}
public static void main(String args[])
{
launch(args);
}
}
LAYOUT:
Layout containers or panes can be used to allow for flexible and dynamic arrangements
of the UI controls within a scene graph of a javafx application. The javafx layout includes
• HBox
• VBox
• FlowPane
• GridPane
• BorderPane
• StackPane
HBox:
HBox layout panes arranges the node in a single row.
1
Properties:
• setAlignment(Double)
• setFillHeight(Double)
• setSpacing(Double)
Constructor:
1. new HBox(): create HBox layout with zero spacing
2. new HBox(Double spacing): create HBox layout with a spacing value
Program:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Button b=new Button("Button1");
Button b1=new Button("Button2");
Button b2=new Button("Button3");
Button b3=new Button("Button4");
Button b4=new Button("Button5");
Button b5=new Button("Button6");
Button b6=new Button("Button7");
HBox h=new HBox();
h.getChildren().addAll(b,b1,b2,b3,b4,b5,b6);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("layout");
primaryStage.show();
}
public static void main(String args[])
2
{
launch();
}
}
VBox:
VBox layout pane arranging the nodes in a single vertical column.
Properties:
• setAlignment(Double)
• setFillWidth(Double)
• setSpacing(Double)
Constructor:
1. new VBox(): creates layout with zero spacing
2. new VBox(Double spacing): creates layout with a spacing value of double type
3. new VBox(Double spacing, node children): creates a layout with the specifies spacing
among the specifies child nodes
4. new VBox(Node children): creates a layout with the specifies nodes having zero
spacing among them
Program:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
3
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Button b=new Button("Button1");
Button b1=new Button("Button2");
Button b2=new Button("Button3");
Button b3=new Button("Button4");
Button b4=new Button("Button5");
Button b5=new Button("Button6");
Button b6=new Button("Button7");
VBox h=new VBox();
h.getChildren().addAll(b,b1,b2,b3,b4,b5,b6);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("layout");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
4
FlowPane:
FlowPane layout organizes the node in a flow that are wrapped at the flowpanes boundary.
The FlowPane layout arranges the content nodes in either a horizontal or vertical wrapping at
the specifies width boundaries.
Constructor:
1. FlowPane()
2. FlowPane(double Hgap, double Vgap)
3. FlowPane(double Hgap, double Vgap, node children)
4. FlowPane(node…children)
5. FlowPane(Orientation orientation)
6. FlowPane(Orientation orientation, double Hgap, double Vgap)
7. FlowPane(Orientation orientation, double Hgap, double Vgap, node children)
8. FlowPane(Orientation orientation, node…children)
Program
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
5
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Button b=new Button("Button1");
Button b1=new Button("Button2");
Button b2=new Button("Button3");
Button b3=new Button("Button4");
Button b4=new Button("Button5");
Button b5=new Button("Button6");
Button b6=new Button("Button7");
FlowPane h=new FlowPane();
h.getChildren().addAll(b,b1,b2,b3,b4,b5,b6);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("layout");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
6
StackPane
The StackPane layout places all the nodes into a single stack where every new node gets placed
on the top of the previous node.
Constructor:
1. new StackPane()
2. new StackPane(node children)
Program
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Button b=new Button("javafx programming");
Button b1=new Button("click");
StackPane h=new StackPane();
h.getChildren().addAll(b,b1);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("layout");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
7
GridPane:
GridPane layout allows to add multiple nodes in multiple rows and columns.
Constructor
1. new GridPane(): create gridpane with zer hgap/Vgap
Program
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Button b=new Button("Button1");
Button b1=new Button("Button2");
Button b2=new Button("Button3");
Button b3=new Button("Button4");
8
Button b4=new Button("Button5");
GridPane h=new GridPane();
h.add(b,0,0);
h.add(b1,1,3);
h.add(b2,2,5);
h.add(b3,3,6);
h.add(b4,3,3);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("layout");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
h.setGridLinesVisible(true);
9
BorderPane:
BorderPane arranges the nodes at the left, right, centre, top and bottom of the screen.
Methods:
setRight(), setLeft(), setCenter(), setBottom(), setTop()
Constructor:
1. BorderPane(): create the empty layout
2. BorderPane(Node Center): create the layout with the center node
3. BorderPane(Node Center, Node Top, Node Right, Node Bottom, Node Left): create the
layout with all the nodes.
Program:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Button b=new Button("Button1");
Button b1=new Button("Button2");
Button b2=new Button("Button3");
Button b3=new Button("Button4");
10
Button b4=new Button("Button5");
BorderPane h=new BorderPane();
h.setTop(b);
h.setCenter(b1);
h.setBottom(b2);
h.setLeft(b3);
h.setRight(b4);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("layout");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
CONTROLS:
Javafx UI controls are the graphical elements that allow users to interact with an applicaltion
or a website.
Label
Label is a non editable text control. A label is useful for displaying text that is required to fit
within a specific space.
11
Constructor:
1. Label(): create an empty label
2. Label(String text): creates label with the supplied text
3. Label(String text, Node graphics): creates label with the supplied text and graphics
Program:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Label l=new Label("this is sample javafx programming");
HBox h=new HBox();
h.getChildren().add(l);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("controls");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
12
TextField:
Text field is basically used to get the input from the user in the form of text.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
TextField t=new TextField();
HBox h=new HBox();
h.getChildren().add(t);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("controls");
primaryStage.show();
}
public static void main(String args[])
{
13
launch();
}
}
Password field:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
PasswordField t=new PasswordField();
HBox h=new HBox();
h.getChildren().add(t);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("controls");
primaryStage.show();
}
public static void main(String args[])
{
14
launch();
}
}
Toggle Button:
A toggle button is a button that can be toggled or not toggled(selected/ not selected)
Constructor:
1. ToggleButton()
2. ToggleButton(String text)
3. ToggleButton(String text, node graphics)
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
ToggleGroup group=new ToggleGroup();
ToggleButton t=new ToggleButton("on");
ToggleButton t1=new ToggleButton("off");
t.setToggleGroup(group);
t1.setToggleGroup(group);
15
HBox h=new HBox();
h.getChildren().addAll(t,t1);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("controls");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
Radio Button:
The radio button is used to provide various options to the user. The user can only choose one
option among all.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
16
{
ToggleGroup group=new ToggleGroup();
RadioButton t=new RadioButton("male");
RadioButton t1=new RadioButton("Female");
t.setToggleGroup(group);
t1.setToggleGroup(group);
VBox h=new VBox();
h.getChildren().addAll(t,t1);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("radio button");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
CheckBox:
The check box is used to provide more than one choices to the user.
import javafx.application.Application;
import javafx.scene.Scene;
17
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Label l=new Label("programming languages");
CheckBox c1=new CheckBox("python");
CheckBox c2=new CheckBox("java");
CheckBox c3=new CheckBox("c");
CheckBox c4=new CheckBox("html");
CheckBox c5=new CheckBox("javascript");
CheckBox c6=new CheckBox("sql");
CheckBox c7=new CheckBox("reactjs");
VBox h=new VBox();
h.getChildren().addAll(l,c1,c2,c3,c4,c5,c6,c7);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("checkbox");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
18
ComboBox:
A javafx combo box control enables the user to select an option from a predefined list of
choices.
Constructor:
1. ComboBox()
2. ComboBox(ObservableList<T> items)
Program
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Label l=new Label("select the department");
ComboBox <String> c=new ComboBox <String>();
c.getItems().add("CSE");
c.getItems().add("EEE");
19
c.getItems().add("ECE");
c.getItems().add("MECH");
c.getItems().add("CIVIL");
c.getItems().add("IT");
c.getItems().add("AI&DS");
VBox h=new VBox();
h.getChildren().addAll(l,c);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("combobox");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
ListView:
The ListView is a graphical user interface component used for displaying a list of items from
which a user can select desired items.
Program
import javafx.application.Application;
20
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Label l=new Label("select the department");
ListView <String> c=new ListView <String>();
c.getItems().add("CSE");
c.getItems().add("EEE");
c.getItems().add("ECE");
c.getItems().add("MECH");
c.getItems().add("CIVIL");
c.getItems().add("IT");
c.getItems().add("AI&DS");
VBox h=new VBox();
h.getChildren().addAll(l,c);
Scene sc=new Scene(h,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("listview");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
21
ScrollPane:
ScrollPane is a control thst provides a scrollable viewport of its contents. It allows the user to
scroll the content vertically or horizontally by using scroll bars.
Program:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Label l=new Label("javafx is a set of graphics and media packages that enables developers to
design,create,test,debug and deploy rich client application that operate consisitently across
diverse platform");
ScrollPane s=new ScrollPane();
s.setPrefSize(350,350);
s.setContent(l);
VBox h=new VBox();
h.getChildren().add(s);
22
Scene sc=new Scene(h);
primaryStage.setScene(sc);
primaryStage.setTitle("scrollpane");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
Menus:
A menu in javafx is a pop up window that contains a list of items. User can select an item from
the menu to trigger an action.
23
Constructor:
1. Menu()
2. Menu(String s)
3. Menu(String s, Node n)
4. Menu(String s, node n, MenuItem…i)
Creating a MenuBar
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
MenuBar mb=new MenuBar();
Menu f=new Menu("File");
Menu e=new Menu("Edit");
Menu v=new Menu("View");
mb.getMenus().add(f);
mb.getMenus().add(e);
mb.getMenus().add(v);
HBox root=new HBox();
root.getChildren().add(mb);
Scene sc=new Scene(root,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("notepad");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
24
}
Creating a MenuItem
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
MenuBar mb=new MenuBar();
Menu f=new Menu("File");
Menu e=new Menu("Edit");
Menu v=new Menu("View");
mb.getMenus().add(f);
mb.getMenus().add(e);
mb.getMenus().add(v);
MenuItem m1=new MenuItem("New");
MenuItem m2=new MenuItem("New Window");
MenuItem m3=new MenuItem("Save");
MenuItem m4=new MenuItem("Open");
25
f.getItems().add(m1);
f.getItems().add(m2);
f.getItems().add(m3);
f.getItems().add(m4);
HBox root=new HBox();
root.getChildren().add(mb);
Scene sc=new Scene(root,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("notepad");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
26
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
MenuBar mb=new MenuBar();
Menu f=new Menu("File");
Menu v=new Menu("View");
mb.getMenus().add(f);
mb.getMenus().add(v);
MenuItem m1=new MenuItem("New");
Menu m2=new Menu("Edit");
MenuItem m3=new MenuItem("Save");
MenuItem m4=new MenuItem("Open");
f.getItems().add(m1);
f.getItems().add(m2);
f.getItems().add(m3);
f.getItems().add(m4);
MenuItem mi=new MenuItem("Copy");
MenuItem mi1=new MenuItem("Cut");
MenuItem mi2=new MenuItem("Paste");
m2.getItems().add(mi);
m2.getItems().add(mi1);
m2.getItems().add(mi2);
HBox root=new HBox();
root.getChildren().add(mb);
Scene sc=new Scene(root,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("notepad");
primaryStage.show();
27
}
public static void main(String args[])
{
launch();
}
}
28
Program:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.stage.Stage;
import java.io.*;
import javafx.event.*;
import javafx.scene.text.Text;
public class demo extends Application
{
public void start(Stage primaryStage)throws Exception
{
Text name = new Text("Name");
TextField nt = new TextField();
Text dob = new Text("Date of birth");
DatePicker date = new DatePicker();
Button bt=new Button("Register");
Label l=new Label();
bt.setOnAction(new EventHandler<ActionEvent>()
{
public void handle(ActionEvent event)
{
l.setText("THANK YOU FOR REGISTRATION!!!!!");
}
});
GridPane root=new GridPane();
root.add(name,0,0);
root.add(nt,1,0);
root.add(dob,0,1);
root.add(date,1,1);
root.add(bt,3,2);
root.add(l,5,4);
29
Scene sc=new Scene(root,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("notepad");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
30
Button bt=new Button("Register");
Label l=new Label();
bt.setOnAction(new EventHandler<ActionEvent>()
{
public void handle(ActionEvent event)
{
l.setText("THANK YOU FOR REGISTRATION!!!!!");
}
});
VBox root=new VBox();
root.getChildren().addAll(bt,l);
Scene sc=new Scene(root,600,600);
primaryStage.setScene(sc);
primaryStage.setTitle("notepad");
primaryStage.show();
}
public static void main(String args[])
{
launch();
}
}
31
Handling Key and Mouse Event:
Key Event
This is an input event that indicates the key stroke occurred on a node. It is represented by the
class named KeyEvent. This event includes actions like key presses, key released and key
typed.
When a key is typed on the keyboard, a key event is generated. Key event can be
handled by instances of various classes, both node and scene.
Three types of key events:
1. KEY_PRESSED
2. KEY_RELEASED
3. KEY_TYPED
Program:
import java.io.*;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.*;
import javafx.scene.*;
import javafx.scene.paint.Color;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import javafx.scene.image.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.*;
import javafx.geometry.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.control.Alert.*;
public class NewFXMain extends Application
{
public static void main(String[] args)
{
launch(args);
32
}
public void start(Stage mystage)throws Exception
{
mystage.setTitle("key event");
FlowPane root=new FlowPane(Orientation.VERTICAL,0,10);
root.setAlignment(Pos.CENTER);
Scene sc=new Scene(root,600,600);
mystage.setScene(sc);
Label prompt=new Label("press a key");
Label showkey=new Label("");
sc.setOnKeyTyped(new EventHandler<KeyEvent>()
{
public void handle(KeyEvent ke)
{
showkey.setText("you types:"+ke.getCharacter());
}
});
sc.setOnKeyPressed(new EventHandler<KeyEvent>()
{
public void handle(KeyEvent ke)
{
switch(ke.getCode())
{
case RIGHT:
showkey.setText("pressed right arrow");
break;
case LEFT:
showkey.setText("pressed left arrow");
break;
case SHIFT:
showkey.setText("pressed shift button");
break;
}
}
33
});
root.getChildren().addAll(prompt,showkey);
mystage.show();
}
}
Mouse Event:
This is an input event that occurs when a mouse is clicked. It is represented by the class named
MouseEvent. It included actions like mouse clicked, mouse pressed, mouse released, mouse
moved, mouse entered target, mouse exited target, etc.
Program:
import java.io.*;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.*;
import javafx.scene.*;
import javafx.scene.paint.Color;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import javafx.scene.image.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.*;
34
import javafx.geometry.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.control.Alert.*;
public class demo extends Application
{
public static void main(String[] args)
{
launch(args);
}
public void start(Stage mystage)throws Exception
{
mystage.setTitle("mouse event");
FlowPane root=new FlowPane(Orientation.VERTICAL,0,10);
root.setAlignment(Pos.CENTER);
Scene sc=new Scene(root,600,600);
mystage.setScene(sc);
Label showEvent =new Label("use the mouse");
Label showLocation=new Label("");
sc.setOnMouseClicked(new EventHandler<MouseEvent>()
{
public void handle(MouseEvent me)
{
int clickcount=me.getClickCount();
String time="time";
if(clickcount>1)time+='s';
switch(me.getButton())
{
case PRIMARY:
showEvent.setText("primary button clicked"+clickcount+""+time);
break;
case SECONDARY:
showEvent.setText("secondary button clicked"+clickcount+""+time);
break;
case MIDDLE:
35
showEvent.setText("middle button clicked"+clickcount+""+time);
break;
}
}
});
sc.setOnMouseMoved(new EventHandler<MouseEvent>()
{
public void handle(MouseEvent me)
{
showLocation.setText("mouse at"+me.getSceneX()+","+me.getSceneY());
}
});
root.getChildren().addAll(showEvent,showLocation);
mystage.show();
}
}
36