JavaFX可视化布局开垦工具,使用基础

fxml文件使用SceneBuilder打开报错

本资源由 伯乐在线 - UncleTim 整理

  怎么用Scene Builder 来配合编写一个程序?下面我们就以此来讨论一下。

图片 1

JavaFX Scene Builder提供了一个可视化布局环境,能让您快速设计用于JavaFX应用程序的用户界(UI),而无需编写任何代码。它允许图形界面(GUI)控件简单地被拖拽定位到一个JavaFX场景。当你建立用户界面布局时,FXML的布局代码将被自动生成。JavaFX Scene Builder提供了一个简单而直观的用户界面,可以帮助开发者、甚至非程序员快速建立一个连接GUI控件到应用程序逻辑的交互式应用原型。

(一)基础准备工作

解决方法:Window-->Preferences-->JavaFX-->browse 路径是可执行的JavaFX Scene Builder文件,例如:C:Program Files (x86)OracleJavaFX Scene Builder 2.0JavaFX Scene Builder 2.0.exe图片 2

 

  本人使用NetBeans与JavaFX Scene Builder协同编写。

图片 3

  对于NetBeans我们需要做的是如下步骤:文件-->新建项目-->JavaFX-->JavaFX FXML应用程序,然后单击下一步,如图:

目标人群

JavaFX Scene Builder的目标包括以下人群:

  • Java开发人员:可以迅速地构建客户端应用程序的界面布局,并分别开发应用程序逻辑。
  • 设计师:可以迅速地建立一个不需要事先写好任何应用程序代码的客户端应用程序界面布局。他们可以设计和预览界面布局,并定义其外观和样式。

图片 4

主要功能

JavaFX Scene Builder包括以下主要功能:

  • 拖拽方式的所见即所得GUI:不需要写任何源代码就能迅速地创建一个图形用户界面布局。你可以使用GUI控件库和内容面板来增加、合并和编辑JavaFX GUI控件到你的图形用户界面布局。
  • 与NetBeans IDE紧密集成:提供最佳的开发流程。
  • 可以很容易地和任何Java的IDE集成:它是一个独立的开发工具。
  • 自动生成FXML代码:当你构建和修改图形用户界面布局时,生成的FXML代码被存储在一个独立于应用程序样式代码和样式文件的单独文件中。
  • 实时编辑和预览功能:帮助你无需编译就能快速地可视化对图形用户界面布局所作的改变。这些功能有助于减小应用程序的开发时间。你也可以添加级联样式表(CSS)到你的图形用户界面布局并预览生成的外观。
  • 访问完整的JavaFX GUI控件库:要查看支持的JavaFX 8 GUI控件的完整列表,请在库面板搜索字段输入FX8。它包含TreeTableView、DataPicker和SwiingNode控件。
  • 添加自定义的GUI控件到库中:GUI控件库也可以是第三方JAR文件、FXML文件导入定制的GUI控件,也可以从层次结构或内容面板将其添加扩展。
  • 提供3D支持:包含3D对象的FXML文件可以在Scene Builder工具中被加载和保存。你可以通过Inspector面板来查看和编辑3D对象的属性(Material和Mesh属性还不支持)。你不能通过Scene Builder工具来创建新的3D对象。
  • 支持富文本:TextFlow是一个新的容器,已经被包含在GUI控件库中。你可以拖拽多个文本节点或其他类型的节点到TextFlow中。你也可以直接在容器中操作文本节点来重新排列它们。内联和属性编辑功能也可应用于每个文本节点。
  • 在Scene Builder2.0中已经提供了JavaFX Scene Builder套件:该套件是一组API,可以在大型应用或者Java IDE的面接中整合Scene Builder面板及其功能,比如NetBeans、Intellji和Eclipse。
  • 支持CSS:可以灵活地管理应用程序用户界面的外观和风格。
  • 提供Windows、Linux和Mac OS X操作系统的跨平台支持

  建立好工程文件后,我们可以看到工程下有三个文件,一个.FXML文件,两个.java文件,如图:

开发资源

  • 安装指南:JavaFX Scene Builder套件、Java IDE集成
  • 快速开始:使用Scene Builder构建一个JavaFX应用程序
  • 添加自定义GUI控件
  • JavaFX教程和文章

官方网站:
开源地址:

图片 5

  其中FXMLDocument.fxml为用户界面,我们可以通过JavaFX Scene Builder 进行编写,FXMLDocumentController.java为用户界面的控制器,通过这个文件我们可以通过java代码对fxml文件定义的控件进行控制。(在NetBeans中,如果我们有了fxml文件,可以通过鼠标右击-->生成控制器,来直接生成java的fxml的控制器),而JavaFXApplication11.java可以把界面展示出来。

 

(二)需要知道的一点知识

  (1)界面显示的关键

    在我们纯java代码中,我们通过将场景放入舞台中,然后显示即可,在我们这里原理也是一样的。在JavaFXApplication11.java中,我们有这样的一行代码:

Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

  这个是我们的关键,我们通过FXMLLoader.load()方法从资源文件FXMLDocument.fxml中加载层级对象,并赋值到名为root的变量。之后我们在把这个根节点放到场景中,这样我们的用户界面就可以实现出来了。

  (2)界面控制,响应交互的关键

    对于fxml文件,我们可以打开JavaFX Scene Builder 对我们的界面进行设计,同时设置fx:id、触发器、控制器,然后保存在NetBeans的工程中,再到NetBeans中右击fxml文件,重构或者是生成控制器(下面我们会详细讲)

 

(三)JavaFX Scene Builder 基本介绍

       首先,让我们来看看它的基本界面:

图片 6  

  然后,左边可以看到JavaFX控件列表和UI层结构,中间是可视化区域,设计的时候将控件从控件列表中拖动到可视化区域即可,右边是控件的属性,需要注意的属性栏包括Properties(属性)、Layout(布局)、Code(代码)一共三个部分,其中属性主要控制控件自身的大小、对齐方式、CSS样式的添加等,布局主要控制控件在面板上的对齐方式,位置等等的一些属性,而代码部分也是比较关键的一部分,下面我们将具体说明一下。

(四)使用Scene Builder时最关键的一步

  我们通过对界面的设计然后通过上面的知识已经可以把页面显示出来了,但是因为我们利用Scene Builder编写出来的FXML文件最终目的是为了和java代码一起用的,那么java如何来调用FXML文件里的控件呢?这里的关键就是上面提到的Code部分,先看下它长什么样:

图片 7

  我们通过对控件的fx:id部分进行命名,当我们在NetBeans进行生成控制器时就会生成相应的变量,这样我们就可以在控制器里对界面上的控件进行控制;而在下面的部分即触发器部分,同样我们对它进行命名,生成的触发器中会出现相应的和触发器对应的函数,我们同样可以进行编写相应的操作。

  另外,如图:

图片 8

  在整个界面的左边我们需要对Controller class进行命名,目的是为fxml文件指定控制器。

 

  通过上面的介绍相信我们可以基本的对NetBeans和JavaFX Scene Builder 进行操作,并且显示fxml界面和对其进行控制。我们下一节将实践一个具体的例子来示范。

本文由星彩网app下载发布于星彩网app下载,转载请注明出处:JavaFX可视化布局开垦工具,使用基础

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。