JavaFX学习笔记(二) 用JavaFX Scene Builder设计UI

安装并运行JavaFX Scene Builder，新建一个fxml。其主界面如下

　　最上边是菜单栏，

　　左中是控件库，

　　左下是当前设计的UI所包括的控件，这是一个树状结构，只有一个根节点，一般是个Pane，默认是个AnchorPane。

其实也可以改为其它Pane，具体可以参见控件中的containers。这些BorderPane具有类似swing的BorderLayout的布局。

关于layout,详见http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm#CHDGHCDG

　　中间是设计的界面预览

　　右边是属性、布局、代码模块

设计

　　设计主要是从左边拖运控件到中间的设计视图，一般用各种pane先设计框架，再放控件，当然，主要是按需求。设计其实很简单的，只要有swing的layout的相关知识，很容易理解这里的布局。

　　

 

一个简单的界面就设计出来了，接下来，保存文件，保存的目标文件是一个扩展名为.fxml的XML文档。

在Java程序中使用.fxml

public class T1 extends Application {

	@Override
	public void start(Stage primaryStage) throws IOException {

		Parent root = FXMLLoader.load(getClass().getResource("T1.fxml"));
		Scene scene = new Scene(root, 500, 500);

		primaryStage.setScene(scene);
		primaryStage.show();

	}

	public static void main(String[] args) {
		launch(args);
	}
}

如上述代码，直接run as ->  java application就可以了。运行效果如下。当然，也可以直接在avaFX Scene Builder中预览(ctrl+p),

注：上述效果图具有一些简单的背景，这在后面介绍

关于　.fxgraph　和 .fxml

　　两者都用来描述一个javaFX的UI，其中 .fxgraph是json格式， .fxml是XML格式，其实目的都一样，只是格式不一样。JavaFX Scene Builder的输出文件是.fxml，而fxgraph目前为止好像要自己编写，就像手工编写html脚本一样。

　　关于fxgraph可以参考：http://efxclipse.org/fxgraph.html