8

I'm still learning and experimenting with GUIs in JavaFX and I cant seem to get the "look" that I'm aiming for.. I'm trying to group a couple of Labels in a Panel and then in a different panel add another Label. But I cant seem to figure out how to properly use "JPanels" in JavaFX?

Any help would be greatly appreciated :D Thanks

EDIT: Here is what I'm trying to achieve by trying different layouts, no luck still

preview

jewelsea
  • 150,031
  • 14
  • 366
  • 406
user6408978
  • 85
  • 1
  • 2
  • 6
  • 2
    See the [tutorial](http://docs.oracle.com/javase/8/javafx/layout-tutorial/index.html). – James_D Jun 20 '16 at 21:13
  • 2
    I edited the question to include the image that was hosted at the fast-files link. As you get more reputation, you will also be able to include images inline. In the meantime, please don't link to fast-files again: that site was super-annoying. I also suggest you download [SceneBuilder from Gluon](http://gluonhq.com/labs/scene-builder/) and try creating your UI layout using it. – jewelsea Jun 20 '16 at 23:49

3 Answers3

12

While Java FX Pane is similar to Swing JPanel, the example below uses subclasses of Pane to get various layout effects. In particular,

  • Instead of a JPanel set to GridLayout, use GridPane.

  • Instead of a JPanel set to BoderLayout, use BorderPane.

  • Use ContentDisplay.TOP to position a label's content above its text, as shown here.

  • Use ContentDisplay.CENTER for topCenter to make the label overlay the rectangle; for comparison, a previous version used StackPane.

  • Use setPadding(), setMargin() and setVgap() to spread things out a little.

image

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Border;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.BorderStroke;
import javafx.scene.layout.BorderStrokeStyle;
import javafx.scene.layout.BorderWidths;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.stage.Stage;

/**
 * @see https://stackoverflow.com/a/37935114/230513
 */
public class BorderTest extends Application {

    private static final Border black = new Border(new BorderStroke(Color.BLACK,
        BorderStrokeStyle.SOLID, new CornerRadii(8), new BorderWidths(2)));
    private static final Border red = new Border(new BorderStroke(Color.RED,
        BorderStrokeStyle.SOLID, new CornerRadii(8), new BorderWidths(2)));
    private static final Border blue = new Border(new BorderStroke(Color.BLUE,
        BorderStrokeStyle.SOLID, new CornerRadii(8), new BorderWidths(2)));
    private static final Color yellow = Color.YELLOW.deriveColor(0, .9, 1, 1);

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Test");

        GridPane root = new GridPane();
        root.setPadding(new Insets(16));
        root.setVgap(16);
        root.setBorder(black);
        root.setBackground(new Background(new BackgroundFill(
            Color.LIGHTGRAY, CornerRadii.EMPTY, Insets.EMPTY)));

        BorderPane top = new BorderPane();
        top.setPadding(new Insets(16));
        top.setBorder(red);
        top.setLeft(createLabel("Label 1", yellow, 16));
        Label topCenter = createLabel("Label 2", yellow, 64);
        topCenter.setContentDisplay(ContentDisplay.CENTER);
        BorderPane.setMargin(topCenter, new Insets(16));
        top.setCenter(topCenter);
        top.setRight(createLabel("Label 3", yellow, 16));
        root.add(top, 0, 0);

        BorderPane bot = new BorderPane();
        bot.setPadding(new Insets(16));
        bot.setBorder(blue);
        bot.setCenter(createLabel("Label 4", Color.GREEN, 24));
        root.add(bot, 0, 1);

        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Label createLabel(String text, Color color, int size) {
        Rectangle r = new Rectangle(3 * size, 2 * size);
        r.setFill(Color.TRANSPARENT);
        r.setStroke(color);
        r.setStrokeWidth(3);
        Label l = new Label(text, r);
        l.setContentDisplay(ContentDisplay.TOP);
        l.setTextFill(color);
        l.setFont(new Font(16));
        return l;
    }

    public static void main(String[] args) {
        launch(args);
    }
}
Community
  • 1
  • 1
trashgod
  • 203,806
  • 29
  • 246
  • 1,045
  • 1
    Thanks alot, I've learned much from playing around and experimenting with your Example! But I do have a small question, How do i go about getting the **Height** or **Width** of the Top **BorderPane** for example? _(top.getWidth())_ – user6408978 Jun 24 '16 at 19:20
  • @user6408978: kudos for experimenting; check again _after_ `show()`, but ask yourself why you need to know; add an instance of `ColumnConstraints` with `setHgrow(Priority.ALWAYS)`, as shown in the API, to see the effect. – trashgod Jun 24 '16 at 19:32
2

The JavaFX equivalent to a JPanel is a Pane.

MasterBlaster
  • 948
  • 2
  • 12
  • 26
grturner
  • 23
  • 4
2

You can have some very nice tutorials http://java2s.com/ about javaFX and many many more.JavaFX equivalent to JPanel is Pane and an example:(taken from http://zetcode.com/gui/javafx/layoutpanes/)

enter image description here

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

/**
 * ZetCode JavaFX tutorial
 *
 * This program positions three shapes
 * using absolute coordinates.
 *
 * Author: Jan Bodnar
 * Website: zetcode.com
 * Last modified: June 2015
 */

public class AbsoluteLayoutEx extends Application {

    @Override
    public void start(Stage stage) {

        initUI(stage);
    }

    private void initUI(Stage stage) {

        Pane root = new Pane();

        Rectangle rect = new Rectangle(25, 25, 50, 50);
        rect.setFill(Color.CADETBLUE);

        Line line = new Line(90, 40, 230, 40);
        line.setStroke(Color.BLACK);

        Circle circle = new Circle(130, 130, 30);
        circle.setFill(Color.CHOCOLATE);

        root.getChildren().addAll(rect, line, circle);

        Scene scene = new Scene(root, 250, 220, Color.WHITESMOKE);

        stage.setTitle("Absolute layout");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
GOXR3PLUS
  • 6,877
  • 9
  • 44
  • 93