乐趣区

关于javafx:JavaFX学习笔记三-架构与图形系统

jiezi

概述

上图是阐明了 JavaFX 平台各个各个架构组件，咱们将简要形容每个组件的作用以及各个组件之间的分割。最上层是 Java FX 公开 API(给开发者应用的)Scene Graph。在 Java FX 公开 API 上面是运行 JavaFX 代码的引擎，这个引擎由 JavaFX 高性能图形引擎: Prism, 一个玲珑而又高巧的窗口零碎: Glass。一个多媒体引擎，一个 Web 引擎。只管这些组件对外部不看见，上面这些形容能够让你了解 JavaFX 利用是如何运行的。

Scene Graph (场景图)

  • The JavaFX scene graph, shown as part of the top layer in Figure 2-1, 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.

    JavaFX 场景图是上图的最上层，是构建 JavaFX 利用的终点，场景图的构造是一颗分层的结点树，所有应用程序用户界面的所有可视元素都在下面。它能够解决输出，并且能够渲染。

  • 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:

    场景图的单个元素咱们称之为结点，每个结点都有 ID、款式、边界体积。场景图中的元素除了根结点之外，每个结点都有一个父节点，一个或个子结点。

    • Effects, such as blurs and shadows

      ​ 视觉效果(如含糊和暗影)

    • Opacity

      透明度

    • Transforms

      ​ 变换

    • Event handlers (such as mouse, key and input method)

      ​ 事件处理(键鼠 输出)

    • An application-specific state

      应用程序的状态

  • Unlike in Swing and Abstract Window Toolkit (AWT), the JavaFX scene graph also includes the graphics primitives, such as rectangles and text, in addition to having controls, layout containers, images and media.

    与 Swing 和 AWT 不同，JavaFX 场景图蕴含根本的图形基元(如矩形、文本)。除此之外还有空间、布局容器，图像、多媒体，

  • For most uses, the scene graph simplifies working with UIs, especially when rich UIs 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.

​ 通常来说，场景图能够简化应用 UI 组件的工作，特地是当须要应用简单 UI 的时候。应用 Javafx.animation 的 APIS 和申明式办法 (XML) 能够疾速实现场景图的构建。

  • The javafx.scene API allows the creation and specification of several types of content, such as:

    javafx.scene API 容许创立和指定不同类型的内容，举例如下:

    • Nodes: Shapes (2-D and 3-D), images, media, embedded web browser, text, UI controls, charts, groups, and containers

      结点: 形态(2D 和 3D)、图像、媒体、嵌入式浏览器、文本、UI 图表、容器

    • State: Transforms (positioning and orientation of nodes), visual effects, and other visual state of the content

      变换(结点的地位、方向)，视觉效果和其余视觉状态

    • Effects: Simple objects that change the appearance of scene graph nodes, such as blurs, shadows, and color adjustment

      扭转场景图结点的简略对象，如含糊、暗影、色调调整。

  • Java Public APIs for JavaFX Features

    The top layer of the JavaFX architecture shown in Figure 2-1 provides a complete set of Java public APIs that support rich client application development. 架构图上最底层的局部提供了一组公开 APIs 反对客户端利用的开发。上面是 JavaFX 的个性:

    • Allow the use of powerful Java features, such as generics, annotations, multithreading, and Lamda Expressions (introduced in Java SE 8).

      ​ 能够用弱小的 Java 个性，比方泛型、注解、多线程、Lambda 表达式

    • Make it easier for Web developers to use JavaFX from other JVM-based dynamic languages, such as Groovy and JavaScript.

      其余应用基于 JVM 平台的语言 Groovy、JavaScript 开发者，把握 JavaFX 会更加容易。

    • Allow Java developers to use other system languages, such as Groovy, for writing large or complex JavaFX applications.

      容许 Java 开发者应用其余语言来构建大型、简单的 JavaFX 利用。

    • Allow the use of binding which includes support for the high performance lazy binding, binding expressions, bound sequence expressions, and partial bind reevaluation. Alternative languages (like Groovy) can use this binding library to introduce binding syntax similar to that of JavaFX Script. 反对绑定、高性能的提早绑定，绑定序列表达式、局部绑定从新刷新。其余语言像 Groovy 能够应用绑定库来实现和 JavaFX 相似的语法。

    • Extend the Java collections library to include observable lists and maps, which allow applications to wire user interfaces to data models, observe changes in those data models, and update the corresponding UI control accordingly.

      扩大了 Java 的汇合库，减少了一些响应式的 lists 和 maps。应用程序能够通过这些汇合和界面控件建设绑定，当汇合的数据产生扭转，与之绑定的界面结点会自动更新。

