javaFX介绍

javafx是用于构建富互联网应用程序的java库。使用javaFX开发的应用程序可以在各种设备上运行，如台式计算机、手机、电脑、平板电脑等。
可以使用javaFX和基于JVM的技术，如java、groovy和jruby。

• javaFX的特性

• 程序界面的介绍

  
  
  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/