This document provides an overview of GUI design using JavaFX. It begins with an introduction and outline, then discusses application development and GUI programming in Java using AWT, Swing, and JavaFX. It covers topics like components, containers, events, listeners, and layouts. The document also compares AWT, Swing and JavaFX, and provides examples of creating GUI components and handling events in JavaFX.

1. GUI Design using JavaFX
1

2. OUTLINE
 Introduction to GUI design
 Java AWT
 Java Swing
 JavaFX
 AWT vs Swing vs JavaFX
 Class Hierarchy
 Container
 Components
2

3. APPLICATION DEVELOPMENT
 Application Program
 Console based
 GUI (Graphical User Interface) based
3

4. GUI BASED PROGRAMMING IN JAVA
 GUI Is An Interface That Interacts With User And Source Code.
It Makes The Software User Friendly. So, Users Interact With
The Interface And That Interface Interacts With Source Code.
 GUI BASED PROGRAMMING IN JAVA
 Java Abstract Window Toolkit (AWT)
 Java Swing
 JavaFX

5. AWT: ABSTRACT WINDOWING TOOLKIT
 It’s an API used to develop GUI for windows-based applications in the
java programming language.
 AWT is platform dependent
 AWT components are heavyweight
 Java’s Abstract Window Toolkit provides classes and other tools for
building programs that have a graphical user interface.
 Syntax :
import java.awt.*;
5

6. SWING:
 It’s an API used to develop GUI for desktop-based
applications in the java programming language.
 SWING components are lightweight
 Are platform independent
 It follows MVC architecture
 Extends AWT
 Syntax :
import javax.swing.*
6

7. JAVAFX
 JavaFX a versatile cross OS and cross device application toolkit
 JavaFX comes with a rich set of GUI controls, and open source
toolkits
 JavaFX comes with a large set of built-in GUI components, like
buttons, text fields, tables, trees, menus, charts and much more.
 JavaFX can be styled via CSS and / or programmatically.
 JavaFX comes with a built-in chart library and supports 2D and 3D
graphics.
7

8. MVC ARCHITECTURE
 Model: Handles data and business logic.
 View: Presents the data to the user whenever asked for.
 Controller: It controls the data flow into a model object
and updates the view whenever data changes.
9

9. AWT VS SWING VS JAVAFX
CHARACTERISTIC AWT SWING JavaFX
DEPENDENCY
Platform Depen
dent
Platform
Independent
Platform
Independent
WEIGHT OF
COMPONENT
Heavyweight Lightweight Lightweight
CURRENTLY IN
USE
Discarded
Use It In A Few
Places.
Currently In Use
PLUGGABLE
Does Not Support
A Pluggable Look
And Feel
Support Pluggable
Look And Feel.
Components Look
The Same On All
Systems
Support Pluggable
Look And Feel.
Components Look
The Same On All
Systems.
10

10. AWT VS SWING VS JAVAFX
CHARACTERISTIC AWT SWING JavaFX
MVC
Does Not Follow
MVC
Follow MVC Follow MVC.
NO. OF
COMPONENTS
Less More Than AWT
More Than AWT
But Less Than
SWING.
PACKAGE Java.Awt.Package Javax.Swing Javafx.Util
RELEASED 1995 1997 2008
11

11. AWT CLASS HIERARCHY
12

12. AWT CLASS HIERARCHY (CONT..)
13
 Container
 The Container is a component in AWT that can contain another
components like buttons, textfields, labels etc. The classes that
extends Container class are known as container such as Frame,
Dialog and Panel.
 Window
 The window is the container that have no borders and menu bars.
You must use frame, dialog or another window for creating a
window.
 Panel
 The Panel is the container that doesn't contain title bar and menu
bars. It can have other components like button, textfield etc.
 Frame
 The Frame is the container that contain title bar and can have menu
bars. It can have other components like button, textfield etc.