Graphics System(图形系统)

The JavaFX Graphics System, shown in blue in Figure 2-1, 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.

下面架构图中的蓝色局部是 JavaFX 的图形系统，反对 2D 和 3D 的场景图，当零碎硬件不反对硬件加速渲染时，会主动进行软件渲染。

Prism(棱镜)

Two graphics accelerated pipelines are implemented on the JavaFX platform:

JavaFX 实现了两种图形减速管道

  • 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. The following multiple render paths are possible based on the device being used:

    Prism 解决渲染工作，反对硬件和软件渲染，包含 3D。它负责 JavaFX 场景图的栅格化和渲染，在不同的设施，JavaFX 会唤起不同的渲染引擎

    • DirectX 9 on Windows XP and Windows Vista

      在 Windows XP and Windows Vista 应用 DirectX 9

    • DirectX 11 on Windows 7

    ​ 在 Windows7 上应用 应用 DirectX 11

    • OpenGL on Mac, Linux, Embedded

      Max 和 Linux 上唤起 OpenGL

    • Software rendering when hardware acceleration is not possible

      当没有硬件加速的时候，会应用软件渲染。

      The fully hardware accelerated path is used when possible, but when it is not available, the software render path is used because the software render path is already distributed in all of the Java Runtime Environments (JREs). This is particularly important when handling 3-D scenes. However, performance is better when the hardware render paths are used.

      如果能够尽可能应用硬件加速，然而当硬件加速不被反对，软件渲染就会被启用，因为软件渲染曾经集成在 JRE。当解决 3D 渲染，硬件加速性能会更好

  • 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.

​ 量子工具包将 Prism 和 Glass Windowing Toolkit 联合起来，并裸露接口给内部应用。并解决显示和事件处理之间的线程规定。

Glass Windowing Toolkit

The Glass Windowing Toolkit, shown in beige in the middle portion of Figure 2-1, 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.

Glass 是玻璃的意思，这里临时没想到什么好的翻译, Glass Windowing Toolkit 应用缩写 GWT 代表，GWT 在下面架构图中位于两头局部，在 JavaFX 的图形栈中属于底层。次要负责本机操作系统服务，比方治理窗口、定时器和显示。他连贯了 JavaFX 平台和操零碎。

The Glass Windowing 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. Also unlike AWT, the 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. This introduces a lot of issues, many of which are resolved in JavaFX by using the single JavaFX application thread approach.

GWT 还负责管理事件队列，但不像 AWT 本人做了一个事件队列一样，GWT 应用的是操作系统的事件队列来应用线程进行解决。和 AWT 不一样，GWT 和 JavaFX 在一个线程中执行。在 AWT 中则分为两个线程。这种设计存在很大的缺点。在 JavaFx 中应用单个线程来解决这些问题。

  • Threads

The system runs two or more of the following threads at any given time：

