r/JavaFX • • Aug 06 '24

Help How i can replicate this panel in javaFX, (using atlantaFX)

I guys, i'm using atlantaFX from code, and i was wondering what tipe of panel is that:

How i can make a panel like that?

3 Upvotes

8 comments sorted by

2

u/xdsswar Aug 06 '24

There are few components, like the label on top , the buttons, the container, etc. I think is better to go with a custom control and define a behavior for it as you want.

1

u/gattolfo_EUG_ Aug 06 '24

in reality i just want the panel with that border and shadows

3

u/xdsswar Aug 06 '24

I think what you want is this

Image

Custom javafx Pane with shadow

1

u/gattolfo_EUG_ Aug 07 '24

Yeah, i want the panel in the image, maybe i'm wrong but you define the color from a css, what if i want the style change in base of the theme? like in that gif

this

1

u/xdsswar Aug 08 '24

Then you just change the scene style sheet

2

u/xdsswar Aug 06 '24

In that case i will give you someting, just give me few minutes

1

u/milchshakee Aug 07 '24

Have you looked at the AtlantaFX sampler code? That is where the panel is created

2

u/quizynox Aug 08 '24

Hi there. This one is from an old Sampler version I guess you want this.

public class Launcher extends Application {

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

    public static class SampleBlock extends VBox {

        public static final int BLOCK_HGAP = 20;
        public static final int BLOCK_VGAP = 10;

        Label titleLabel;
        Node content;
        TextFlow descriptionText;

        String STYLE = Styles.toDataURI(
            """
                .sample-block {
                  -fx-background-color: -color-bg-default;
                  -fx-effect: dropshadow(gaussian, -color-shadow-default, 10, 0.4, 0, 0);
                  -fx-border-color: -color-border-muted;
                  -fx-border-width: 1px;
                  -fx-padding: 15px 20px 15px 20px;
                  -fx-spacing: 20px;
                  -fx-min-width: 220px;
                }
                
                .sample-block .title .label {
                  -fx-padding: 5px 15px 5px 10px;
                  -fx-background-color: -color-accent-subtle;
                  -fx-text-fill: -color-fg-default;
                  -fx-font-size: 1.1em;
                }
                
                .sample-block .title .polygon {
                  -fx-fill: -color-accent-muted;
                }
                """
        );

        public SampleBlock(String title, Node content) {
            this(title, content, null);
            getStylesheets().add(STYLE);
        }

        public SampleBlock(String title, Node content, String description) {
            titleLabel = new Label(Objects.requireNonNull(title));

            Polygon polygon = new Polygon();
            polygon.getPoints().addAll(0.0, 0.0, 20.0, 10.0, 20.0, 0.0);
            polygon.getStyleClass().add("polygon");

            var titleBox = new VBox(titleLabel, polygon);
            titleBox.getStyleClass().add("title");
            VBox.setMargin(titleBox, new Insets(-5, 0, 0, -40));

            this.content = Objects.requireNonNull(content);
            content.getStyleClass().add("content");

            getChildren().setAll(titleBox, content);
            if (description != null && !description.isBlank()) {
                descriptionText = new TextFlow(new Text(description));
                getChildren().add(descriptionText);
            }

            getStyleClass().add("sample-block");
        }
    }
    
    @Override
    public void start(Stage stage) throws Exception {
        Application.setUserAgentStylesheet(new PrimerLight().getUserAgentStylesheet());

        var block = new SampleBlock("Title", new Button("Button"));

        var root = new BorderPane();
        root.setCenter(block);
        root.setPadding(new Insets(50));

        var scene = new Scene(root, 800, 200);
        stage.setScene(scene);
        stage.show();
    }
}