JavaFX 2 BorderPane使用全空间 [英] JavaFX 2 BorderPane Use Full Space
问题描述
我只是面对一个我自己无法解决的问题。
我尝试在我的BorderPane中放置一个包含TextField和HTML-Editor的vBox，但
不使用完整空间。另一个问题是，如果我收缩窗口，html编辑器
与我的左选项窗口重叠。
I´m just facing a little issue that I can´t solve by myself. I try to place a vBox including a TextField and a HTML-Editor in my BorderPane, but the full space is not used. Another problem is that if I shrink the window, the html-editor overlaps with my left option window.
private void initEditor()
{
editor = new HTMLEditor();
editor.setId("editor");
editor.lookup(".top-toolbar").setDisable(true);
editor.lookup(".top-toolbar").setManaged(false);
((ToolBar) editor.lookup(".bottom-toolbar")).getItems().addAll(FXCollections.observableArrayList(((ToolBar)editor.lookup(".top-toolbar")).getItems()));
editorBox = new VBox();
TextField field = new TextField();
field.setPrefHeight(36);
field.setId("editor-title");
editorBox.setFillWidth(true);
editorBox.getChildren().addAll(field, editor);
root.setCenter(editorBox);
}
推荐答案
好的，所以有几件事情在这里出错了，我会尝试解决它们提供一些建议和示例解决方案。
OK, so a few things going wrong here, I'll try to address them provide some advice and a sample solution.
我尝试放置一个包含TextField的vBox我的BorderPane中有一个HTML-Editor，但没有使用完整的空间。
I try to place a vBox including a TextField and a HTML-Editor in my BorderPane, but the full space is not used.
你需要使用 VBox.setVgrow（editor，Priority.ALWAYS）方法让HTMLEditor占用VBox中的任何额外空间。此外，请确保HTMLeditor具有无限制的最大高度，以便它可以增长到适合可用区域，例如 editor.setMaxSize（Double.MAX_VALUE，Double.MAX_VALUE） 。调用 editorBox.setFillWidth（true）是多余的，因为 fillWidth 属性的默认值为 true 。
You need to use the VBox.setVgrow(editor, Priority.ALWAYS) method to get the HTMLEditor to take up any extra space in the VBox. Also, make sure that the HTMLeditor has an unbounded max height so that it can grow to fit the available area, for example editor.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE). Calling editorBox.setFillWidth(true) is redundant as the default value for the fillWidth property is true.
但即使你做了所有这些，（截至2.2b13），WebPane大小调整中存在一个错误，会导致问题。在内部，WebPane实现为包含工具栏和可编辑WebView的GridPane。默认情况下，WebView的首选大小为800x600。 HtmlEditor控件不会为WebView设置GridPane约束，以允许它的大小超过其首选大小。
But even if you do all that, (as of 2.2b13) there is a bug in WebPane sizing which will cause you problems. Internally the WebPane is implemented as a GridPane containing the Toolbar and an editable WebView. By default, WebView has a preferred size of 800x600. The HtmlEditor control does not set the GridPane constraints for the WebView to allow it to be sized past it's preferred size.
要解决此问题，您可以通过以下方式查找WebView： 之后的CSS查找已添加到活动场景并手动调整GridPane约束。以下是一些代码：
To work around this, you can lookup the WebView via a css lookup after it has been added to an active Scene and adjust the GridPane constraints manually. Here is some code to do that:
stage.show();
...
WebView webview = (WebView) editor.lookup("WebView");
GridPane.setHgrow(webview, Priority.ALWAYS);
GridPane.setVgrow(webview, Priority.ALWAYS);
我收缩窗口，html-editor与我的左选项重叠窗口。
I shrink the window, the html-editor overlaps with my left option window.
明确设置BorderPane中心窗格的最小宽度设置，使其不会溢出外边缘Panes 。
Explicitly set the minimum width setting for the center pane in your BorderPane so that it won't overflow over the outer edge Panes.
editorBox.setMinSize(0, 0);
你需要这样做，因为 BorderPane文档声明：
You need to do this because the BorderPane documentation states:
BorderPane默认情况下不会剪切其内容，因此如果孩子的最小尺寸阻止它适合其空间，则儿童的边界可能会超出其自己的界限。
BorderPane does not clip its content by default, so it is possible that childrens' bounds may extend outside its own bounds if a child's min size prevents it from being fit within it space.
除此之外，代码中的查询调用是可疑的。通常，在将节点添加到显示的舞台上的活动场景中并且JavaFX系统有机会在节点上运行CSS布局传递之前，您无法通过css ID查找节点 - 否则查找将返回null。
As an aside the lookup calls in your code are suspicious. Normally you can't lookup nodes by css ID until the node has been added to an active scene on a displayed stage and the JavaFX system has had a chance to run a CSS layout pass on the node - otherwise the lookup will just return null.
为了调试JavaFX布局问题， ScenicView 应用程序非常宝贵。
For debugging JavaFX layout issues, the ScenicView application is invaluable.
这是一个完整的例子来生成一个布局类似于您问题中链接的图片，但没有您提到的问题。
Here is a complete example to generate a layout similar to the image linked in your question, but without the issues you mention.
import com.javafx.experiments.scenicview.ScenicView;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.web.*;
import javafx.stage.*;
public class HtmlEditorInBorderPane extends Application {
public static void main(String[] args) { launch(args); }
@Override public void start(final Stage stage) throws IOException {
// option pane.
VBox optionPane = new VBox(10);
MenuBar menuBar = new MenuBar();
menuBar.getMenus().addAll(new Menu("School"), new Menu("Social"), new Menu("Network"));
TreeItem<String> root = new TreeItem<>("Private Notes");
root.setExpanded(false);
root.getChildren().addAll(new TreeItem<>("Layout"), new TreeItem<>("is not"), new TreeItem<>("easy"));
TreeView<String> notes = new TreeView<>(root);
optionPane.getChildren().addAll(menuBar, new Label("Kaiser Notes"), notes);
optionPane.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;");
// editor pane.
HTMLEditor editor = new HTMLEditor();
VBox editorBox = new VBox(10);
TextField textField = new TextField();
editorBox.getChildren().addAll(textField, editor);
editorBox.setStyle("-fx-background-color: mistyrose; -fx-padding: 10;");
editor.setHtmlText(getSampleText());
// option layout constraints
VBox.setVgrow(notes, Priority.ALWAYS);
// editor layout constraints
textField.setMinHeight(Control.USE_PREF_SIZE); // stop the textfield from getting squashed when the scene is sized small.
VBox.setVgrow(editor, Priority.ALWAYS); // tells the editor to fill available vertical space.
editorBox.setMinSize(0, 0); // stops the editor from overflowing it's bounds in a BorderPane.
// layout the scene.
BorderPane layout = new BorderPane();
layout.setLeft(optionPane);
layout.setCenter(editorBox);
stage.setScene(new Scene(layout));
stage.show();
// addition of static layout grow constraints for the htmleditor embedded webview.
WebView webview = (WebView) editor.lookup("WebView");
GridPane.setHgrow(webview, Priority.ALWAYS); // allow the webview to grow beyond it's preferred width of 800.
GridPane.setVgrow(webview, Priority.ALWAYS); // allow the webview to grow beyond it's preferred height of 600.
}
// get some dummy lorem ipsum sample text.
private String getSampleText() throws IOException {
StringBuilder builder = new StringBuilder();
try (BufferedReader in = new BufferedReader(new InputStreamReader(new URL("http://www.lorem-ipsum-text.com/").openStream()))) {
String string;
while ((string = in.readLine()) != null) {
builder.append(string);
}
}
return builder.toString();
}
}
这篇关于JavaFX 2 BorderPane使用全空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
