openjfx(javaFX)完整学习指南(教程)

openjfx(javaFX)介绍

基于JavaSE8,openjfx由几个组件构成:图形引擎Prism,窗体引擎glass,媒体引擎和一个web引擎。
欢迎大家积极开心的加入讨论群,群号:608423839(二群),556722677(三群),689672017(四群)

特性

  • FXML是一种基于XML的声明式标记语言,用于描述JavaFX应用程序的用户界面。设计师可以在FXML中编码或者使用JavaFX Scene Builder来交互式地设计图形用户接口(GUI)。Scene Builder所生成的FXML标记可以与IDE对接,这样开发者可以添加业务逻辑。类似安卓界面开发。
  • 它是一个使用了WebKitHTML技术的Web组件,可用于在JavaFX应用程序中嵌入Web页面。在WebView中运行的JavaScript可以方便地调用JavaAPI,并且JavaAPI也可以调用WebView中的JavaScript。
  • 与Swing互操作:现有的Swing程序可以通过JavaFX的新特性升级,例如多媒体播放和Web 内容嵌入。在JavaFX8中加入了SwingNode类,它可以将Swing内容嵌入到JavaFX程序中。
  • 内置的UI控件和CSS:JavaFX提供了开发一个全功能应用程序所需的所有主要控件。这些组件可以使用标准的Web技术如CSS来进行装饰。在JavaFX8中,DatePicker和TreeView UI控件是可用的,并且可以使用标准的Web技术如CSS来进行美化。
  • Modena主题:在JavaFX8中,提供了新的Modena主题来替换原来的Caspian主题。不过在Application的start()方法中,可以通过加入setUserAgentStylesheet(STYLESHEET_CASPIAN)代码行来继续使用Caspian主题。(eguid原创文章,转载 请注明出处)
  • 3D图像处理能力:在JavaFX8中的3D图像处理API中加入了一些新的API,包括Shape3D (Box, Cylinder, MeshView和Sphere 子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。在本次发布中Camera类API也得到了更新。
  • Canvas API:Canvas API允许在由一个图形元素(node)组成的JavaFX场景(Scene)的一个区域中直接绘图。
  • Printing API:JavaFX 8中加入了print包并且提供了打印功能公共类。
  • Rich Text支持:JavaFX提供了更为强大的文本支持能力,包括双向文字(例如阿拉伯语)、复杂文字脚本,例如Thai、Hindu文字,并且支持多行、多种风格的文本节点。
  • 多点触摸:基于底层平台的功能JavaFX提供了对多点触摸的支持。
  • Hi-DPI支持:JavaFX 8现在支持Hi-DPI显示。
  • 图形渲染硬件加速:JavaFX图像均基于图形渲染流水线(Prism)。JavaFX提供更为平滑的图像并且在显卡或图像处理单元(Graphics processing unit,GPU)支持的情况下通过Prism来获得更快的渲染速度。如果GPU不支持对应的图形处理功能,则Prism会使用软件渲染方式来替代。
  • 高性能多媒体引擎:媒体流水线支持对Web媒体内容的播放。它提供了一个基于GStreamer多媒体框架的稳定、低延迟的多媒体处理框架。
  • 自包含的应用部署模型:自包含应用包具有应用所需的所有资源、包括一个Java和JavaFX运行时的私有拷贝。它们可作为操作系统原生安装包发布,并提供与原生应用相同的安装和运行体验。

架构

组件

  • javaFX基础(javaFX系列之launcher启动器:两种启动javaFX的方式及launch(args[])参数设置和获取)
  • 场景图(Scenen graph)
  • 图形系统(Graphics System)
  • Glass窗体工具包(Glass window toolkit)
  • 多媒体和图形(media and images)
  • web组件(web component)
  • css样式
  • UI控件(UI controls)
  • 布局(layout)
  • 视觉特效(visual effects)
  • javaFX线程模型结构分析

场景图

Scene gragh是应用的入口,他是一个层级结构的节点树,可以处理输入,也可以被渲染。
场景图中的一个元素被称为节点,每个节点都包含一个id,样式类和包围盒(bounding volume)。除了根节点外,场景图中所有节点都有一个父节点,0或多个字节带你,节点包含以下特性:

  • 效果(Effects),模糊和阴影
  • 不透明度(Opacity)
  • 变换(Transforms)
  • 事件处理器(Event handlers,鼠标、键盘和输入法)
  • 应用相关的状态(Application-specific state)
    和Swing与AWT不同的是,场景图还包含矩形、文本、空间、布局容易、图像和多媒体。
    javafx.scene api允许创建和定义各种内容,比如:
  • 节点(Nodes):形状(2d,3d)、图像、多媒体、内嵌web浏览器、文本、UI控件、图表、组和容器。
  • 状态(State):变换(节点定位和方向)、视觉效果、内容和其他视觉效果
  • 效果(Effects):可以改变场景图节点的外观,例如模糊、阴影和图像调整。

图形系统

图形系统支持2d和3d场景图,当系统中的硬件不支持时,将提供软件渲染(也就是cpu渲染)。

  • windows xp和vista上的directx 9
  • windows 7上的directx 11
  • mac、Linux、嵌入式设备上的OpenGL
  • 当硬件不支持时使用软件渲染(cpu渲染,内置在jre中)

Glass窗体工具包

Glass窗体工具包(Glass window toolkit)提供本地操作,例如:窗体、计时器、皮肤。它是JavaFX层与本地操作系统的平台无关层。它还负责管理事件队列,该事件队列与javaFX应用在同一个线程上。AWT中本地系统中的那部分代码运行在一个县城里,而Java部分运行在另外一个线程里,导致了很多问题,这些问题在javafx中得到了解决。

线程

javafx的程序和渲染线程是分开的,应用运行时会有两个或更多线程:

  • javafx应用程序线程(主线程,用于控制场景图,场景图只能由该线程来访问,所以嵌入swing会出现问题)
  • prism渲染线程(用于处理渲染工作,与事件调度独立,使得渲染可以与程序并行,在上一帧被系统渲染时,线程可以并行的处理下一帧)
  • 多媒体线程(在后台运行,使用javafx应用程序线程在场景图中同步最近的帧,像素调度线程)

线程调度结构(eguid 原创 文章,-转载-请注明出处)
线程1 --> 线程2 --> 主线程
prism渲染 --> 多媒体线程(调度线程) --> 窗体\场景图

脉冲(Pulse)

脉冲是一个异步事件,用于异步通知场景图何时使用prism来同步场景图上元素的状态,一个脉冲被限制最多60帧/秒(fps),并且会在场景图上运行动画时被触发,即使动画没有运行,如果场景图中的内容发生改变,也会使脉冲被调度。
例如一个button位置被改变,脉冲就会被调度。layout和css也会触发脉冲调度,系统在每个脉冲之上会自动进行一次css和布局处理,来降低对系统性能的影响,场景图中的某个改变会导致很多布局和css的更新,这些更新会影响系统性能,可以根据需要在脉冲之前触发布局。
Glass windowtoolkit负责使用高分辨率的本地计时器来执行脉冲事件。

多媒体和图像

可以通过javafx.scene.media API来访问多媒体功能,支持视频和音频。格式支持mp3,aiff,wav和flv视频。
多媒体组件由三个:

  • Meida对象-表示一个多媒体文件
  • MediaPlayer-用于播放文件
  • MediaView-用于显示内容

web组件

web组件(Web component)是一个基于webkit的Javafx ui空间,提供了一个web viewer,并通过api提供了完全的浏览功能,支持全部浏览器功能:

  • 渲染本地或这远程url的html内容
  • 支持历史记录、后退、前进导航
  • 内容重加载
  • 向web组件添加效果
  • 编辑html内容
  • 执行js脚本
  • 事件处理
    这个嵌入式的浏览器组件由以下类组成:
  • webEngine提供了基本的web页面浏览功能
  • webview封装了webEngine对象,并将html整合到应用场景之中,并提供属性和方法来增加效果、变换。它是Node类的一个扩展。
  • 支持Java和js的互相调用

css

javafx支持层叠样式表(css),其提供了在不修改程序代码的情况下自定义应用程序外观的能力。css可以被添加到任何场景图中的节点之上,且这个过程时异步的。也支持在运行时添加css到场景中,这使得动态改变应用程序外观变得可行。

注意(eguid 原创 文章,【转载】请注明出处)
javafx 的css时基于W3C CSS标准2.1版本,对3.0版本支持较少,只有少量的css3.0特性

UI控件

javafx UI控件可以通过javafx api来使用,这些控件通过场景图中的节点来构建。这些控件充分利用了javaFX平台丰富的视觉功能,并且支持多种操作系统。css可以对UI控件进行主题和风格控制。

布局

布局容器(Layout contaniner)或者面板(Pane)可以对javafx应用程序中的UI控件进行灵活、动态排布。
Layout api包含:

  • BorderPane类将其内容节点放到上、下、左、右、中各个区域中。
  • HBox类将其内容节点横向排成一列。
  • StackPane类将其内容节点摞在一起(可以用作游戏里的多层布局)
  • GridPane类按行列来布局内容节点,类似bootstrap
  • FlowPane类按内容行或列进行流式布局,当遇到横向或纵向的边界时自动进行换行或换列。
  • TilePane类将其内容放到统一大小的单元格中。
  • AnchorPane类可以创建锚节点,将控件停靠于布局的上下左右各边,也可以剧中停靠。
    可以通过嵌套使用各类布局来灵活布局结构。

2d和3d变换

在javafx场景图中每个节点都可以使用下面的Javafx.scene.tranform的类来进行x-y坐标系变换。

  • translate - 将一个节点的xyz坐标系从一个位置移动到另一个。
  • scale - 将一个节点在xyz总表系统根据缩放因子进行缩放。
  • shear - 旋转一个坐标轴,这样x,y轴就不再是垂直的了。节点坐标值会过根据制定的背书进行变换。
  • rotate - 根据scene中指定的一个支点对节点进行旋转。
  • affine - 执行从一个2d/3d坐标系到另外一个2d/3d坐标系的线性映射,同时保留线条的‘straight’和‘parallel’属性。这个类应与Translate、scale、rotate、shear变换使用,一般不要直接使用。

视觉效果

在场景图中开发富客户端界面,包括使用视觉效果来美化程序的外观。javafx的视觉效果主要基于像素的图像,因此他们需要先获取场景图中节点渲染成图像,再将视觉效果添加上去。
提供下面的类来提供一些常用的视觉效果:

  • drop shadow - 应用视觉效果后将为给定的内容渲染一个阴影。
  • reflection - 再真实的内容后面渲染一个反射倒影。
  • lighting - 模仿一个光源的照射效果,使一个平面的对象看起来更真实、具有3d效果。

测试使用

测试使用每个功能实际效果

节点

  • Node:所有场景图节点的抽象基础类。
  • Parent:所有分支节点的抽象基础类。(此类直接继承Node类)
  • Scene:场景图中所有内容的基本容器类。

场景节点(Scene)

场景是所有内容的基本容器(eguid原创文章,转载请注明出处)

  • 设置摄像机(Camera),用来设置可是范围
  • 填充颜色
  • 设置鼠标样式
  • 监听触摸、鼠标、键盘事件
  • 设置和获取当前场景参数
	Scene.setUserData(Object obj);
	Scene.getUserData();

你可能感兴趣的:(JavaFX开发教程)