How do I show an image in ImageView when a typed text into TextField matches with the image name?

Question

I've some images into the project folder. Each image has a name. For example: a, aa, aba etc. I want to show the related image into ImageView when it matches an image name typed into the TextField.

For example if I type 'a' into the TextField it will open the image named 'a'. If I type "ab", it won't open any image as there is no image into the image folder named "ab". An image will be only shown when it's name get matched with the text typed into the TextField.

I've written some code as follows-

Application_Controler.java

public class Application_Controler implements Initializable{

    @FXML
    private TextField txt;

    @FXML
    private ImageView img;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        String text=txt.getText();              
        File file = new File("src/images/"+text);
        Image image = new Image(file.toURI().toString());
        img.setImage(image);
    }
}

Here is the .fxml file:

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

<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="imran.jfx.application.Application_Controler">
   <children>
      <AnchorPane layoutX="-17.0" layoutY="-14.0" prefHeight="461.0" prefWidth="454.0">
         <children>
            <TextField fx:id="txt" layoutX="122.0" layoutY="87.0" prefHeight="55.0" prefWidth="229.0" />
            <ImageView fx:id="img" fitHeight="281.0" fitWidth="426.0" layoutX="24.0" layoutY="175.0" pickOnBounds="true" preserveRatio="true" />
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

One thing to mention that it won't need to press any extra "Enter" key to show the image after writing to the TextField.

You need to find all the resources which are available at your classpath. Have a look at [Get a list of resources from classpath directory](http://stackoverflow.com/questions/3923129/get-a-list-of-resources-from-classpath-directory) and then try to re-implement what you are trying to do here. — ItachiUchiha, Sep 22 '15 at 16:27

score 1 · Accepted Answer · answered Sep 22 '15 at 17:13

1

You can use a binding:

@Override
public void initialize(URL url, ResourceBundle rb) {
    img.imageProperty().bind(Bindings.createObjectBinding(() -> {
        File file = new File("src/images/"+txt.getText());
        if (file.exists()) {
            return new Image(file.toURI().toString());
        } else {
            return null ;
        }
    }, txt.textProperty());
}

This assumes that your path is correct (it looks odd to me) and that the user is typing the entire filename in the text field (including file extension, if necessary). You can obviously modify the argument to the File constructor as needed.

answered Sep 22 '15 at 17:13

James_D

201,275
16
291
322

@James_D Nice solution. The only step that I would want to replace is loading the image using `classloader` instead of using `io.File` since the images are already placed inside the src directory. – ItachiUchiha Sep 23 '15 at 02:54
Yes, I would too, but the OP seemed to think this was what he needed... It's not entirely clear from the question if the images are bundled with the app or are actually on the user's file system. I might update it in the morning... – James_D Sep 23 '15 at 03:04

How do I show an image in ImageView when a typed text into TextField matches with the image name?

1 Answers1