The document presents a demo on JavaFX, discussing its importance in building rich internet applications and highlighting its features such as FXML support, a wide range of UI controls, and graphics capabilities. It outlines the structure of a JavaFX application, including the scene graph, stages, and nodes, and emphasizes the need for proper etiquette during sessions. Additionally, it covers the various components and controls available in JavaFX, including layout management and multimedia support.

1. Presented By: Mansi Babbar
Demo on JavaFX

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session timings, you
are requested not to join sessions
after a 5 minutes threshold post
the session start time.
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Mute
Please keep your window on mute
Avoid Disturbance
Avoid leaving your window
unmuted after asking a question

3. Agenda
01 What is JavaFX?
03 Features of JavaFX
04 JavaFX Application Structure
Why JavaFX?
02
05 Components of JavaFX
06 JavaFX by Example
07 Demo on JavaFX

4. What is JavaFX?

5. What is JavaFX?
● Library used to build Rich Internet Applications (RIA).
● Applications can run consistently across multiple platforms.
● Applications can run on various devices.
● Can develop GUI applications effectively with rich content.

6. Why JavaFX?

7. Need for JavaFX
● No need of using various libraries to add features such as Media, UI controls,
Web, 2D and 3D, etc. JavaFX includes all these features in a single library.
● Developers can access the existing features of Java libraries such as Swing.
● Compared to Swing, it provides a clear and clean architecture and features
many enhancements: styling, event management, transitions, scene graph, etc.
● Provides all the professional Java tooling required to debug, analyze, profile,
and log a client application.

8. Need for JavaFX
● Enables a simple app-like installation on the client side, without any
prerequisites.
● Provides a rich set of graphics and media APIs.
● Provides the possibility of developing up-to-date user interfaces with
animations, multitouch, etc. It also provides interfaces to combine graphics
animation and UI control.

9. Experiences with JavaFX
● Stability
● Standard control library
● Extensibility
● Third-party libraries
● Development process
● Performance
● Support

10. Features of JavaFX

11. Features of JavaFX
● Written in Java
● Support FXML
● Provides WebView
● Swing Interoperability
● Built-in UI controls
● CSS like Styling
● Swing Interoperability
● Integrated Graphics library
● Support Media
● Provides JavaScript Engine

12. JavaFX Application
Structure

13. JavaFX Application Structure

14. JavaFX Application Structure
1. To construct the UI:
a. Prepare a scene graph.
b. Construct a scene, with the root node of the scene graph.
c. Setup the stage with the constructed scene.

15. Stage

16. Stage
● A stage or window contains all the objects of a JavaFX application.
● It is represented by Stage class of the package javafx.stage.
● The primary stage is created by the platform itself.
● A stage has two parameters determining its position namely Width and Height.
● It is divided as Content Area and Decorations (Title Bar and Borders).
● There are five types of stages available −
○ Decorated
○ Undecorated
○ Transparent
○ Unified
○ Utility
● You have to call the show() method to display the contents of a stage.

17. Scene

18. Scene
● A scene represents the physical contents of a JavaFX application.
● It contains all the contents of a scene graph.
● The class Scene of the package javafx.scene represents the scene object.
● At an instance, the scene object is added to only one stage.
● Size of the scene can be specified by passing its dimensions (height and width)
along with the root node to its constructor.

19. Scene Graph

20. Scene Graph
● A scene graph is a tree-like data structure (hierarchical) representing the
contents of a scene.
● All visual components (controls, layouts etc.) are part of scene graph.
● Scene graph components must be attached to a scene to be displayed, and
that scene must be attached to a stage for the whole scene to be visible.
● The total object graph of all the controls, layouts etc. attached to a scene is
called the scene graph.

21. Nodes

22. Nodes
● A node is a visual/graphical object of a scene graph.
● All nodes are subclasses of a JavaFX class called javafx.scene.Node.
● A node may include −
○ Geometrical (Graphical) objects (2D and 3D).
○ UI Controls such as − Button, Checkbox, Choice Box, Text Area, etc.
○ Containers (Layout Panes) such as Border Pane, Grid Pane, Flow Pane, etc.
○ Media elements such as Audio, Video and Image Objects.

23. Type of Nodes
● Root Node − The first node of scene graph is known as the root node.
● Branch Node/Parent Node − Node with child nodes.
○ The abstract class named Parent of the package javafx.scene is the base class
of all the parent nodes.
○ Those parent nodes will be of the following types −
■ Group
■ Region
■ WebView
● Leaf Node − Node without child nodes.
○ For example - Rectangle, Ellipse, Box, ImageView, MediaView, etc.

24. Components of
JavaFX

25. Controls
● Provide some kind of control functionality inside a JavaFX application.
● For a control to be visible it must be attached to the scene graph of some
Scene object.
● Nested inside some JavaFX layout component that manages the layout of
controls relative to each other.
● Event handlers can be added to controls to perform some event when the
control is fired.

26. Controls
JavaFX contains the following controls:
● Accordion
● Button
● CheckBox
● ChoiceBox
● ColorPicker
● ComboBox
● DatePicker
● ListView
● Menu
● MenuBar
● PasswordField
● ProgressBar
● RadioButton
● Slider
● SplitMenuButton
● SplitPane
● TableView
● TabPane
● TextArea
● TextField
● TitledPane
● ToolBar
● TreeTableView
● TreeView
● Label
● Spinner
● ToggleButton

27. Layouts
● Components which contains other components inside them.
● Manages the layout of the components nested inside it.
● Called parent components because they contain child components.
● Layout components are subclasses of the JavaFX class javafx.scene.Parent.
● Must be attached to the scene graph of some Scene object to be visible.

28. Layout components
● BorderPane
● StackPane
● TilePane
● GridPane
● AnchorPane
● TextFlow
● JavaFX contains the following layout components:
● Group
● Region
● Pane
● HBox
● VBox
● FlowPane

29. Other Components of JAVAFX
● Charts
○ JavaFX comes with a set of built-in ready-to-use chart components to
avoid coding charts from scratch every time you need a basic chart.
● WebView
○ JavaFX contains a WebView component which is capable of showing web
pages (HTML5, CSS etc.).
● Audio
○ JavaFX contains features that makes it easy to play audio in JavaFX
applications. This is typically useful in games or educational applications.

30. Other Components of JAVAFX
● Video
○ JavaFX contains features that makes it easy to play video in JavaFX
applications. This is typically useful in streaming applications, games or
educational applications.
● 2D Graphics
○ JavaFX contains features that makes it easy to draw 2D graphics on the
screen.
● 3D Graphics
○ JavaFX contains features that makes it easy to draw 3D graphics on the
screen.

31. JavaFX by Example

32. JavaFX by Example
JavaFX is huge, with 36 packages. These are the commonly-used packages:
● javafx.application: JavaFX application
● javafx.stage: top-level container
● javafx.scene: scene and scene graph.
● javafx.scene.*: control, layout, shape, etc.
● javafx.event: event handling
● javafx.animation: animation

33. JavaFX by Example

34. JavaFX by Example
Step 1: Prepare a scene graph.

35. JavaFX by Example
Step 2: Construct a scene, with the root node of the scene graph.

36. JavaFX by Example
Step 3: Setup the stage with the constructed scene.

37. Demo on
JavaFX

38. Thank You !