任何时候在 JavaFX 利用中至多沉闷着两个线程

  • JavaFX application thread: This is the primary thread used by JavaFX application developers. Any”live”scene, which is a scene that is part of a window, must be accessed from this thread. A scene graph can be created and manipulated in a background thread, but when its root node is attached to any live object in the scene, that scene graph must be accessed from the JavaFX application thread. This enables developers to create complex scene graphs on a background thread while keeping animations on ‘live’ scenes smooth and fast. The JavaFX application thread is a different thread from the Swing and AWT Event Dispatch Thread (EDT), so care must be taken when embedding JavaFX code into Swing applications.

    JavaFx 利用线程: 这是开发人员应用的次要线程。任何流动的场景 (窗口中的场景) 必须由这个线程拜访。场景图能够被后盾线程创立和操作，然而一旦将场景图的根结点附加到场景中的实时对象，就必须从 JavaFX 利用线程去执行。这有助于开发者人员创立简单的场景图，同时让处于显示的场景动画放弃晦涩和疾速。JavaFX 利用线程与 Swing 和 AWT 事件散发线程不同，因而将 JavaFX 代码嵌入到 Swing 应用程序中时，必须小心。

  • Prism render thread: This thread handles the rendering separately from the event dispatcher. It allows frame N to be rendered while frame N +1 is being processed. This ability to perform concurrent processing is a big advantage, especially on modern systems that have multiple processors. The Prism render thread may also have multiple threads that help off-load work that needs to be done in rendering.

​ 管道渲染线程与事件散发线程是两个线程，反对并发渲染，这种并发渲染能力是一个相当大的劣势，特地是在领有多处理器的古代计算机系统来说。

​ 管道渲染线程可能会有到个渲染线程，这些线程有助于分担渲染所需的工作。

  • Media thread: This thread runs in the background and synchronizes the latest frames through the scene graph by using the JavaFX application thread.

    多媒体线程，这个线程运行在后盾，通过应用 JavaFX 应用线程在场景图中同步最新的数据(帧)。

  • Pulse

A pulse is an event that indicates to the JavaFX scene graph that it is time to synchronize the state of the elements on the scene graph with Prism. A pulse is throttled at 60 frames per second (fps) maximum and is fired whenever animations are running on the scene graph. Even when animation is not running, a pulse is scheduled when something in the scene graph is changed. For example, if a position of a button isD changed, a pulse is scheduled.

pulse(脉冲)是一种 JavaFX 场景图的事件，当此事件触发就代表场景图须要 Prism 再次渲染。该事件的最高频率为每秒最高 60 帧，在场景图中运行动画时触发。即便没有运行动画，场景图中的某些内容也会触发脉冲，例如按钮的地位产生了扭转，则会触发脉冲事件。

When a pulse is fired, the state of the elements on the scene graph is synchronized down to the rendering layer. A pulse enables application developers a way to handle events asynchronously. This important feature allows the system to batch and execute events on the pulse.

脉冲被触发时，场景图上的元素状态将再次被渲染(或译为同步到渲染层)。脉冲为开发人员提供了一种异步处理事件的办法。咱们能够在脉冲上批处理和执行事件。

Layout and CSS are also tied to pulse events. Numerous changes in the scene graph could lead to multiple layout or CSS updates, which could seriously degrade performance. The system automatically performs a CSS and layout pass once per pulse to avoid performance degradation. Application developers can also manually trigger layout passes as needed to take measurements prior to a pulse.

The Glass Windowing Toolkit is responsible for executing the pulse events. It uses the high-resolution native timers to make the execution.

GWT 应用高解析定时器 (由操作系统) 来解决脉冲事件。这就意味着 JavaFX 能够在较短的工夫距离触发脉冲，从而使场景图上的动画晦涩且准确。

我其实感觉我的翻译是有问题，然而兴许是我没接触过 GUI 开发，这个词的确是存在的，具体的在微软的开发者文档有所提及，但我还是不大了解。

Media and Images

JavaFX media functionality is available through the javafx.scene.media APIs. 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.

JavaFX 的多媒体性能位于 javafx.scene.media 下。JavaFX 反对音频和视频。反对的视频格式有 MP3，AIFF，WAV 音频文件。FLV 视频文件。

