2012-06-26 26 views
7

Solo estoy enfrentando un pequeño problema que no puedo resolver solo. Intento colocar un vBox incluyendo un TextField y un HTML-Editor en mi BorderPane, pero no se usa el espacio completo. Otro problema es que si reduzco la ventana, el editor html se superpone con mi ventana de opción izquierda.JavaFX 2 BorderPane Use Full Space

enter image description here

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

Respuesta

29

OK, así que algunas cosas van mal aquí, voy a tratar de abordarlos ofrecen algunos consejos y una solución de muestra.

Intento colocar un vBox incluyendo un TextField y un HTML-Editor en mi BorderPane, pero no se usa el espacio completo.

Debe utilizar el método VBox.setVgrow(editor, Priority.ALWAYS) para que el HTMLEditor ocupe espacio adicional en el VBox. Además, asegúrese de que HTMLeditor tenga una altura máxima ilimitada para que pueda adaptarse al área disponible, por ejemplo editor.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE). Llamar a editorBox.setFillWidth(true) es redundante ya que el valor predeterminado para la propiedad fillWidth es true.

Pero incluso si hace todo eso, (a partir de 2.2b13) hay un error en el tamaño de WebPane que le causará problemas. Internamente, el WebPane se implementa como un GridPane que contiene la barra de herramientas y un WebView editable. Por defecto, WebView tiene un tamaño preferido de 800x600. El control HtmlEditor no establece las restricciones de GridPane para que WebView permita que se dimensione más allá de su tamaño preferido.

Para solucionar esto, puede buscar el WebView mediante una búsqueda css después de que se ha agregado a una escena activa y ajustar las restricciones de GridPane manualmente. Aquí hay un código para hacer esto:

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

que reducir la ventana, el html-editor se solapa con la ventana de mi opción de izquierda.

Establezca explícitamente la configuración de ancho mínimo para el panel central en su Borde de contorno para que no se desborde sobre los paneles de borde exterior.

editorBox.setMinSize(0, 0); 

que tiene que hacer esto porque los BorderPane documentation estados:

BorderPane no recorta su contenido de forma predeterminada, por lo que es posible que los límites infantiles pueden extenderse más allá de sus propios límites si min de un niño el tamaño evita que encaje en su espacio.


como un aparte las llamadas operaciones de búsqueda en el código son sospechosos. Normalmente no se pueden buscar nodos por css ID hasta que el nodo se haya agregado a una escena activa en una etapa visualizada y el sistema JavaFX haya tenido la oportunidad de ejecutar un pase de diseño CSS en el nodo; de lo contrario, la búsqueda devolverá nulo.


Para depurar problemas de diseño JavaFX, la aplicación ScenicView tiene un valor incalculable.


Aquí hay un ejemplo completo para generar un diseño similar a la imagen vinculada en su pregunta, pero sin los problemas que menciona.

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(); 
    } 
} 
+0

Gracias por la respuesta larga. Realmente estaba luchando con este problema y estoy agradecido de que haya invertido tanto esfuerzo en su respuesta. Mi comprensión de JAvaFX mejoró gracias a ti :) – Googles

+4

+1 por la sugerencia sobre el uso de ScenicView. Esa herramienta parece muy valiosa de hecho. – Axel

0
GridPane gridPane = (GridPane) editor.getChildrenUnmodifiable().get(0); 
    RowConstraints row1 = new RowConstraints(); 
    row1.setVgrow(Priority.NEVER); 
    RowConstraints row2 = new RowConstraints(); 
    row2.setVgrow(Priority.NEVER); 
    RowConstraints row3 = new RowConstraints(); 
    row3.setVgrow(Priority.ALWAYS); 
    gridPane.getRowConstraints().addAll(row1, row2, row3);