How to get an imageView in a fxml file

Question

i have this fxml file

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<StackPane opacity="1.0" prefHeight="700.0" prefWidth="1024.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="engine.scene.ctrler">
  <children>
    <ImageView fitHeight="701.7022094726562" fitWidth="1235.874704009025" pickOnBounds="true" preserveRatio="true" visible="true" StackPane.alignment="CENTER">
      <effect>
        <Glow level="0.9371069182389937" />
      </effect>
      <image>
        <Image url="@../../../resources/img/bg.jpg" />
      </image></ImageView></children></stackpane>

and i want to change width and height of my imageView any time my scene size changed .i know i should use this

  stage.widthProperty().addListener(new ChangeListener() { 
        @Override
        public void changed(ObservableValue ov, Object t, Object t1) {              
           myImageView.setFitWidth(stage.getWidth());
        }
    });

but i don't know how i can get ImageView from fxml file

Istar_Eldritch · Accepted Answer · 2014-05-01T10:27:36.960

3

I suppose what you need it's a controller.

First you have to add the following as attribute on the StackPane line of the FXML

fx:controller="the.package.ControllerName"

And a attribute on the ImageView with the Id:

fx:id="imageId"

Where of course the.package is the package of the Controller you are going to use.

To implement the controller create a new class with the name you want and extend StackPane and override the initialize method:

package the.package;  

public class ControllerName extends StackPane{

  @FXML
  ImageView imageId;

  @Override
  public void initialize(URL url, ResourceBundle resourceBundle) {
    //You can add code here. 

    //With JavaFX2
    widthProperty().addListener(new ChangeListener() { 
      @Override
      public void changed(ObservableValue ov, Object t, Object t1) {              
        myImageView.setFitWidth(stage.getWidth());
      }
    });

     //With JavaFX8 Using Lambdas
     widthProperty().addListener((ov, t, t1) ->
       myImageView.setFitWidth(getWidth()));         

  }
}

If this do not work you will need to create a new public method in the controller that resizes the ImageView. You can call this method from the stage listener that you have implemented.

Tell me if this is not what you where looking for.

P.S - I have a little project that uses this concepts here!

edited May 01 '14 at 10:27

answered May 01 '14 at 06:45

Istar_Eldritch

220
2
12

but myImageView is not declared ,how can i get imageView in fxml file and give it to myImageView and then change width of that ? – May 01 '14 at 08:34
The name of the ImageView in the controller should match the same Id the ImageView has in the FXML. In fact the controller is the "code" behind the FXML. – Istar_Eldritch May 01 '14 at 09:20
this method will work fine. I have implemented same way by giving fx:id – tarkikshah May 01 '14 at 09:25
should myImageView change to imageId ? – May 01 '14 at 11:03
You can use the name you prefer. Just remember you have to add the attribute fx:id="myImageView" to the ImageView defined in the FXML. Take a look [here](http://docs.oracle.com/javafx/2/api/javafx/fxml/doc-files/introduction_to_fxml.html#nested_controllers) for more info. – Istar_Eldritch May 01 '14 at 14:39

How to get an imageView in a fxml file

1 Answers1