JavaFX 提供了三种组件: Media 类代表媒体文件，MediaPlayer 负责播放多媒体文件。MediaView 是负责显示多媒体。

The Media Engine component, shown in green in Figure 2-1, has been designed with performance and stability in mind and provides consistent behavior across platforms. For more information, read theIncorporating Media Assets into JavaFX Applicationsdocument.

多媒体引擎组件是下面架构图中的绿色局部，高性能、稳定性强且跨平台。如果你想取得更多相干信息，参看 http://www.oracle.com/pls/top…

Web Component

The Web component is a JavaFX UI control, based on Webkit, that provides a Web viewer and full browsing functionality through its API.

Web 组件是一个基于 Webkit 的 JavaFx UI 控件, 通过 API 提供 Web 浏览器的性能。

This Web Engine component, shown in orange in Figure 2-1, is based on WebKit, which is an open source web browser engine that supports HTML5, CSS, JavaScript, DOM, and SVG. It enables developers to implement the following features in their Java applications:

Web 引擎组件是下面架构图的橘黄色局部，基于 WebKit，WebKit 是一个开源的 Web 浏览器引擎，反对 HTML5，CSS、JavaScript，DOM，SVG。可能让开发者享受以下个性。

  • Render HTML content from local or remote URL

​ 从本地或者 URL 中渲染 HTML 内容。

  • Support history and provide Back and Forward navigation

    反对历史记录并提供后退、后退导航。

  • Reload the content

    从新加载内容

  • Apply effects to the web component

​ 利用动效于 Web 组件。

  • Edit the HTML content

    编辑 HTML 内容

  • Execute JavaScript commands

​ 执行 JavaSceipt 命令

  • Handle events

    事件处理

This embedded browser component is composed of the following classes:

集成的浏览器组件在上面这些类里

  • WebEngine provides basic web page browsing capability.

​ WebEngin 提供根本的 web 页面浏览性能

  • WebView encapsulates a WebEngine 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.

​ WebView 封装了 WebEngine 对象，将 HTML 内容并入利用的场景图。并提供利用成果和转换字段和办法，扩大了 Node 类。

In addition, Java calls can be controlled through JavaScript and vice versa to allow developers to make the best of both environments. For more detailed overview of the JavaFX embedded browser, see the Adding HTML Content to JavaFX Applications document.

除此之外，Java 能够调用 JavaScript，JavaScript 也能够调用 Java。更多的的细节在 JavaFX Embedded brower。参看 Adding HTML Content to JavaFX Applications document. https://docs.oracle.com/javas…

  • CSS

JavaFX Cascading Style Sheets (CSS) provides the ability to apply customized styling to the user interface of a JavaFX application without changing any of that application’s source code.

JavaFX 能够应用 CSS 提供的能力定制用户界面，且不必批改任何利用的源代码。

CSS can be applied to any node in the JavaFX scene graph and are applied to the nodes asynchronously.

CSS 能够被利用于 JavaFX 场景图中的任何结点，反对异步利用。

JavaFX CSS styles can also be easily assigned to the scene at runtime, allowing an application’s appearance to dynamically change.

CSS 款式也能够在运行时利用，容许利用外观动静扭转。

Figure 2-2 demonstrates the application of two different CSS styles to the same set of UI controls.

上面的图在应用了两种不同的 CSS 款式在一组雷同的 UI 控件中。

Figure 2-2 CSS Style Sheet Sample

JavaFX CSS is based on the W3C CSS version 2.1 specifications, with some additions from current work on version 3. The JavaFX CSS support and extensions have been designed to allow JavaFX CSS style sheets to be parsed cleanly by any compliant CSS parser, even one that does not support JavaFX extensions.

JavaFX 的 CSS 基于 W3C CSS 2.1 版本，并从 CSS 3 版本增加了一些额定的内容。JavaFX CSS 提供了对规范 CSS 的扩大, 任何合乎 CSS 标准的解析器都能够解析这些扩大，即便这些解释器不反对 JavaFX 对 CSS 的扩大, 符合标准的 CSS 解析器也能解析。