13. SWING CLASS HIERARCHY
14

14. CREATING A GRAPHICAL USER INTERFACE
 GUI programming in Java is based on three
concepts:
 Components. A component is an object that the user can
see on the screen and in most cases interact with.
 Containers. A container is a component that can hold
other components.
 Events. An event is an action triggered by the user, such
as a key press or mouse click.
 Designing a graphical user interface involves
creating components, putting them into containers,
and arranging for the program to respond to events.
15

15. CREATING A GRAPHICAL USER INTERFACE
 Components are objects, so they’re created by
invoking a constructor.
 A button would be created by using a constructor
belonging to the Button class.
 The most commonly used constructor has one
argument (the button’s label):
Button b = new Button("Testing");
16

16. CREATING A GRAPHICAL USER INTERFACE
 For a component to be visible, it must be added to
a container (typically a frame) by the add method in
swing.
 To detect when an event occurs, a special “listener”
object can be attached to a component.
 When the user performs an action that involves the
component, a method belonging to the listener
object will be called automatically.
17

17. GUI COMPONENT API
 Java: GUI component = class
 Properties
 Methods

 Events

Button

18. USING A GUI COMPONENT
1. Create it
2. Configure it
3. Add children (if container)
4. Add to parent (if not JFrame)
5. Listen to it
order
important

19. USING A GUI COMPONENT
1. Create it
 Instantiate object:
Button b = new Button();
2. Configure it
 Methods: b.setText(“press me”);
3. Add it
 panel.add(b);
4. Listen to it
 Events: Listeners
Button

20. COMPONENTS OF AWT
 Frame
 Panel
 Button
 Label
 TextField
 TextArea
 Checkbox
 List
 Scrollbars
21

21. COMPONENTS OF SWING
 jFrame
 jPanel
 jButton
 jLabel
 jTextField
 jTextArea
 jCheckbox
 jComboBox
 jRadioButtons
22

22. COMPONENTS OF JAVAFX
 Button
 CheckBox
 ChoiceBox
 ComboBox
 Label
 ListView
 Menu
 MenuBar
 PasswordField
23
 RadioButton
 TableView
 TabPane
 TextArea
 TextField
 TitledPane
 ToggleButton
 ToolBar
 TreeTableView
 TreeView

23. COMPONENTS OF JAVAFX
24

24. RHS
–
SOC
GUI CONSTRUCTION
 In general, we have two options when constructing
a GUI
 Build it ”by hand” using Swing API
 Use the IDE like netbeans, eclipse, scene builder,
JavaFX
 Using the GUI Builder is usually much easier than
hand-coding the GUI

25. INTRODUCTION TO IDE
 An Integrated Development
Environment is a computer software
to help computer programmers develop
software.
 The Leaders:
- NetBeans
- Microsoft Visual Studio
- Eclipse

26. INTRODUCTION TO IDE- CONT.
 What does an IDE consist of:
- Source code Editor.
- Compiler and/or interpreter.
- Build- automation tools.
 Optional Tools:
- Debugger.
- Various tools to simplify the construction of a
GUI.

27.  JavaFX has 3 parts
 A GUI builder called SceneBuilder allows drag-
and-drop manipulation of widgets.
 A configuration language called FXML that
records the widgets in the GUI, their visible
attributes and their relationship to each other.
 A Controller class that must be completed by the
programmer to bring the GUI to life.
 A JavaFX application has some additional parts
 A set of classes to describe the model, which is what
the GUI allows the user to interact with.
 A set of cascading style sheets (CSS files) to further
specify “look-and-feel”.
JAVAFX PARTS

28. JAVAFX SCENE BUILDER
 JavaFX Scene Builder is a standalone JavaFX GUI
visual layout tool that can also be used with various
IDEs including eclipse, NetBeans and IntelliJ.
 JavaFX Scene Builder enables you to create GUIs
