SceneBuilderのGroupの使い方

Question

SceneBuilderでscrollPaneに画像やテキストを出力させたいです。
調べてみたところ、Groupを使えば良いとのことだったのですが、画像やテキストの追加や表示の仕方がわかりません。

Answer 1

Groupを使えば良いとのことだったのですが、

JavaFXはあまりわかっていないのですが、Groupはただグループ化するだけで重なってしまいませんか？

どういう表示のイメージかわかりませんが、基本的にはScrollPaneの中に何かしらのレイアウト（VBox等）を入れ、その中にImageViewやTextを入れればいいと思います。

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Text?>


<BorderPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1"
            xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <top>
        <Button mnemonicParsing="false" onAction="#onButton" text="add" BorderPane.alignment="CENTER"/>
    </top>
    <center>
        <ScrollPane>
            <content>
                <VBox fx:id="vbox">
                    <children>
                        <ImageView>
                            <image>
                                <Image url="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/171983/5c373ecbfa1165eb_thumbnail.jpeg"/>
                            </image>
                        </ImageView>
                        <Text text="Text"/>
                        <ImageView>
                            <image>
                                <Image url="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg"/>
                            </image>
                        </ImageView>
                    </children>
                </VBox>
            </content>
        </ScrollPane>
    </center>
</BorderPane>

package sample;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;

public class Controller {
    private static final String url1 = "https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/171983/5c373ecbfa1165eb_thumbnail.jpeg";
    private static final String url2 = "https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg";

    @FXML
    private VBox vbox;

    @FXML
    void onButton(ActionEvent event) {
        vbox.getChildren().add(new ImageView(new Image(url1)));
        vbox.getChildren().add(new Text("Text"));
        vbox.getChildren().add(new ImageView(new Image(url2)));
    }
}

package sample;

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

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }

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

---

調べてみたところ、

調べたことを具体的に提示してください（見たURLや、自分で試したコード等）
「調べましたが」だけでは、第３者には全く伝わりません。

まだ読んでいなければこちらを一通り目を通してください。
質問するときのヒント｜teratail（テラテイル）

Comments

[mikesamane]

回答ありがとうごさいます。
VBoxを使ってみたらうまくいきました。