This enables the mixing of CSS styles for JavaFX and for other purposes (such as for HTML pages) into a single style sheet. All JavaFX property names are prefixed with a vendor extension of”-fx-”, including those that might seem to be compatible with standard HTML CSS, because some JavaFX values have slightly different semantics.
咱们能够将 JavaFX 的 CSS 款式和嵌入网页的款式放入一个 CSS 文件中。所有 JavaFX 的 CSS 款式属性名都会带有一个 -fx- 前缀, 包含那些可能与规范 HTML、CSS 语义看起来雷同的属性，因为他们在 JavaFX 有不同的语义。(比方字体大小,Web 中用 font-size,JavaFX 用 -fx-font-size 来示意, 起因在于 JavaFX 中的字体大小和 Web 中略有不同)

For more detailed information about JavaFX CSS, see the Skinning JavaFX Applications with CSS document.
更多 JavaFX 相干的细节信息, 参看 Skinning JavaFX Applications with CSS document. 这份文档, 上面是地址。

https://docs.oracle.com/javas…

  • UI Controls

The 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. JavaFX CSS allows for theming and skinning of the UI controls.

JavaFX 的控件能够用 JavaFX API 的在场景图中应用 nodes 来构建。能够充分利用 JavaFx 平台的丰盛个性和跨平台。JavaFX CSS 目前能够对 UI 控件的皮肤和主题进行设置。上面是示例

Figure 2-3 shows some of the UI controls that are currently supported. These controls reside in the javafx.scene.control package
这些控件在 javafx.scene.control 这个包上面

Figure 2-3 JavaFX UI Controls Sample

Description of “Figure 2-3 JavaFX UI Controls Sample”

