Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align a button into the bottom right corner in JavaFX?

Tags:

java

javafx

I'm extremely new to JavaFX, and I'm attempting to get a button(specifically scrapeBtn) into the bottom right corner of an application. Here is what I have so far:

package main;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Driver extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        Button scrapeBtn = new Button();
        scrapeBtn.setText("Scrape!");
        scrapeBtn.setOnAction(new EventHandler<ActionEvent>() {

            public void handle(ActionEvent event) {
                System.out.println("Scrape button pressed.");
            }
        });

        TextField console = new TextField();

        GridPane root = new GridPane();    

        GridPane.setConstraints(scrapeBtn, 2, 2, 1, 1);
        root.getChildren().add(scrapeBtn);

        root.getChildren().add(console);

        Scene scene = new Scene(root, 600, 400);

        primaryStage.setTitle("Wiki Scraper");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Any ideas as to how I could accomplish this? Some tips in general to aligning and formatting things with JavaFX would also be really appreciated.

Thanks.

like image 553
kibowki Avatar asked Feb 11 '15 03:02

kibowki


People also ask

How do you add a button to a scene in JavaFX?

You can create a Button by instantiating the javafx. scene. control. Button class of this package and, you can set text to the button using the setText() method.

How to align the <button> element to the right?

Solution with the CSS text-align property ¶ It is also possible to align the <button> element to the right by using the CSS text-align property. In the example below, we set the text-align to "right" for the <div> element and use the "left" value of the same property for the <p> element.

How do you center align a button in CSS?

Left, Right, and Center Align Button Using CSS Text Align Property. To align the button to the left position, you have to use the CSS text-align property with left as its value. In addition to this, if you want to align the button in the right position, you can also use the same property and right as its value. . Output.

How do I control the size and alignment of nodes in JavaFX?

This topic describes techniques for controlling the size and alignment of nodes when placed in a JavaFX layout pane. A main advantage of using the built-in JavaFX layout panes is that the size and alignment of nodes is handled by the pane. As the pane is resized, the nodes are resized according to their preferred size range preferences.

How to move a button to the left and right?

It can be used to move the button to the left and right positions. To move the button to the left position, you have to use the CSS float property with left as its value. For the right position, you have to use this property with right as its value. The most noteworthy thing here is that you cannot use this property to center align the button.


1 Answers

I often use a BorderPane for similar purposes (e.g. a Dialog with some text and controls etc. at the center and one or more buttons at the bottom). Therefore, I use the BorderPane as root and a HBox as "button container" at the bottom. Finally, I set the botton alignment to "RIGHT".

Here an example based on your code:

@Override
public void start(Stage primaryStage) {

    // center
    VBox vbCenter = new VBox(); // use any container as center pane e.g. VBox
    TextField console = new TextField();
    vbCenter.getChildren().add(console);

    // bottom respectively "button area"
    HBox hbButtons = new HBox();
    Button scrapeBtn = new Button();
    scrapeBtn.setText("Scrape!");
    scrapeBtn.setOnAction(new EventHandler<ActionEvent>() {

      public void handle(ActionEvent event) {
        System.out.println("Scrape button pressed.");
      }
    });
    hbButtons.getChildren().add(scrapeBtn);
    hbButtons.setAlignment(Pos.CENTER_RIGHT);

    // root
    BorderPane root = new BorderPane();
    root.setPadding(new Insets(20)); // space between elements and window border
    root.setCenter(vbCenter);
    root.setBottom(hbButtons);

    Scene scene = new Scene(root, 600, 400);

    primaryStage.setTitle("Wiki Scraper");
    primaryStage.setScene(scene);
    primaryStage.show();
}

This code leads to this (after resizing the window a little bit):

Result

like image 183
gfkri Avatar answered Sep 28 '22 11:09

gfkri