Presented By: Mansi Babbar Demo on JavaFX
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
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
What is JavaFX?
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.
Why JavaFX?
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.
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.
Experiences with JavaFX ● Stability ● Standard control library ● Extensibility ● Third-party libraries ● Development process ● Performance ● Support
Features of JavaFX
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
JavaFX Application Structure
JavaFX Application Structure
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.
Stage
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.
Scene
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.
Scene Graph
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.
Nodes
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.
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.
Components of JavaFX
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.
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
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.
Layout components ● BorderPane ● StackPane ● TilePane ● GridPane ● AnchorPane ● TextFlow ● JavaFX contains the following layout components: ● Group ● Region ● Pane ● HBox ● VBox ● FlowPane
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.
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.
JavaFX by Example
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
JavaFX by Example
JavaFX by Example Step 1: Prepare a scene graph.
JavaFX by Example Step 2: Construct a scene, with the root node of the scene graph.
JavaFX by Example Step 3: Setup the stage with the constructed scene.
Demo on JavaFX
Thank You !

Demo on JavaFX

  • 1.
    Presented By: MansiBabbar Demo on JavaFX
  • 2.
    Lack of etiquetteand 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 isJavaFX? 03 Features of JavaFX 04 JavaFX Application Structure Why JavaFX? 02 05 Components of JavaFX 06 JavaFX by Example 07 Demo on JavaFX
  • 4.
  • 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.
  • 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.
  • 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.
  • 13.
  • 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.
  • 16.
    Stage ● A stageor 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.
  • 18.
    Scene ● A scenerepresents 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.
  • 20.
    Scene Graph ● Ascene 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.
  • 22.
    Nodes ● A nodeis 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.
  • 25.
    Controls ● Provide somekind 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 thefollowing 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 whichcontains 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 ofJAVAFX ● 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 ofJAVAFX ● 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.
  • 32.
    JavaFX by Example JavaFXis 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.
  • 34.
    JavaFX by Example Step1: Prepare a scene graph.
  • 35.
    JavaFX by Example Step2: Construct a scene, with the root node of the scene graph.
  • 36.
    JavaFX by Example Step3: Setup the stage with the constructed scene.
  • 37.
  • 38.