by dragging and dropping GUI components from
Scene Builder’s library onto a design area, then
modifying and styling the GUI—all without writing
any code.
 JavaFX Scene Builder generates FXML (FX
Markup Language)—an XML vocabulary for
defining and arranging JavaFX GUI controls without
writing any Java code.

29. JAVAFX SCENE BUILDER (CONT.)
 The FXML code is separate from the program logic
that’s defined in Java source code—this separation
of the interface (the GUI) from the implementation
(the Java code) makes it easier to debug, modify
and maintain JavaFX GUI apps.
 Placing GUI components in a window can be
tedious. Being able to do it dynamically using a
configuration file makes the job much easier.
 No additional compilation is needed unless actions
need to be programmed in the Controller.java class.

31. PANES, UI CONTROLS, AND SHAPES
32

32. JAVAFX APP WINDOW STRUCTURE (CONT.)
 The Stage is the window in which a JavaFX app’s
GUI is displayed
 It’s an instance of class Stage (package
javafx.stage).
 The Stage contains one active Scene that defines
the GUI as a scene graph—a tree data structure of
an app’s visual elements, such as GUI controls,
shapes, images, video, text and.
 The scene is an instance of class Scene (package
javafx.scene).
 Controls are GUI components, such as
 Labels that display text,
 TextFields that enable a program to receive user
input,
 Buttons that users click to initiate actions, and more.

33.  An application Window in JavaFX is known as a
Stage.
 package javafx.stage
 A Stage contains an active Scene which is set to a
Layout container.
 package javafx.scene
 The Scene may have other Layout containers for
organizing Controllers in a Tree organization.
 Nodes with children are layout containers.
 Nodes without children are widgets.
JAVAFX APPLICATION LAYOUT

34. JAVAFX APP WINDOW STRUCTURE (CONT.)
 Each visual element in the scene graph is a node—
an instance of a subclass of Node (package
javafx.scene), which defines common attributes
and behaviors for all nodes
 With the exception of the first node in the scene
graph—the root node—each node in the scene
graph has one parent.
 Nodes can have transforms (e.g., moving, rotating
and scaling), opacity (whether a node is
transparent, partially transparent or opaque),
effects (e.g., drop shadows, blurs, reflection and
lighting) and more.

35. JAVAFX CONTROLS
 Nodes with children are typically layout containers that
arrange their child nodes in the scene.
 Layout containers contain controls that accept inputs or other
layout containers.
 When the user interacts with a control, the control
generates an event.
 Programs can respond to these events—known as event
handling—to specify what should happen when each
user interaction occurs.
 An event handler is a method that responds to a user
interaction. An FXML GUI’s event handlers are defined in
a so-called controller class.

36. import javafx.application.Application; import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane; import
javafx.scene.control.Button;
public class ButtonInPane extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene StackPane pane =
new StackPane(); pane.getChildren().add(new Button("OK"));
Scene scene = new Scene(pane, 200, 50);
primaryStage.setTitle("Button in a pane"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
public static void main(String[] args) { launch(args);
}
}
37

37. DISPLAY A SHAPE
⚫Programming Coordinate Systems start from the left-
upper corner
38

38. LAYOUT PANES
⚫JavaFX provides many types of panes for
organizing nodes in a container.
39

39. (c) Paul Fodor and Pearson Inc.
SHAPES
JAVAFX PROVIDES MANY SHAPE CLASSES
FOR DRAWING TEXTS, LINES, CIRCLES,
RECTANGLES, ELLIPSES, ARCS, POLYGONS,
AND POLYLINES.
35
4
8

40. TEXT
36
4
9

41. FXML
⚫FXML is a declarative XML-based language
created by Oracle Corporation for defining the
user interface of a JavaFX 2.0 application.
⚫It can be edited and created using the JavaFX
Scene Builder 2 (downloaded separately from
J2SE)
⚫Create a new JavaFX project in Netbeans and
you will get 3 files: an FXML file with the UI
design, a main application .java file that loads
the FXML and a controller for the event
handlers for the UI Nodes.
59
5
9

