Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position a button (or any GUI element) in a JavaFX scene?

I am trying to put a JavaFX button in a specific place (specific coordinates) on a UI, but nothing is working. I'm guessing that there is a method that is used for this, but I can't find it.

like image 369
Milos Maksimovic Avatar asked Apr 05 '12 12:04

Milos Maksimovic


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 do I drag and drop in JavaFX?

A drag-and-drop gesture happens as follows: The user click a mouse button on a gesture source, drags the mouse, and releases the mouse button on a gesture target.


2 Answers

you can use pane. setLayoutX() and setLayoutY().

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;

public class Tester extends Application {


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

@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("Hello World!");
    Button btn = new Button();
    btn.setText("'Hello World'");
    btn.setOnAction(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            System.out.println("Hello World!");
        }
    });

    Pane root = new Pane();
    btn.setLayoutX(250);
    btn.setLayoutY(220);
    root.getChildren().add(btn);
    primaryStage.setScene(new Scene(root, 300, 250));
    primaryStage.show();
}
}
like image 170
Vinod CG Avatar answered Oct 27 '22 20:10

Vinod CG


layoutX and layoutY

<Button text="Button" layoutX="50" layoutY="100" />

In FXML, you can use the layoutX and layoutY properties that are inherited from javafx.scene.Node.

According to the JavaFX Documentation:

layoutX

Defines the x coordinate of the translation that is added to this Node's transform for the purpose of layout.

layoutY

Defines the y coordinate of the translation that is added to this Node's transform for the purpose of layout.

The example below results in a window in which a Button element is positioned with an x-coordinate of 50 and a y-coordinate of 100.

sample.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.Scene?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.control.Button?>

<Scene>
  <Pane prefWidth="300" prefHeight="300">
    <!-- Button Positioned Using layoutX and layoutY -->
    <Button text="Button" layoutX="50" layoutY="100" />
  </Pane>
</Scene>

Main.java

package sample;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.fxml.FXMLLoader;

public class Main extends Application {
  @Override
  public void start(Stage primaryStage) throws Exception {
    Scene scene = FXMLLoader.load(getClass().getResource("sample.fxml"));
    primaryStage.setTitle("Window Title");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

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

Note: You can also use the setLayoutX() and setLayoutY() methods to set the values of the layoutX and layoutY properties dynamically in the controller, rather than through the markup. Additionally, you can use the layoutX and layoutY tags (i.e. <layoutX> and <layoutY>) within the UI element tag to set the x-coordinates and y-coordinates inside of the FXML markup as an alternative to using attributes.

like image 28
Grant Miller Avatar answered Oct 27 '22 21:10

Grant Miller