This discussion is archived
3 Replies Latest reply: Apr 29, 2013 8:32 AM by 917173 RSS

Image managing

917173 Explorer
Currently Being Moderated
Hello, I want to resolve the folliwng problem.
I have 3 pictures, i want that the first one is always present. the second one is displayed under the first one with no space between them.
The third one will be displayed after an event detection. and will placed on the bottom of the second one (they have similar properties).
Can some one help me doing this.
Thank you
  • 1. Re: Image managing
    shakir.gusaroff Expert
    Currently Being Moderated
    Use the stackpane layout pane.
    You can manipulate the children in stackpane
               stackPane.getChildren.add(int index, Node node) 
    When index = 0 means it is on the top.

    You can also use the toFront() and toBack() methods in Node to change the Z-order.
    For more info take a look at
  • 2. Re: Image managing
    jsmith Guru
    Currently Being Moderated
    In case bottom means below rather than under, then you can use a VBox.
    As you click your button to add new items to the VBox, they appear below all of the other items in the VBox.
    import javafx.application.Application;
    import javafx.event.*;
    import javafx.geometry.Pos;
    import javafx.scene.*;
    import javafx.scene.control.*;
    import javafx.scene.image.*;
    import javafx.scene.layout.VBox;
    import javafx.stage.Stage;
    public class ImageShow extends Application {
      private static final String imageLocs[] = {
      }; // icons courtesy of "Free for non-commercial use. Commercial usage: Not allowed"
      private static final Image[] images = new Image[imageLocs.length];
      @Override public void init() throws Exception {
        for (int i = 0; i < imageLocs.length; i++) {
          images[i] = new Image(imageLocs);

    @Override public void start(final Stage stage) throws Exception {
    final Button addImage = new Button("Die");

    final VBox layout = new VBox();
    layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;");

    addImage.setOnAction(new EventHandler<ActionEvent>() {
    @Override public void handle(ActionEvent event) {
    new ImageView(images[2])

    new ImageView(images[0]),
    new ImageView(images[1])

    new Scene(
    200, 500

    private ScrollPane makeScrollable(VBox vbox) {
    ScrollPane scrollPane = new ScrollPane(vbox);


    return scrollPane;

    public static void main(String[] args) throws Exception { launch(args); }
  • 3. Re: Image managing
    917173 Explorer
    Currently Being Moderated
    In fact it's not my need. I can customize this example to sweet my need: At the beginning i have 3 icons and when clickin on button die it change the second icon by another one.


  • Correct Answers - 10 points
  • Helpful Answers - 5 points