For more detailed information about all the available JavaFX UI controls, see the Using JavaFX UI Controls and the API documentation for the javafx.scene.control package.
更多对于 JavaFX UI 控件的信息参看 Using JavaFX UI Controls and the API documentation 这个章节
想要理解更多的 JavaFX UI 控件的信息，参看 Using JavaFX UI Controls(http://www.oracle.com/pls/top…)和 API 文档(https://docs.oracle.com/javas…)

  • Layout

Layout containers or panes can be used to allow for 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:
在 JavaFX 的场景图中, 布局容器和 pane(玻璃板, 感觉这么译不适合)能够灵便动静的调整 UI 控件。JavaFX 的布局 API 包含以下常见自动化容器布局模型，上面是对应的类

  • The BorderPane class lays out its content nodes in the top, bottom, right, left, or center region.
    边框窗格的布局分为上下左右和核心区域。
  • The HBox class arranges its content nodes horizontally in a single row.
    HBox 类将结点程度的放在一行。
  • The VBox class arranges its content nodes vertically in a single column.
    VBox 将结点垂直放在一列
  • The StackPane class places its content nodes in a back-to-front single stack.
    StackPane class 将结点从后往前放在它的堆栈中。
  • The GridPane class enables the developer to create a flexible grid of rows and columns in which to lay out content nodes.
    GridPane Clss 容许开发者在行和列中排放结点。
  • The FlowPane class arranges its content nodes in either a horizontal or vertical”flow,”wrapping at the specified width (for horizontal) or height (for vertical) boundaries.
    FlowPane class 将内容结点按程度或垂直方向流式排列，在指定的宽度或高度，内容结点达到边界后主动换行。
  • The TilePane class places its content nodes in uniformly sized layout cells or tiles
    TilePane Class 将内容结点放在大小雷同的单元格中。
  • The AnchorPane class enables developers to create anchor nodes to the top, bottom, left side, or center of the layout.
    AnchorPane class 能够让开发者在布局的上下左右创立锚结点。
    To achieve a desired layout structure, different containers can be nested within a JavaFX application.
    为了实现所需的布局构造，能够在 JavaFX 应用程序中嵌套不同的容器。
    To learn more about how to work with layouts, see the Working with Layouts in JavaFX article. For more information about the JavaFX layout API, see the API documentation for the javafx.scene.layout package.
    理解更多布局相干的信息, 能够参看 Working with Layouts in JavaFX。更多布局相干的 API, 参看 javafx.scene.layout 包的接口文档。
  • 2-D and 3-D Transformations

Each node in the JavaFX scene graph can be transformed in the x-y coordinate using the following javafx.scene.tranform classes:
JavaFX 场景图中每个结点都能够应用 javafx.scene.tranform 中的类进行在 x - y 坐标上进行变换。

  • translate – Move a node from one place to another along the x, y, z planes relative to its initial position.
    沿着 x,y,z 将一个结点从一个地位挪动到另一个地位
  • scale – Resize a node to appear either larger or smaller in the x, y, z planes, depending on the scaling factor.
    缩放, 依赖于缩放因子，在 x、y、z 上扭转结点的大小。
  • shear – Rotate one axis so that the x-axis and y-axis are no longer perpendicular. The coordinates of the node are shifted by the specified multipliers.
  • rotate – Rotate a node about a specified pivot point of the scene.
    在场景图对结点进行旋转。
  • affine – Perform a linear mapping from 2-D/3-D coordinates to other 2-D/3-D coordinates while preserving the ‘straight’ and ‘parallel’ properties of the lines. This class should be used with Translate, Scale, Rotate, or Shear transform classes instead of being used directly.
    仿射
    To learn more about working with transformations, see the Applying Transformations in JavaFX document. For more information about the javafx.scene.transform API classes, see the API documentation.
    了解更多变换的信息，参看 Applying Transformations in JavaFX document https://docs.oracle.com/javas…。这些变换的类都在 javafx.scene.transform 包上面，更多的参看 API documentation https://docs.oracle.com/javas…
  • Visual Effects 视觉效果

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.

在 JavaFX 的场景图中开发简单界面时，能够应用视觉效果来实时加强界面的显示成果。

The JavaFX Effects are primarily image pixel-based and, hence, they take the set of nodes that are in the scene graph, render it as an image, and apply the specified effects to it.

JavaFX 的成果次要是基于像素的，因而他们会将结点渲染为图片，而后将成果利用。

Some of the visual effects available in JavaFX include the use of the following classes:

JavaFX 当初可用的成果有以下类:

  • DropShadow – Renders a shadow of a given content behind the content to which the effect is applied

​ 在指定的内容前面渲染暗影

  • Reflection – Renders a reflected version of the content below the actual content.

    在理论内容结点上面造成倒影

  • Lighting Simulates a light source shining on a given content and can give a flat object a more realistic, three-dimensional appearance.

    模仿光源照耀指定内容能够让界面看起来更真切，更平面。

For examples on how to use some of the available visual effects, see the Creating Visual Effects document.

更多如何应用可视化成果的例子，参看 https://docs.oracle.com/javas…

For more information about all the available visual effects classes, see the API documentationfor the javafx.scene.effect package.

可视化的类都在 javafx.scene.effect 这个类外面，具体的阐明参看:https://docs.oracle.com/javas…

写在最初

很奇怪 JavaFX 的官网放教程为什么不把 oracle 写的教程放上去，尽管这份教程基于 JDK 8 和 JavaFX 8，然而配文示例都很具体，很适宜入门。这份用户文档笼罩了根本所有重要的概念, 以及开发人员次要关注的问题，比方打包。之前我对 Java 开发的桌面利用会有一个刻板的意识，开发实现打成 jar 包，那须要这个 jar 的人，必须装虚拟机，但其实能够用打包插件打成操作系统失败的包。

参考资料

[1] 高解析度计时器 https://learn.microsoft.com/z…

退出移动版