42. FXML
DOCUMENT:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="200"
xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx/8"
fx:controller="javafxapplication1.FXMLDocumentController">
<children>
<FlowPane prefHeight="200.0" prefWidth="200.0">
<children>
<Label fx:id="label" minHeight="16" minWidth="69"
text="Welcome to FXML" />
</children>
</FlowPane>
</children>
</AnchorPane>
60
6
0

43. import javafx.application.Application; import javafx.stage.Stage;
import javafx.scene.Scene; import javafx.fxml.FXMLLoader; import
javafx.scene.Parent;
public class JavaFXApplication5 extends Application { @Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml")); Scene
scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) { launch(args);
}
}
import java.net.URL;
import java.util.ResourceBundle; import javafx.fxml.FXML;
import javafx.fxml.Initializable; import javafx.scene.control.Label;
public class FXMLDocumentController implements Initializable { @FXML
private Label label; @Override
public void initialize(URL url, ResourceBundle rb) {
}
1
}55
6
1

44. THE IMAGE AND IMAGEVIEW CLASSES
62

45. (c) Paul Fodor and Pearson Inc.
25
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene; import
javafx.scene.layout.Pane; import
javafx.scene.layout.HBox; import
javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.geometry.Insets;
public class ShowImage extends Application {
@Override
public void start(Stage primaryStage) {
// Create a pane to hold the image views Pane
pane = new HBox(10); pane.setPadding(new
Insets(5, 5, 5, 5)); Image image = new
Image("paul.jpg");
pane.getChildren().add(new ImageView(image));
ImageView imageView2 = new ImageView(image);
imageView2.setFitHeight(100);
imageView2.setFitWidth(100);
imageView2.setRotate(90);
pane.getChildren().add(imageView2);
Scene scene = new Scene(pane);
primaryStage.setTitle("ShowImage");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
6
3

46. JAVA’S EVENT HANDLING
⚫An eventsourceis aGUI control
⚫JavaFX:Button, ChoiceBox, ListView, etc.
http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/ui_controls.htm
⚫different types of sources:
⚫can detect different types of events
⚫can register different types of listeners(handlers)
64
6
4

47. JAVA’S EVENT HANDLING
⚫When the user interacts with a control
(source):
⚫an event object is constructed
⚫the event object is sent to all registered
listener objects
⚫the listener object (handler) responds as
you defined it to
65
6
5

48. EVENT LISTENERS (EVENT HANDLER)
⚫Defined byyou, the application
programmer
⚫you customize the response
⚫How?
⚫Inheritance &Polymorphism
⚫Y
ou define your own listener class
⚫implement the appropriate interface
⚫define responses in all necessarymethods
66
6
6

49. EVENT OBJECTS
⚫Contain information about the event
⚫Like what?
⚫location of mouse click
⚫event source that was interacted with
⚫etc.
⚫Listeners use them to properly respond
⚫different methods inside a listener object
can react differently to different types of
interactions
67
6
7

50. HANDLING GUI EVENTS
⚫Source object: button.
⚫An event is generated by external user actions such as mouse
movements, mouse clicks, or keystrokes.
⚫An event can be defined as a type of signal to the program
that something has happened.
⚫Listener object contains a method for processing the
event.
68

51. EVENT CLASSES
69

52. EVENT INFORMATION
⚫An event object contains whatever
properties are pertinent to the event:
⚫the source object of the event using the
getSource() instance method in the
EventObject class.
⚫The subclasses of EventObject deal with
special types of events, such as button
actions, window events, component events,
mouse movements, and keystrokes.
70

53. SELECTED USER ACTIONS AND
HANDLERS
71

54. NODES
⚫Input control nodes:
74
7
4

55. LABELED CLASS
⚫A label is a display area for a short text, a node, or both
⚫It is often used to label other controls (usually text fields)
⚫Labels and buttons share many common properties: these
common
properties are defined in the Labeled class
75
7
5

56. CLASS
76
7
6

57. import javafx.application.Application; import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay; import
javafx.scene.control.Label;
import javafx.scene.image.Image; import javafx.scene.image.ImageView; import
javafx.scene.layout.HBox; import javafx.scene.layout.StackPane; import
javafx.scene.paint.Color; import javafx.scene.shape.Circle; import
javafx.scene.shape.Rectangle; import javafx.scene.shape.Ellipse;
public class LabelWithGraphic extends Application {
@Override
public void start(Stage primaryStage) {
ImageView us = new ImageView(new Image("us.jpg")); Label lb1 = new
Label("USn50 States", us);
lb1.setStyle("-fx-border-color: green; -fx-border-width: 2");
lb1.setContentDisplay(ContentDisplay.BOTTOM);
lb1.setTextFill(Color.RED);
Label lb2 = new Label("Circle", new Circle(50, 50, 25));
lb2.setContentDisplay(ContentDisplay.TOP);
lb2.setTextFill(Color.ORANGE);
Label lb3 = new Label("Retangle", new Rectangle(10, 10, 50, 25));
lb3.setContentDisplay(ContentDisplay.RIGHT);
Label lb4 = new Label("Ellipse", new Ellipse(50, 50, 50, 25));
lb4.setContentDisplay(ContentDisplay.LEFT);
77
7
7

58. Ellipse ellipse = new Ellipse(50, 50, 50, 25);
ellipse.setStroke(Color.GREEN);
ellipse.setFill(Color.WHITE);
StackPane stackPane = new StackPane();
stackPane.getChildren().addAll(ellipse, new Label("JavaFX"));
Label lb5 = new Label("A pane inside a label", stackPane);
lb5.setContentDisplay(ContentDisplay.BOTTOM);
HBox pane = new HBox(20); pane.getChildren().addAll(lb1,
lb2, lb3, lb4, lb5);
Scene scene = new Scene(pane, 700, 150);
primaryStage.setTitle("LabelWithGraphic");
primaryStage.setScene(scene); primaryStage.show();
}
public static void main(String[] args) { launch(args);
}
}
78
7
8

59. (c) Paul Fodor and Pearson Inc.
BUTTONBASE AND BUTTON
⚫A button is a control that triggers an action event when
clicked.
⚫JavaFX provides regular buttons, toggle buttons, check box
buttons, and radio buttons.
⚫The common features of these buttons are defined in
ButtonBase and Labeled classes.
79
7
9

60. import javafx.application.Application; import javafx.stage.Stage;
import javafx.geometry.Pos; import javafx.scene.Scene;
import javafx.scene.control.Button; import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane; import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane; import javafx.scene.text.Text;
public class ButtonDemo extends Application { @Override
public void start(Stage primaryStage) {
Scene scene = new Scene(getPane(), 450, 200);
primaryStage.setTitle("ButtonDemo"); primaryStage.setScene(scene);
primaryStage.show();
}
protected Text text = new Text(50, 50, "JavaFX Programming");
protected BorderPane getPane() {
HBox paneForButtons = new HBox(20);
Button btLeft = new Button("Left", new ImageView("image/left.gif")); Button
btRight = new Button("Right", new ImageView("image/right.gif"));
paneForButtons.getChildren().addAll(btLeft, btRight);
paneForButtons.setAlignment(Pos.CENTER);
paneForButtons.setStyle("-fx-border-color: green"); BorderPane pane = new
BorderPane(); pane.setBottom(paneForButtons);
80
8
0

61. Pane paneForText = new Pane();
paneForText.getChildren().add(text);
pane.setCenter(paneForText);
btLeft.setOnAction(e -> text.setX(text.getX() - 10));
btRight.setOnAction(e -> text.setX(text.getX() + 10));
return pane;
}
public static void main(String[] args) {
launch(args);
}
}
81
8
1

62. (c) Paul Fodor and Pearson Inc.
CHECKBOX
⚫A CheckBox is used for the user to make a selection (square
box).
⚫CheckBox inherits all the properties from ButtonBase and
Labeled: onAction, text, graphic, alignment,
graphicTextGap, textFill, contentDisplay.
82
8
2

63. import javafx.event.ActionEvent; import
javafx.event.EventHandler; import javafx.geometry.Insets;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.BorderPane; import
javafx.scene.layout.VBox; import javafx.scene.text.Font;
import javafx.scene.text.FontPosture; import
javafx.scene.text.FontWeight;
public class CheckBoxDemo extends ButtonDemo {
@Override // Override the getPane() method in the super class
protected BorderPane getPane() {
BorderPane pane = super.getPane();
Font fontBoldItalic = Font.font("Times New Roman",
FontWeight.BOLD, FontPosture.ITALIC, 20);
Font fontBold = Font.font("Times New Roman", FontWeight.BOLD,
FontPosture.REGULAR, 20);
Font fontItalic = Font.font("Times New Roman",
FontWeight.NORMAL, FontPosture.ITALIC, 20);
Font fontNormal = Font.font("Times New Roman",
FontWeight.NORMAL, FontPosture.REGULAR, 20);
text.setFont(fontNormal);
VBox paneForCheckBoxes = new VBox(20);
paneForCheckBoxes.setPadding(new Insets(5, 5, 5, 5));
paneForCheckBoxes.setStyle("-fx-border-color: green");
83
8
3

64. CheckBox chkBold = new CheckBox("Bold"); CheckBox chkItalic =
new CheckBox("Italic");
paneForCheckBoxes.getChildren().addAll(chkBold, chkItalic);
pane.setRight(paneForCheckBoxes);
EventHandler<ActionEvent> handler = e -> {
if (chkBold.isSelected() && chkItalic.isSelected()) {
text.setFont(fontBoldItalic); // Both check boxes checked
} else if (chkBold.isSelected()) { text.setFont(fontBold); //
The Bold check box checked
} else if (chkItalic.isSelected()) { text.setFont(fontItalic);
// The Italic check box checked
} else {
text.setFont(fontNormal); // Both check boxes unchecked
}
};
chkBold.setOnAction(handler); chkItalic.setOnAction(handler);
return pane; // Return a new pane
}
// the start method is inherited from the superclass ButtonDemo
public static void main(String[] args) {
launch(args);
}
}
84
8
4

65. RADIOBUTTON
⚫Radio buttons allow to choose a single item from a group of
choices.
⚫Radio buttons display a circle that is either filled (if selected) or
blank (if not selected).
85
8
5

66. (c) Paul Fodor and Pearson Inc.
import static javafx.application.Application.launch; import
javafx.geometry.Insets;
import javafx.scene.control.RadioButton; import
javafx.scene.control.ToggleGroup; import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
public class RadioButtonDemo extends CheckBoxDemo {
@Override // Override the getPane() method in the super class protected
BorderPane getPane() {
BorderPane pane = super.getPane();
VBox paneForRadioButtons = new VBox(20);
paneForRadioButtons.setPadding(new Insets(5, 5, 5, 5));
paneForRadioButtons.setStyle("-fx-border-color: green"); RadioButton
rbRed = new RadioButton("Red");
RadioButton rbGreen = new RadioButton("Green"); RadioButton rbBlue = new
RadioButton("Blue");
paneForRadioButtons.getChildren().addAll(rbRed, rbGreen, rbBlue);
pane.setLeft(paneForRadioButtons);
ToggleGroup group = new ToggleGroup(); rbRed.setToggleGroup(group);
rbGreen.setToggleGroup(group); rbBlue.setToggleGroup(group);
rbRed.setOnAction(e -> {
if (rbRed.isSelected()) {
text.setFill(Color.RED);
}
});
116
8
6

67. rbGreen.setOnAction(e -> {
if (rbGreen.isSelected()) { text.setFill(Color.GREEN);
}
});
rbBlue.setOnAction(e -> {
if (rbBlue.isSelected()) { text.setFill(Color.BLUE);
}
});
return pane;
}
// the start method is inherited from the superclass
ButtonDemo public static void main(String[] args) {
launch(args);
}
}
87
8
7

68. TEXTFIELD
⚫A text field can be used to enter or display a
string.TextField is a subclass of TextInputControl.
88
8
8

69. (c) Paul Fodor and Pearson Inc.
import static javafx.application.Application.launch; import
javafx.geometry.Insets;
import javafx.geometry.Pos; import javafx.scene.control.Label;
import javafx.scene.control.TextField; import
javafx.scene.layout.BorderPane;
public class TextFieldDemo extends RadioButtonDemo{ @Override
protected BorderPane getPane() { BorderPane pane = super.getPane();
BorderPane paneForTextField = new BorderPane();
paneForTextField.setPadding(new Insets(5, 5, 5, 5));
paneForTextField.setStyle("-fx-border-color: green");
paneForTextField.setLeft(new Label("Enter a new message: "));
TextField tf = new TextField(); tf.setAlignment(Pos.BOTTOM_RIGHT);
paneForTextField.setCenter(tf); pane.setTop(paneForTextField);
tf.setOnAction(e -> text.setText(tf.getText())); return pane;
}
public static void main(String[] args) {
launch(args);
}
}119
8
9

70. TEXTAREA
⚫ATextAreaenables the user to enter multiple lines of text.
90
9
0

71. COMBOBOX
⚫A combo box, also known as a choice list or drop-down list,
contains a list of items from which the user can choose.
91
9
1

72. LISTVIEW
⚫A list view is a component that performs basically
the same function as a combo box, but it enables the
user to choose a single value or multiple values.
92
9
2

73. (c) Paul Fodor and Pearson Inc.
import javafx.application.Application; import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ListView; import javafx.scene.control.ScrollPane;
import javafx.scene.control.SelectionMode; import
javafx.scene.image.ImageView; import javafx.scene.layout.BorderPane; import
javafx.scene.layout.FlowPane; import javafx.collections.FXCollections;
public class ListViewDemo extends Application {
// Declare an array of Strings for flag titles
private String[] flagTitles = {"United States of America", "Canada", "China",
"Denmark", "France", "Germany", "India"};
// Declare an ImageView array for the national flags private ImageView[]
ImageViews = {
new ImageView("image/us.gif"), new ImageView("image/ca.gif"), new
ImageView("image/china.gif"),
new ImageView("image/denmark.gif"),
new ImageView("image/fr.gif"),
new ImageView("image/germany.gif"), new ImageView("image/india.gif")
};
@Override
public void start(Stage primaryStage) {
ListView<String> lv = new ListView<>(FXCollections
.observableArrayList(flagTitles));
123 lv.setPrefSize(400, 400);
9
3

74. lv.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
// Create a pane to hold image views FlowPane imagePane = new
FlowPane(10, 10); BorderPane pane = new BorderPane();
pane.setLeft(new ScrollPane(lv)); pane.setCenter(imagePane);
lv.getSelectionModel().selectedItemProperty().addListener( ov ->
{
imagePane.getChildren().clear();
for (Integer i: lv.getSelectionModel().getSelectedIndices()) {
imagePane.getChildren().add(ImageViews[i]);
}
});
Scene scene = new Scene(pane, 450, 170);
primaryStage.setTitle("ListViewDemo");
primaryStage.setScene(scene); primaryStage.show();
}
public static void main(String[] args) { launch(args);
}
}
94
9
4

75. Thank You
95