IntroductionToJavaFX.pdf

◙A Graphical User Interface (GUI) presents a user-friendly mechanism for interacting with an app. ◙A GUI (pronounced “GOO-ee”) gives an app a distinctive “look- and-feel.” ◙GUIs are built from GUI components—also called controls or widgets (short for window gadgets). ◙A GUI component is an objec...

◙A Graphical User Interface (GUI) presents a user-friendly mechanism for interacting with an app. ◙A GUI (pronounced “GOO-ee”) gives an app a distinctive “look- and-feel.” ◙GUIs are built from GUI components—also called controls or widgets (short for window gadgets). ◙A GUI component is an object with which the user interacts via the mouse, the keyboard or another form of input, such as touch and voice recognition. 2 ◙Java’s original GUI library was the Abstract Window Toolkit (AWT). AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects. ◙The AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing. ◙Swing was added to the platform in Java SE 1.2. Swing was the primary Java GUI technology, for several years. Swing will remain part of Java and is still widely used. ◙Swing is designed for developing desktop GUI applications. It is now replaced by a completely new GUI platform known as JavaFX. ◙JavaFX is Java’s GUI, graphics and multimedia API of the future. 3 ◙JavaFX is an open source Java-based framework for developing rich client applications. The JavaFX library is available as a public Java application programming interface (API). ◙JavaFX incorporates modern GUI technologies to enable developer to develop rich GUI applications. ◙JavaFX was originally developed by Chris Oliver at SeeBeyond, and it was called F3 (Form Follows Function). ◙F3 was a Java scripting language for easily developing GUI applications. It offered declarative syntax, static typing, type inference, data binding, animation, 2D graphics, and Swing components. 4 ◙SeeBeyond was bought by Sun Microsystems, and F3 was renamed JavaFX in 2007. ◙Sun Microsystems announced JavaFX in 2007 as a competitor to Adobe Flash and Microsoft Silverlight. ◙Oracle acquired Sun Microsystems in 2010. Oracle then open sourced JavaFX in 2013. ◙The first version of JavaFX (JavaFX 1.0 ) was released in the fourth quarter of 2008. ◙Prior to version 2.0, developers wrote JavaFX apps in JavaFX Script, which compiled to Java bytecode, allowing JavaFX apps to run on the Java Virtual Machine. 5 ◙Starting with version 2.0 in 2011, JavaFX was reimplemented as Java libraries that could be used directly in Java apps. ◙The version number jumped from 2.2 to 8.0. From Java 8, the version numbers of Java SE and JavaFX will be the same. ◙Starting with the release of Java SE 11, JavaFX no longer is part of the Java SE runtime library. ◙JavaFX is written in Java, which enables developer to take advantage of all Java features such as multithreading, generics, and lambda expressions. ◙Developers can use any Java IDE of their choice, such as intelliJ IDEA, NetBeans or Eclipse, to author, compile, run, debug, and package their JavaFX application. 6 ◙JavaFX supports data binding through its libraries. ◙JavaFX offers two ways to build a user interface (UI): using Java code and using FXML. ◘ FXML is an XML-based scriptable markup language to define a UI declaratively. ◘ The Gluon company provides a tool called Scene Builder, which is a visual editor for FXML. ◙JavaFX provides a rich set of multimedia support such as playing back audios and videos. ◙JavaFX allows developer to embed web content in their application. ◙JavaFX provides out-of-the-box support for applying effects and animations, which are important for developing gaming applications. 7 ◙JavaFX provides a multitouch support for touch-enabled devices such as tablets and smart phones. ◙JavaFX has a built-in 2D, 3D, animation support, and video and audio playback ◙Some of the benefits of JavaFX over Swing include: ◘ JavaFX is easier to use—it provides one API for client functionality, including GUI, graphics and multimedia (images, animation, audio and video). Swing is only for GUIs, so developer need to use other APIs for graphics and multimedia apps. ◘ With Swing, many IDEs provided GUI design tools for dragging and dropping components onto a layout; however, each IDE produced different code (such as different variable and method names). 8 ◘ JavaFX Scene Builder can be used standalone or integrated with many IDEs and it produces the same code regardless of the IDE. ◘ Though Swing components could be customized, JavaFX gives application developer complete control over a JavaFX GUI’s look-and- feel via Cascading Style Sheets (CSS)—the same technology used to style web pages. ◘ JavaFX has better threading support, which is important for getting the best application performance on today’s multi-core systems. ◘ JavaFX uses the GPU (Graphics Processing Unit) for hardware- accelerated rendering. 9 ◙JavaFX supports transformations for repositioning and reorienting JavaFX components, and animations for changing the properties of JavaFX components over time. These features can be used to make apps more intuitive and easier to use. ◙JavaFX provides multiple upgrade paths for enhancing existing GUIs—Swing GUI capabilities may be embedded into JavaFX apps via class SwingNode and JavaFX capabilities may be embedded into Swing apps via class JFXPanel. 10  ◙Figure-1 below illustrates the architectural components of the JavaFX platform. ◙Following slides describe each component and how the parts interconnect. Figure-1: JavaFX Architecture Diagram 11 ◙Below the JavaFX public APIs lies the JavaFX engine that runs the JavaFX application code. ◙JavaFX engine composed of a number of components to take advantage of the Java native libraries and the available hardware and software, that runs JavaFX application code 12 Understanding the JavaFX Architecture (3 of 10) ◙JavaFX platform is composed of subcomponents that include: ◘ A JavaFX high performance graphics engine, called Prism ◘ A small and efficient windowing system, called Glass ◘ A media engine, and ◘ A web engine. ◙Although these components are not exposed publicly, their descriptions can help developer to better understand what runs a JavaFX application. 13 ◙The JavaFX scene graph is the starting point for constructing a JavaFX application. It is a hierarchical tree of nodes that represents all of the visual elements of the application's user interface. It can handle input and can be rendered. ◙A single element in a scene graph is called a node. Each node has an ID, style class, and bounding volume. ◙With the exception of the root node of a scene graph, each node in a scene graph has a single parent and zero or more children. It can also have the following: ◘ Effects, such as blurs and shadows ◘ Opacity ◘ Transforms ◘ Event handlers (such as mouse, key and input method) ◘ An application-specific state 14 ◙JavaFX scene graph also includes the graphics primitives, such as rectangles and text, in addition to having controls, layout containers, images and media. ◙The scene graph simplifies working with User Interfaces, especially when rich User Interfaces, are used. ◙Animating various graphics in the scene graph can be accomplished quickly using the javafx.animation APIs, and declarative methods, such as XML doc, also work well. 15 ◙The top layer of the JavaFX architecture provides a complete set of Java public APIs that support rich client application development ◙These APIs provide unparalleled freedom and flexibility to construct rich client applications. ◙The JavaFX platform combines the best capabilities of the Java platform with comprehensive, immersive media functionality into an intuitive and comprehensive one-stop development environment. These Java APIs for JavaFX features: ◘ Allow the use of powerful Java features, such as generics, annotations, multithreading, and Lamda Expressions ◘ Make it easier for Web developers to use JavaFX from other JVM-based dynamic languages, such as Groovy and JavaScript ◘ Most of the JavaFX APIs have been ported directly to Java. Some APIs, such as Layout and Media, along with many other details, have been improved and simplified based on feedback received from users 16 ◙The JavaFX Graphics System is an implementation detail beneath the JavaFX scene graph layer. It supports both 2-D and 3-D scene graphs ◙It provides software rendering when the graphics hardware on a system is insufficient to support hardware accelerated rendering. ◙Two graphics accelerated pipelines are implemented on the JavaFX platform: ◙Prism processes render jobs. It can run on both hardware and software renderers, including 3-D. It is responsible for rasterization and rendering of JavaFX scenes. ◙Quantum Toolkit ties Prism and Glass Windowing Toolkit together and makes them available to the JavaFX layer above them in the stack. ◙ It also manages the threading rules related to rendering versus events handling 17 ◙The Glass Windowing Toolkit is the lowest level in the JavaFX graphics stack. Its main responsibility is to provide native operating services, such as managing the windows, timers, and surfaces ◙It serves as the platform-dependent layer that connects the JavaFX platform to the native operating system. ◙The Glass toolkit is also responsible for managing the event queue ◙Unlike the Abstract Window Toolkit (AWT), which manages its own event queue, the Glass toolkit uses the native operating system's event queue functionality to schedule thread usage. ◘ The Glass toolkit runs on the same thread as the JavaFX application. 18 ◙ JavaFX media functionality is available through the javafx.scene.media. ◙JavaFX supports both visual and audio media. Support is provided for MP3, AIFF, and WAV audio files and FLV video files ◙JavaFX media functionality is provided as three separate components: ◘ the Media object represents a media file, ◘ the MediaPlayer plays a media file, and ◘ a MediaView is a node that displays the media. ◙The Media Engine component has been designed with performance and stability in mind and provides consistent behavior across platforms. 19 ◙The Web component is a JavaFX UI control, based on Webkit, that provides a Web viewer and full browsing functionality through its API ◙This Web Engine component is based on WebKit, which is an open source web browser engine that supports HTML5, CSS, JavaScript, DOM, and SVG. ◙Web component enables developers to implement the following features in their Java applications: ◘ Render HTML content from local or remote URL ◘ Support history and provide Back and Forward navigation ◘ Reload the content ◘ Apply effects to the web component ◘ Edit the HTML content ◘ Execute JavaScript commands ◘ Handle events 20  ◙A JavaFX app window consists of several parts Figure-1: JavaFX app window parts 21 Controls: ◙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. Stage: ◙The window in which a JavaFX app’s GUI is displayed is known as the stage and is an instance of class Stage (package javafx.stage). Scene: ◙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 more). The scene is an instance of class Scene (package javafx.scene). 22 Nodes: ◙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 23 Layout Containers: ◙Nodes that have children are typically layout containers (For example Hbox, VBox and GridPane) that arrange their child nodes in the scene. ◙The nodes arranged in a layout container are a combination of controls and, in more complex GUIs, possibly other layout containers. Event Handler and Controller Class: ◙When the user interacts with a control, such as clicking a Button or typing text into a TextField, 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 24 ◙How to Install Java JDK 22 on Windows 10 Complete Guide https://www.youtube.com/watch?v=mwGqikr8N5s&t=3s ◙Download JavaFX 22.0.2 (LTS) Visit https://openjfx.io/) ◙How to Install IntelliJ 2023.2.2 for JavaFX 21 LTS with JDK 21, Scene Builder 20 on Windows 11 x64 https://www.youtube.com/watch?v=fBqoGAptvkI 25 ◙How to Install Java JDK 22 on Windows 10 Complete Guide https://www.youtube.com/watch?v=mwGqikr8N5s&t=3s ◙Download JavaFX 22.0.2 (LTS) Visit https://openjfx.io/) ◙How to Install Apache NetBeans 22 on Windows 10/11 | Step- by-Step Guide https://www.youtube.com/watch?v=-9rrNojWycw ◙How To Setup JavaFX 22 and JDK 22 on Netbeans IDE (NEW) https://www.youtube.com/watch?v=G8seLHAYT6k&t=5s 26