利用JavaFx开发RIA桌面应用-布局说明

2017-01-13 15:00:19来源:csdn作者:loongshawn人点击

转载请注明来源-作者@loongshawn:http://blog.csdn.net/loongshawn/article/details/52878527

1.概要

JavaFX 带有自己的布局类,如图所示(来自 Amy Fowler 在 JavaOne 2011 的演示文稿),旨在便于对任何类型的平台和任何大小的场景进行用户界面布局,这些类位于 javafx.scene.layout 程序包中。

下图则对每种布局做了说明:

2.具体说明

本文仅对其中四个经常使用的布局作演示说明,分别是VBox、HBox、BorderPane、GridPane,当然要设计出比较优美的界面,仅仅靠这些完全不够,还需要大家自我修行,本文仅仅做一个初级的介绍,让大家对布局有一个视觉上的了解。

2.1 VBox

垂直布局,往布局中添加的控件依据添加顺序从上到下垂直排列。如下,往vbox中添加了3个标签。

VBox vBox = new VBox();Label label1 = new Label("测试1");
Label label2 = new Label("测试2");
Label label3 = new Label("测试3");vBox.getChildren().addAll(label1,label2,label3);

效果图:

2.2 HBox

水平布局,往布局中添加的控件依据添加顺序从左到右水平排列。如下,往hbox中添加了3个标签。

HBox hBox= new HBox();Label label1 = new Label("测试1");
Label label2 = new Label("测试2");
Label label3 = new Label("测试3");hBox.getChildren().addAll(label1,label2,label3);

效果图:

2.3 BorderPane

上中下左右经典布局,提供了5个方位的布局设置方式。如下,往borderPane中添加了5个标签。

BorderPane borderPane = new BorderPane();Label label1 = new Label("测试1-上");
Label label2 = new Label("测试2-中");
Label label3 = new Label("测试3-左");
Label label4 = new Label("测试4-右");
Label label5 = new Label("测试5-下");borderPane.setTop(label1);
borderPane.setCenter(label2);
borderPane.setLeft(label3);
borderPane.setRight(label4);
borderPane.setBottom(label5);

效果图:

2.4 GridPane

网格布局,可以让用户自由配置控件方位,可以设计出更美的界面。

GridPane grid = new GridPane();
grid.setVgap(10);
grid.setHgap(10);
grid.setPadding(new Insets(50,0,0,0));
//grid.setGridLinesVisible(true);
grid.setAlignment(Pos.CENTER);Text serverName = new Text(Constant.SERVER_NAME);
ComboBox serverNameInput = myStyleComboBox.getComboBox(1,1);
serverNameInput.setEditable(true);
serverNameInput.setMaxWidth(Double.MAX_VALUE);
grid.add(serverName,1,0,2,1);
grid.add(serverNameInput,3,0);
grid.setHgrow(serverNameInput,Priority.ALWAYS);Text userName = new Text(Constant.USER_NAME);
ComboBox userNameInput = myStyleComboBox.getComboBox(1,2);
userNameInput.setEditable(true);
userNameInput.setMaxWidth(Double.MAX_VALUE);
grid.add(userName,1,1,2,1);
grid.add(userNameInput,3,1);Text passWord = new Text(Constant.PASS_WORD);
PasswordField passWordInput = new PasswordField();
grid.add(passWord,1,2,2,1);
grid.add(passWordInput,3,2);Text databaseName = new Text(Constant.DATABASE);
ComboBox databaseNameInput = myStyleComboBox.getComboBox(1,3);
databaseNameInput.getEditor().setEditable(false);
databaseNameInput.setEditable(true);
databaseNameInput.setMaxWidth(Double.MAX_VALUE);
grid.add(databaseName,1,3,2,1);
grid.add(databaseNameInput,3,3);Text databaseConfig = new Text(Constant.DATABASE_CONFIG);
TextField databaseConfigInput = new TextField();
Button buttonOfDataPath = myStyleButton.getShadowButton(Constant.BROWSE, ImageUtil.getImageView("image/upload_file.png"));
buttonOfDataPath.getStyleClass().add("button-data");
grid.add(databaseConfig,1,4,2,1);
grid.add(databaseConfigInput,3,4);
grid.add(buttonOfDataPath,4,4);Text searchType = new Text(Constant.SEARCH_TYPE);
ToggleGroup toggleGroup = new ToggleGroup();
RadioButton radioButtonSingle = new RadioButton();
RadioButton radioButtonBatch = new RadioButton();
toggleGroup.getToggles().addAll(radioButtonSingle,radioButtonBatch);
radioButtonSingle.setText(Constant.SINGLE_SEARCH);
radioButtonBatch.setText(Constant.BATCH_SEARCH);
grid.add(searchType,1,5,2,1);
grid.add(radioButtonSingle,3,5);
grid.add(radioButtonBatch,3,6);
CheckBox remenberPassWord = new CheckBox();
Text remenberPassWordTitle = new Text(Constant.REMENBER_PASS_WORD);
grid.add(remenberPassWord,1,7);
grid.add(remenberPassWordTitle,2,7);

效果图:

各控件在网格中的分布:

相关文章:


《 利用JavaFx开发RIA桌面应用-TableView操作》
《 利用JavaFx开发RIA桌面应用-Clipboard剪贴板操作》
《利用JavaFx开发RIA桌面应用-TextField替换PasswordField做密码框》
《利用JavaFx开发RIA桌面应用-半透明界面设计》
《利用JavaFx开发RIA桌面应用-加载等待界面设计》
《利用JavaFx开发RIA桌面应用-文件拖拽》
《利用JavaFx开发RIA桌面应用-改变stage的标题栏的图标》
《利用JavaFx开发RIA桌面应用-事件监听》
《利用JavaFx开发RIA桌面应用-ComboBox组合编辑框水平增长》
《利用JavaFx开发RIA桌面应用-布局说明》
《利用JavaFx开发RIA桌面应用-在线资料》

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台