Question

1) ADD a button that says "Change Pictures"

2) WRITE some code to handle the button event (in other words, when you press the button, this is the code that it goes to). In that code, change the pictures.

JAVA CODE:

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.geometry.Insets;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

/**
* This program demonstrates the GridPane layout container.
*/

public class GridPaneImages extends Application
{

//THESE ARE global (vs local) variables
// which means they can be used ANYWHERE in the program -- you want to use
// these in your button press code so that is why you are making them global!
ImageView pic1View, pic2View, pic3View, pic4View;

public static void main(String[] args)
{
// Launch the application.
launch(args);
}

@Override
public void start(Stage primaryStage)
{
// Create the Image components.
Image pic1 = new Image("file:Lemon.bmp");
Image pic2 = new Image("file:Banana.bmp");
Image pic3 = new Image("file:Pear.bmp");
Image pic4 = new Image("file:Strawberry.bmp");
  
// Create the ImageView components.
pic1View = new ImageView(pic1);
pic2View = new ImageView(pic2);
pic3View = new ImageView(pic3);
pic4View = new ImageView(pic4);

  
// Resize the moon image, preserving its aspect ratio.
pic1View.setFitWidth(200);
pic1View.setPreserveRatio(true);
  
// Resize the ship image, preserving its aspect ratio.
pic2View.setFitWidth(200);
pic2View.setPreserveRatio(true);

// Resize the sunset image, preserving its aspect ratio.
pic3View.setFitWidth(200);
pic3View.setPreserveRatio(true);
  
// Resize the flower image, preserving its aspect ratio.
pic4View.setFitWidth(200);
pic4View.setPreserveRatio(true);
  
// Create a GridPane.
GridPane gridpane = new GridPane();
  
// Add the ImageViews to the GridPane.
gridpane.add(pic1View, 0, 0); // Col 0, Row 0
gridpane.add(pic2View, 1, 0); // Col 1, Row 0
gridpane.add(pic3View, 0, 1); // Col 0, Row 1
gridpane.add(pic4View, 1, 1); // Col 1, Row 1
  
// Set the gap sizes.
gridpane.setVgap(10);
gridpane.setHgap(10);
  
// Set the GridPane's padding.
gridpane.setPadding(new Insets(30));
  
// Create a Scene with the GridPane as its root node.
Scene scene = new Scene(gridpane);
  
// Add the Scene to the Stage.
primaryStage.setScene(scene);
  
// Set the stage title.
primaryStage.setTitle("Images");
  
// Show the window.
primaryStage.show();
}


//TO DO :
// ADD A BUTTON AND THEN A BUTTON HANDLER that handles when you click on button
// In that handler code , CHANGE ALL THE PICTURES to a different fruit
// for instance, to change picture 4 to an apple:
// pic4View.setImage(new Image("file:Apple.bmp"));
}

Answer 1

//Java Code

import javafx.application.Application;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.geometry.Insets;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

/**
* This program demonstrates the GridPane layout container.
*/

public class GridPaneImages extends Application
{

//THESE ARE global (vs local) variables
// which means they can be used ANYWHERE in the program -- you want to use
// these in your button press code so that is why you are making them global!
ImageView pic1View, pic2View, pic3View, pic4View;

Button btnAdd;
public static void main(String[] args)
{
// Launch the application.
launch(args);
}

@Override
public void start(Stage primaryStage)
{
// Create the Image components.
Image pic1 = new Image("file:Lemon.bmp");
Image pic2 = new Image("file:Banana.bmp");
Image pic3 = new Image("file:Pear.bmp");
Image pic4 = new Image("file:Strawberry.bmp");

// Create the ImageView components.
pic1View = new ImageView(pic1);
pic2View = new ImageView(pic2);
pic3View = new ImageView(pic3);
pic4View = new ImageView(pic4);

// Resize the moon image, preserving its aspect ratio.
pic1View.setFitWidth(200);
pic1View.setPreserveRatio(true);

// Resize the ship image, preserving its aspect ratio.
pic2View.setFitWidth(200);
pic2View.setPreserveRatio(true);

// Resize the sunset image, preserving its aspect ratio.
pic3View.setFitWidth(200);
pic3View.setPreserveRatio(true);

// Resize the flower image, preserving its aspect ratio.
pic4View.setFitWidth(200);
pic4View.setPreserveRatio(true);

// Create a GridPane.
GridPane gridpane = new GridPane();

// Add the ImageViews to the GridPane.
gridpane.add(pic1View, 0, 0); // Col 0, Row 0
gridpane.add(pic2View, 1, 0); // Col 1, Row 0
gridpane.add(pic3View, 0, 1); // Col 0, Row 1
gridpane.add(pic4View, 1, 1); // Col 1, Row 1

// Set the gap sizes.
gridpane.setVgap(10);
gridpane.setHgap(10);
//TO DO :
// ADD A BUTTON AND THEN A BUTTON HANDLER that handles when you click on button

// In that handler code , CHANGE ALL THE PICTURES to a different fruit
// for instance, to change picture 4 to an apple:
// pic4View.setImage(new Image("file:Apple.bmp"));
btnAdd = new Button("Change Pictures");
gridpane.add(btnAdd,1,2);
//Add handler
btnAdd.setOnAction(event -> {
pic1View.setImage(new Image("file:Orange.bmp"));
pic2View.setImage(new Image("file:Melon.bmp"));
pic3View.setImage(new Image("file:Grapes.bmp"));
pic4View.setImage(new Image("file:Apple.bmp"));
});

// Set the GridPane's padding.
gridpane.setPadding(new Insets(30));

// Create a Scene with the GridPane as its root node.
Scene scene = new Scene(gridpane);

// Add the Scene to the Stage.
primaryStage.setScene(scene);

// Set the stage title.
primaryStage.setTitle("Images");

// Show the window.
primaryStage.show();
}

}

//Output

//If you need any help regarding this solution... please leave a comment... thanks