7

自分では解決できない小さな問題に直面しています。TextFieldとHTML-Editorを含むvBoxをBorderPaneに配置しようとしましたが、スペース全体が使用されていません。もう1つの問題は、ウィンドウを縮小すると、html-editorが左側のオプションウィンドウと重なることです。

ここに画像の説明を入力してください

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);
}
4

4 に答える 4

31

OK、ここでいくつか問題が発生しています。いくつかのアドバイスとサンプル ソリューションを提供して、それらに対処しようとします。

TextField と HTML-Editor を含む vBox を BorderPane に配置しようとしましたが、スペース全体が使用されません。

VBox.setVgrow(editor, Priority.ALWAYS)メソッドを使用して、HTMLEditor が VBox 内の余分なスペースを占有するようにする必要があります。また、使用可能な領域に合わせて拡張できるように、HTMLeditor の最大高さが制限されていないことを確認してください (例: ) editor.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE)。プロパティeditorBox.setFillWidth(true)のデフォルト値は であるため、呼び出しは冗長です。fillWidthtrue

しかし、それをすべて行ったとしても (2.2b13 の時点で) WebPane のサイズ設定にバグがあり、問題が発生します。内部的に、WebPane はツールバーと編集可能な WebView を含む GridPane として実装されます。デフォルトでは、WebView の優先サイズは 800x600 です。HtmlEditor コントロールは、WebView の GridPane 制約を設定せず、優先サイズを超えてサイズを変更できるようにします。

これを回避するには、アクティブなシーンに WebView を追加した、css ルックアップを介して WebView をルックアップし、GridPane 制約を手動で調整します。これを行うコードは次のとおりです。

stage.show();
...
WebView webview = (WebView) editor.lookup("WebView");
GridPane.setHgrow(webview, Priority.ALWAYS);
GridPane.setVgrow(webview, Priority.ALWAYS);

ウィンドウを縮小すると、html エディタが左のオプション ウィンドウと重なります。

BorderPane の中央ペインの最小幅設定を明示的に設定して、外側の端のペインからはみ出さないようにします。

editorBox.setMinSize(0, 0);

BorderPane のドキュメントに次のように記載されているため、これを行う必要があります。

BorderPane はデフォルトでそのコンテンツをクリップしません。そのため、子の最小サイズがそのスペース内に収まらない場合、子の境界が自身の境界の外に広がる可能性があります。


余談ですが、コード内のルックアップ呼び出しは疑わしいものです。通常、ノードが表示されたステージのアクティブなシーンに追加され、JavaFX システムがノードで CSS レイアウト パスを実行する機会が得られるまで、css ID でノードを検索することはできません。それ以外の場合、検索は単に null を返します。


JavaFX レイアウトの問題をデバッグするには、ScenicViewアプリケーションが非常に役立ちます。


これは、質問にリンクされている画像に似たレイアウトを生成する完全な例ですが、言及した問題はありません。

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();
  }
}
于 2012-06-26T22:26:03.707 に答える
0

私も同じような問題に直面していました。borderPane 内の私の anchorPane がいっぱいになりませんでした。prefSize に大きな数値を設定するとうまくいきました。そのため、境界ペインが大きくなると、その子にできるだけ多くのサイズを提供しようとします

anchorPane.setMinSize(25, 25);
anchorPane.setPrefSize(25000, 25000);
于 2019-06-01T12:34:57.407 に答える