JavaFX Session Agenda 1 Introduction RIA, JavaFX and why JavaFX 2 JavaFX Architecture and Framework 3 Getting Started with JavaFX 4 Examples for Layout, Control, FXML etc
Current day users expect web user experience to be a more than just browse/contribute textual information. Users expect web applications to be more spontaneous, fast and to incorporate most of the features available in the desktop application. Web applications User Interface are expected to be highly interactive. 2
All of the requirements discussed are full filled by the next generation applications, named Rich Internet Applications (RIAs). A Rich Internet Application (RIA) is a Web application that has most of the characteristics of desktop application software and typically rendered by way of a browser, browser plug-in, using JavaScript, or a virtual machine. Adobe Flash, JavaFX, and Microsoft Silver-light are currently the three most common RIA platforms. 3
JavaFX is a software platform for creating and delivering rich internet applications (RIAs) and the next step in evolution of Java as a rich client platform, designed to provide a lightweight, hardware-accelerated Java UI platform for enterprise business applications. JavaFX platform supports wide variety of devices/desktop computers and web browsers on Microsoft Windows, Linux, and Mac OSX. Evolution JavaFX Script, the scripting component of JavaFX, began life as a project by Chris Oliver called F3. Sun Microsystems first announced JavaFX at the Java One Worldwide Java Developer conference on May 2007. In May 2008 Sun Microsystems announced plans to deliver JavaFX for the browser and desktop by the third quarter of 2008, and JavaFX for mobile devices in the second quarter of 2009. 4
JavaFX 2.2 (Current version) JavaFX 2.0: This version was released on October 10, 2011 and the new features were: JavaFX 1.2/1.3 A new set of Java APIs. Java FX Script support was Beta support for dropped permanently. Linux and Solaris. Support for high performance Built-in controls lazy binding, binding and layout. JavaFX 1.1 expressions. CSS controls, JavaFX for mobile Built-in chart Dropping support for JavaFX development Mobile. widgets, JavaFX delivered on I/O management. Platform Specific JavaFX February 12, 2009. runtime. Performance improvements. Declarative Jayateerth Kanihal XML language called FXML. Linux support. Canvas New controls: Color Picker, Pagination. HTTP Live Streaming support Touch events and gestures. Image manipulation API. Native Packaging. 5
Why JavaFX. Java Platform Advantage 1 JavaFX platform is written in Java, Java developers can leverage their existing skills and tools to develop JavaFX applications. Productivity 2 Java is widely used across for developing applications and it s easy for experienced Java developers who can quickly become productive building JavaFX applications. Improved ROI 3 By leveraging Java technologies for both the server and the client platforms, the JavaFX platform minimizes the risk of investment by reducing the complexity of the business solutions. And reduces the development cost. Unified Platform 4 JavaFX platform provides developers with a development framework and runtime environment to create enterprise and business applications that run across multiple platforms that support Java. FXML 5 JavaFX 2.0 uses FXML a declarative markup language that is XML based and used for defining the user interface in a JavaFX application. It is not a compiled language and, hence, does not require you to recompile the code every time you make a change to the layout.
7
JavaFX Architecture JavaFX API s and Scene Graph Quantum Toolkit Prism Java 2D Glass Windowing Toolkit Open GL Media Engine Web Engine D3D Java Virtual Machine 8
JavaFX Architecture The JavaFX Scene Graph is the starting point for developing 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 and can have effects like blurs, shadows opacity, transforms, event handlers. JavaFX scene graph has the graphics primitives such as rectangles and text in addition to controls, layout containers, images and media. The JavaFX Scene API allow users to create and specify several types of content like Nodes (UI control, Shape, Image, Media,), State (Visual effects, transform) and Effects ().
JavaFX Architecture JavaFX Graphics System is an implementation layer beneath the JavaFX scene graph layer, supports both 2D and 3D scene graphs and provides software rendering when the graphics hardware on a system is insufficient to support hardware accelerated rendering. Java FX provides two graphics accelerated pipelines: Prism processes render jobs and can run on both hardware and software renderers, including 3D and mainly responsible for rasterization/rendering of JavaFX scenes. Prism handles the following renderer path:directx 9 on Windows XP and Windows Vista DirectX 11 on Windows 7 OpenGL on Mac, Linux, Embedded Java2D when hardware acceleration is not possible. Quantum Toolkit ties Prism and Glass Windowing Toolkit together and makes them available to the JavaFX layer and also handles threading rules related to rendering versus events handling.
JavaFX Architecture JavaFX Glass Windowing Toolkit is the lowest level framework for the JavaFX graphics stack mainly responsible for providing 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. Glass toolkit is responsible for managing the native operating system s event queue functionality to schedule thread usage contrary to the Abstract Window Toolkit (AWT), which manages its own event queue. Glass toolkit runs on the same thread as the JavaFX application. In AWT, the native half of AWT runs on one thread and the Java level runs on another thread.
JavaFX Architecture Media Engine component has been completely revamped for JavaFX 2.0 to increase stability, improve performance, and provide consistent behavior across platforms. JavaFX media functionality is available through the javafx.scene.media APIs. JavaFX supports both visual and audio media and handles 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. Embedded browser engine provides the users with a web viewer and full browsing functionality through its API. Web Engine component is based on Web-Kit which is being supporting HTML5, CSS, JavaScript, DOM, and SVG and composed of the following classes:web-engine provides basic web page browsing capability. Web-View encapsulates a Web-Engine object, incorporates HTML content into an application's scene, and provides fields and methods to apply effects and transformations. It is an extension of a Node class.
JavaFX Framework JavaFX Cascading Style Sheets (CSS) provides the ability to apply customized styling to the user interface of a JavaFX application without changing any of the application's source code. JavaFX CSS is based on W3C CSS version 2.1 specifications and can be used for UI control themes and skins. CSS can be applied to any node in the JavaFX scene graph and are applied to the nodes asynchronously and can also be easily assigned to the scene at runtime hence changing application's appearance dynamically. JavaFX UI Controls available through the JavaFX API are built by using nodes in the scene graph. They can take full advantage of the visually rich features of the JavaFX platform and are portable across different platforms. Layout containers/panes can be used to allow flexible and dynamic arrangements of the UI controls within a scene graph of a JavaFX application. The JavaFX Layout API includes the following container classes that automate common layout models: BorderPane lays out its content nodes in the top, bottom, right, left, or center region. HBox arranges its content nodes horizontally in a single row. VBox class arranges its content nodes vertically in a single column.
JavaFX Framework Layout containers/panes: StackPane places its content nodes in a back-to-front single stack. Grid Pane enables the developer to create a flexible grid of rows and columns in which to lay out content nodes. Flow Pane arranges its content nodes in either a horizontal or vertical flow, wrapping at the specified width (for horizontal) or height (for vertical) boundaries. Tile Pane places its content nodes in uniformly sized layout cells or tiles. Anchor Pane enables developers to create anchor nodes to the top, bottom, left side, or center of the layout. Different containers can be nested within a JavaFX application to achieve a desired layout structure. 2D/3D Transformations Each node in the JavaFX scene graph can be transformed in the X Y coordinate using javafx.scene.tranform classes like "translate", "scale", "shear". The coordinates of the node are shifted by the specified multipliers like "rotate" and "affine" Rotate a node about a specified pivot point of the scene.
JavaFX Framework The development of rich client interfaces in the JavaFX scene graph involves the use of Visual Effects or Effects to enhance the look of JavaFX applications in real time. The JavaFX Effects are primarily image pixel based hence take the set of nodes that are in the scene graph, render it as an image, and apply the specified effects to it. Some of the visual effects available in JavaFX include the use of the classes "Drop Shadow (Renders a shadow of a given content)", "Reflection(Renders a reflected version" and "Lighting (Simulates a light source)". 15
JavaFX Framework - Deployment JavaFX applications can be deployed on a desktop or in a browser in three different deployment modes 16
17
The first step in getting started with JavaFX is to download and install the Java SE 7 JDK, which includes the JavaFX runtime libraries and utilities. JavaFX Scene Builder provides a simple way to build the UI for your application and connect it to the application logic. Next create the framework by extending the JavaFX Framework Application class. The start() method sets up and shows the stage, which contains the UI for the application. Define the User Interface by staging the application interface with one or more scenes, which in turn contain the controls, shapes, and images that make up your user interface. Layout the User Interface controls by using the built-in layout panes to manage the size and position of the controls. Deploy the application by creating the appropriate deployment files like JNLP or HTML so that the users can run those. 18
19
JavaFX Properties and Binding Properties JavaFX property support is based on the well-known property model established by the JavaBeans component architecture. Binding API (High and Low Level) A binding observes its list of dependencies for changes, and then updates itself automatically after a change has been detected. High level API is the quickest and easiest way to begin using bindings in your own applications. It consists of two parts: the Fluent API, and the Bindings class. The Fluent API exposes methods on the various dependency objects, whereas the Bindings class provides static factory methods instead. Binding API defines a set of interfaces which allow objects to be notified when a value change or invalidation event takes place. The Observable and ObservableValue interfaces fire the change notifications, and the InvalidationListener and ChangeListener interfaces receive those fired events. The difference between the two is that ObservableValue wraps a value and fires its changes to any registered ChangeListener, whereas Observable fires its changes to any registered InvalidationListener. The JavaFX binding and property implementations all support lazy evaluation so that the values are not changed immediately. Low Level Binding API High-Level API is not enough to satisfy the application requirements then Low Level API's can be used and it's intended for developers who require more flexibility/better performance than the 20 one offered by High Level API.
Presented By 21