Кнопка размещения поверх webView в GridPane

Question

Я хочу создать кнопку обновления для моего веб-браузера, которая будет находиться поверх представления (даже если она скрывает часть представления), когда я помещаю кнопку на панели грида, это толкает webView вниз или в сторону (зависит от того, где я помещаю кнопку)

Как я могу поместить мою кнопку «Обновить» поверх WebView, а не отложить ее?

import java.util.List; 
import javafx.application.Application; 
import javafx.event.ActionEvent; 
import javafx.event.EventHandler; 
import javafx.geometry.HPos; 
import javafx.geometry.Insets; 
import javafx.geometry.VPos; 
import javafx.scene.Node; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.ColumnConstraints; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.Pane; 
import javafx.scene.layout.Priority; 
import javafx.scene.layout.VBox; 
import javafx.scene.web.WebEngine; 
import javafx.scene.web.WebView; 
import javafx.stage.Stage; 

public class webviewbrowser extends Application { 

@Override public void start(Stage primaryStage) throws Exception { 
    Pane root = new WebViewPane(); 
    primaryStage.setScene(new Scene(root, 1024, 768)); 
    primaryStage.setFullScreen(true); 
    primaryStage.show(); 
} 
public static void main(String[] args) { 
    launch(args); 
} 

/** 
* Create a resizable WebView pane 
*/ 
public class WebViewPane extends Pane { 

    public WebViewPane() { 
     VBox.setVgrow(this, Priority.ALWAYS); 
     setMaxWidth(Double.MAX_VALUE); 
     setMaxHeight(Double.MAX_VALUE); 

     WebView view = new WebView(); 
     view.setMinSize(500, 400); 
     view.setPrefSize(500, 400); 
     final WebEngine eng = view.getEngine(); 
     eng.load("http://google.com"); 
     //final TextField locationField = new TextField("http://www.google.com"); 
     //locationField.setMaxHeight(Double.MAX_VALUE); 
     Button goButton = new Button("Refresh"); 
     goButton.setDefaultButton(true); 

     EventHandler<ActionEvent> goAction = new EventHandler<ActionEvent>() { 
      @Override public void handle(ActionEvent event) { 
       eng.reload(); 
      } 
     }; 
     goButton.setOnAction(goAction); 

     GridPane grid = new GridPane(); 
     grid.setVgap(0); 
     grid.setHgap(0); 

     GridPane.setConstraints(goButton,2,0,2,1, HPos.RIGHT, VPos.BOTTOM, Priority.ALWAYS, Priority.ALWAYS); 
     GridPane.setConstraints(view, 0, 0, 2, 1, HPos.CENTER, VPos.CENTER, Priority.SOMETIMES, Priority.SOMETIMES); 
     grid.getColumnConstraints().addAll(
       new ColumnConstraints(100, 100, Double.MAX_VALUE, Priority.ALWAYS, HPos.CENTER, true), 
       new ColumnConstraints(40, 40, 40, Priority.NEVER, HPos.CENTER, true) 
     ); 
     grid.getChildren().addAll(goButton, view); 
     getChildren().add(grid); 
    } 

    @Override protected void layoutChildren() { 
     List<Node> managed = getManagedChildren(); 
     double width = getWidth(); 
     double height = getHeight(); 
     double top = getInsets().getTop(); 
     double right = getInsets().getRight(); 
     double left = getInsets().getLeft(); 
     double bottom = getInsets().getBottom(); 
     for (int i = 0; i < managed.size(); i++) { 
      Node child = managed.get(i); 
      layoutInArea(child, left, top, 
          width - left - right, height - top - bottom, 
          0, Insets.EMPTY, true, true, HPos.CENTER, VPos.CENTER); 
     } 
    } 
} 

}

Answer 1

Если вы хотите, чтобы стек один компонент поверх другого, не использовать GridPane для разметки, а не использовать родителя, который позволяет компоненты макета должны быть размещены в верхней части друг с другом. Например, стандарт Pane, a StackPane, Group или Region. В этих многоуровневых макетах компоненты отображаются в порядке расположения дочернего компонента в дочернем списке родителя.

В примере кода вы уже расширяют Pane, поэтому избавиться от всего кода сетки и просто сделать:

getChildren().addAll(view, goButton); 

вместо:

grid.getChildren().addAll(goButton, view); 

Изменение свойств макет вашего goButton, чтобы разместить его внутри родителя, который не управляет расположением своих дочерних элементов, например вы можете позвонить по телефону goButton.relocate(xPos, yPos).

У вас есть пользовательский материал в методе layoutChildren, который вы переопределите, что может испортить логику обработки макета по умолчанию. Переопределение layoutChildren - это более продвинутая макетная тема, и я бы не советовал ее начинающим.

Вот обновленный образец можно посмотреть на который использует некоторые из концепций, упомянутых в этом ответе.

import javafx.application.Application; 
import javafx.event.*; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.Pane; 
import javafx.scene.web.*; 
import javafx.stage.Stage; 

public class WebViewBrowser extends Application { 
    @Override public void start(Stage stage) throws Exception { 
     stage.setScene(new Scene(new WebViewPane("http://google.com"))); 
     stage.setFullScreen(true); 
     stage.show(); 
    } 

    public static void main(String[] args) { launch(args); } 
} 

class WebViewPane extends Pane { 
    final WebView view  = new WebView(); 
    final Button goButton = createGoButton(view.getEngine()); 

    public WebViewPane(String initURL) { 
     view.getEngine().load(initURL); 

     getChildren().addAll(
      view, 
      goButton 
     ); 

     initLayout(); 
    } 

    private Button createGoButton(final WebEngine eng) { 
     Button go = new Button("Refresh"); 
     go.setDefaultButton(true); 
     go.setOnAction(new EventHandler<ActionEvent>() { 
      @Override public void handle(ActionEvent event) { 
       eng.reload(); 
      } 
     }); 

     return go; 
    } 

    private void initLayout() { 
     setMinSize(500, 400); 
     setPrefSize(1024, 768); 

     view.prefWidthProperty().bind(widthProperty()); 
     view.prefHeightProperty().bind(heightProperty()); 

     goButton.setLayoutX(10); 
     goButton.layoutYProperty().bind(
      heightProperty().subtract(20).subtract(goButton.heightProperty()) 
     ); 
    } 
}