javaFX介绍
javafx是用于构建富互联网应用程序的java库。使用javaFX开发的应用程序可以在各种设备上运行，如台式计算机、手机、电脑、平板电脑等。
可以使用javaFX和基于JVM的技术，如java、groovy和jruby。
- javaFX的特性
| 功能 | 说明 |
|---|---|
| java语言编写 | javaFX库都是java编写的，可以用于JVM执行的语言。 |
| FXML | 一个类似声明式标记语言HTML，唯一目的是定义用户界面 |
| Scene Builder | 可单独或集成到IDE中，用户可访问拖放设计界面，用于开发FXML |
| Swing互操作性 | 可以使用Swing Node类嵌入Swing内容，同样可食用FX功能更新Swing |
| 内置UI控件 | 使用它可以开发一个全功能的应用程序 |
| 类似CSS的样式 | 提供类似样式CSS。 |
| 画布和打印API | 提供了Canvas，即时模式演示的渲染API。 |
| 丰富的API集合 | 提供了一组丰富的API来开发GUI应用程序，2D和3D图形 |
| 集成图形库 | 为2D和3D图形提供类 |
| 图形管道 | 支持硬件加速图形管道（Prism）的图形，当与图形卡或GPU使用时，提供平滑的图形，如果系统不支持图形卡，则棱镜默认渲染栈 |
-
程序界面的介绍
image.png
public final class ButtonDemo extends Application {
@Override
public void start(Stage stage) {
FlowPane main = new FlowPane();
main.getChildren().add(new Button("Java Button"));
..
StackPane pane = new StackPane();
pane.getChildren().add(main);
StackPane.setMargin(main, new Insets(100));
pane.setStyle("-fx-background-color:WHITE");
final Scene scene = new Scene(pane, 800, 200);
scene.getStylesheets().add(ButtonDemo.class.getResource("/css/jfoenix-components.css").toExternalForm());
stage.setTitle("JFX Button Demo");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
布局
介绍SDK中容器相关类，我们称之为面板。我们可以为每个界面元素设置位置和大小进行手动布局。然而，更简单的使用布局面板。比如行（行）、列（Column）、堆栈（Stack）、瓷砖（Tile）等。当窗口变化时，布局面板根据元素属性重新设置位置和大小。
边框面板（BorderPane）
划分5个区域，每个区域的大小是没有限制，区域不设置内容不显示。多应用经典菜单布局
多输出空间默认分配中间区域，不足根据设置先后顺序覆盖。
例，
BorderPane border =new BorderPane();
HBox hbox=addHBox();
border.setTop(hbox);
border.setLeft(addVBox());
addStackPane(hbox);
border.setCenter(addGridPane());
border.setRight(addFlowpane());
水平盒子（HBox）
将多个节点排列在一行中提供一个简单的方法。
设置内边距（padding）属性可以用于管理节点到HBox边缘的距离。设置间距（spcing）管理元素之间的距离。设置style可改变背景颜色。
public HBox addHBox(){
HBox hbox=new HBox();
hbox.setPadding(new Insets(15,12,15,12));
hbox.setSpacing(10);
hbox.setStyle("-fx-background-color:#336699;");
Button buttonCurrent=new Button("Current");
buttonCurrent.setPrefSize(100,20);
hbox.getChildren().add(buttonCurrent);
return hbox;
}
垂直盒子（VBox）
和HBox和相似，节点排成一列。
设置外边距（Marrgin）属性可以为单个空间周围增加额外的空间。
public VBox addVBox(){
VBox vbox=new VBox();
Hyperlink options[]=new Hyperlink[]{
new Hyperlink("sales"),
new Hyperlink("Marketing")
}
for(int i=0;i<2;i++){
VBox.setMargin(options[i],new Insets(0,0,0,8));
vbox.getChildren().add(options[i]);
}
return vbox;
}
堆栈面板（StackPane）
将所有节点放在一个堆栈中进行布局管理，后添加的覆盖之前的。
可以通过设置对齐属性（Alignment）来控制子节点在StackPane中的位置，会影响所有节点，设置外边距属性（Margin）可以控制在面板中单个子节点的位置。
public void addStackPane(Hbox hb){
StackPane stack=new StackPane();
Rectangle helpIcon=new Rectangle(30.0,25.0);
helpIcon.setFill(new LinearGradient(0,0,0,1,true,CycleMethod.NO_CYLE,
new Stop[]{
new Stop(0,Color.web("#4977A3")),
new Stop(0.5,Color.web("#B0C6DA")),
new Stop(1,Color.web("#D0E6FA")),}));
helpIcon.setStroke(Color.web("#D0E6FA"));
helpIcon.setArcHeight(3.5);
helpIcon.setArcWidth(3..5);
Text helpText=new Text("?");
stack.getChildren().addAll(helpIcon,helpText);
stack.setAlignment(Pos.CENTER_RIGHT);
StackPane.setMargin(helpText,new Insets(0,10,0,0));
hb.getChildren().add(stack);
HBox.setHgrow(stack,Priority.ALWAYS); //将HBox水平所有剩余空间都给stack
}
网格面板（GridPane）
可以创建基于行和列的网格放置节点。创建表单等其他基于行列组织的界面非常有用。
属性gridLinesVisible被用来显示网格线，调试时非常有用。设置间隙属性（Gap）用来管理行和列之间的距离。设置内边距属性（Padding）来管理节点元素与边缘之间的距离，设置垂直（Vertical）和水平（Horizontal）对齐属性（Alignment）能够控制单元格各空间的对齐方式。当窗口变化时，网格面板的节点会根据其自身的布局设置自动适应大小变化。
public GridPane addGridPane(){
GridPane grid =new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(0,10,0,10));
Text category=new Text("Sales:");
category.setFont(Font.font("Arial",FontWeight.BOLD,20));
grid.add(category,1,0);
...
ImageView imageChart =new ImageView(new Image(LayoutSample.class.getResourceAsStream("grid/1.png")));
grid.add(imageChart,1,2,2,1); //将饼图放在第三行，站第二和第三列
Text servicesPercent =new Text("Services\n20%");
GridPane.setValignment(servicePercent,Vpos.TOP);
grid.add(servicesPercent,3,2);
return grid;
}
流面板（Flowpane）
面板中包括的节点会连续的平铺防止，并且在边界处自动换行（列）。
设置间隙属性（Gap）用于管理行和列之间的距离，设置边距属性（Padding）用于管理节点元素边缘之间的距离。
public FlowPane addFlowPane(){
Flowpane flow = new FlowPane();
flow.setPadding(new Insets(5,0,5,0));
flow.setVgap(4);
flow.setHgap(4);
flow.setPrefWrapLength(170); // 预设FlowPane的宽度
flow.setStyle("-fx-background-color:DAE6F3;");
ImageView pages[] =new ImageView[8];
for(int i=0；i<8;i++){
pages[i]=new ImageView(new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+(i+1)+".png")));
flow.getChildren().add(pages[i]);
}
return flow;
}
瓷砖面板（TilePane）
和FlowPane很相似。将节点都放在一个网格中，其中网格大小一样的。
使用prefColumns 和prefRows属性可以设定TilePae的首选大小。设置间隙属性（Gap）用来管理行和列之间的间距。设置内边属性（padding）设置管理节点元素间的距离。
TilePane tile=new TilePane();
tile.setPadding(new Insets(5,0,5,0));
tile.setVgap(4);
tile.setHgap(4);
tile.setPrefColumns(2);
tile.setStyle("-fx-background-color:DAE6F3;");
ImageView pages[]=new ImageView[8];
for(int i=0;i<8;i++){
pages[i] =new ImageView(new Image(LayoutSample.class.getResourceAsStream("
grap/char_"+(i+1)+".png")));
tile.getChildren().add(pages[i]);
}
锚点面板（AnchorPane）
可以让节点锚定到面板的顶部、底部、左边、右边或者中间的位置。当窗体变化时，节点会保持与宝典之间的相对位置。一个节点可以锚定一个或多个位置，并个多个节点可以锚定同一个位置。
public AnchorPane addAnchorPane(GridPane grid){
AnchorPane anchorpane =new AnchorPane();
Button buttonSave =new Button("Save");
Button buttonCancel =new Button("Cancel");
HBox hb=new HBox();
hb.setPadding(new Insets(0,10,10,10));
hb.setSpacing(10);
hb.getChildren().add(grid,hb);
AnchorPane.setBottomAnchor(hb,8.0);
AnchorPane.setRightAnchor(hb,5.0);
AnchorPane.setTopAnchor(grid,10.0);
return anchorpane;
}
参考
- https://www.yiibai.com/javafx/javafx-tutorial-for-beginners.html
- https://o7planning.org/en/10627/javafx-flowpane-layout-tutorial
- http://www.javafxchina.net/blog/2015/06/doc05_buildinlayout/