Results 1 to 8 of 8
  1. #1
    JamesB is offline Member
    Join Date
    Sep 2016
    Posts
    5
    Rep Power
    0

    Default Add Image next to Text in ListView (JavaFX)

    Hey everyone,

    For a project I'm trying to implement a Listview, that shows user names and whether they are online or not. To do that I'm writing the names, that I get out of a HashMap, in a ListView.
    The HashMap also gives me the information, whether the user is online or not.

    I found this post on stackoverflow that looks promising, however I'm not able to adjust it to my needs:
    java - JavaFx : How to put ImageView inside ListView - Stack Overflow

    My code looks like this:

    Java Code:
    public class UserSelectionController implements Initializable {
       
        final UserController UserController = new UserController();
        @FXML
        private ListView<String> ListView;
        private final Image RedLED = new Image("/images/LEDRed.png");
        private final Image GreenLED = new Image("/images/LEDGreen.png");
        private final Image[] listOfImages = {RedLED, GreenLED};
    
      
        /**
         * Initializes the controller class.
         */
        @Override
        public void initialize(URL url, ResourceBundle rb) {
        
            try {
               // first of all I fill the ListView with the Names I get from the HashMap
                Map<String, Integer> Users = UserSwitching.getUsersAndStatus();
                List<String> keylist = new ArrayList<>(Users.keySet());
                ListView.setItems(FXCollections.observableArrayList(keylist));
               // and then I want to add the online/offline display
                displayStatus(Users);
               } catch (RemoteException ex) {
                Logger.getLogger(UserSelectionController.class.getName()).log(Level.SEVERE, null, ex);
            }  
            
        }
        
        public void displayStatus(Map<String, Integer> Users){
          
           ObservableList<Integer> status = FXCollections.observableArrayList ();
           
            for ( Map.Entry<String, Integer> entry : Users.entrySet() ){
               String key = entry.getKey();
               int status = entry.getValue();
               status.add(status);
                }
            
               ListView.setCellFactory(param -> new ListCell<String>() {
                private ImageView imageView = new ImageView();
              @Override
                public void updateItem(String name, boolean empty) {
                    super.updateItem(name, empty);
    
                    if (empty) {
                        setText(null);
                        setGraphic(null);
                    } else {
                        if( name.equals("Sue")){
                            imageView.setImage(listOfImages[0]);
                        }else if (name.equals("John"))
                            imageView.setImage(listOfImages[1]);
                        setText(name);
                        setGraphic(imageView);
                    }
                }
            }); 
        }
    Right now it works because I use the two names I also have in the ListView in the if-else-statement, where I should obviously check for the status value, corresponding to the name. But I don't know how to adjust the updateItem() method to consider both, the names in the list, and the associated status properly. I tried to create a new List "status" where I just add all the status information without the names, but if that doesn't seem to be very clever.

    I would really appreciate any suggestions.

  2. #2
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    Eastern Florida
    Posts
    20,003
    Rep Power
    33

    Default Re: Add Image next to Text in ListView (JavaFX)

    Create a class that holds all the info about the person including the name and image.
    Use a Map<String, YourClass> to hold instances of the class where the String is the name.
    If you don't understand my response, don't ignore it, ask a question.

  3. #3
    JamesB is offline Member
    Join Date
    Sep 2016
    Posts
    5
    Rep Power
    0

    Default Re: Add Image next to Text in ListView (JavaFX)

    Don't know if I understand you correctly, the image I need to load depends on the status, not on the person.
    The Map I have Map<String, Integer> should give me all information I need.
    I just want to add the image depending on the current status value (0 or 1) which could be different at the next program start.

  4. #4
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    Eastern Florida
    Posts
    20,003
    Rep Power
    33

    Default Re: Add Image next to Text in ListView (JavaFX)

    If the image depends on the status, the map could use the status as key and image as value: Map<TheStatus, TheImage>
    If you don't understand my response, don't ignore it, ask a question.

  5. #5
    JamesB is offline Member
    Join Date
    Sep 2016
    Posts
    5
    Rep Power
    0

    Default Re: Add Image next to Text in ListView (JavaFX)

    Quote Originally Posted by Norm View Post
    If the image depends on the status, the map could use the status as key and image as value: Map<TheStatus, TheImage>
    Okay but the one Map I have (Map<String, Integer>) is given. So I guess your first suggestion with a custom class Map<String, YourClass> works better.
    Then I would have to take my original Map apart and add the status together with the image into a new class and a new map?

  6. #6
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    Eastern Florida
    Posts
    20,003
    Rep Power
    33

    Default Re: Add Image next to Text in ListView (JavaFX)

    Then I would have to take my original Map apart and ...
    That depends on the following:
    What data do you need access to? Can it all be in a class object?
    How do you want to access it?
    If you don't understand my response, don't ignore it, ask a question.

  7. #7
    JamesB is offline Member
    Join Date
    Sep 2016
    Posts
    5
    Rep Power
    0

    Default Re: Add Image next to Text in ListView (JavaFX)

    Actually I don't need access to the data once it's in the ListView.
    When the Keys (user names) are in the ListView the job is basically done.
    All I need to do afterwards is, if the user clicks on a user, return the user name to a different method.
    The status is only a displaying aspect in the Listview I would like to have.

    Edit: Isn't it possible to use my original map as an input parameter for the setCellFactory updateItem method and iterate through keys, respectively the values?
    And then set the image depending on value 0/1?
    Last edited by JamesB; 09-19-2016 at 09:29 PM.

  8. #8
    JamesB is offline Member
    Join Date
    Sep 2016
    Posts
    5
    Rep Power
    0

    Default Re: Add Image next to Text in ListView (JavaFX)

    Okay I found a solution that works:

    Java Code:
        public void displayStatus(){
           
            ListView.setCellFactory(listView -> new ListCell<String>() {
                private ImageView imageView = new ImageView();
              @Override
                public void updateItem(String name, boolean empty) {
                    super.updateItem(name, empty);
    
                    if (empty) {
                        setText(null);
                        setGraphic(null);
                    } else {
                        try {
                            Image image = getImageFromStatus(name);
                            imageView.setImage(image);
                            System.out.println(image);
                        } catch (RemoteException ex) {
                            Logger.getLogger(VehicleSelectionController.class.getName()).log(Level.SEVERE, null, ex);
                        }
                        setText(name);
                        setGraphic(imageView);
                    }
                }
            }); 
        }
    With an additional method, that checks the status in the original HashMap with the current key and returns the corresponding image:
    Java Code:
        public Image getImageFromStatus(String name) throws RemoteException {
    
            Map<String, Integer> vehicles = UserSwitching.getUsersAndStatus();
            int status = vehicles.get(name);
    
            if (status == 1) {
                Image image = listOfImages[1];
                return image;
            } else {
                Image image = listOfImages[0];
                return image;
            }
            
        }

Similar Threads

  1. Can't load an image to he background with Javafx
    By Deathslice in forum JavaFX
    Replies: 9
    Last Post: 04-04-2015, 05:43 PM
  2. JavaFX Book | Learn JavaFX More In Depth
    By SnakeDoc in forum JavaFX
    Replies: 0
    Last Post: 05-17-2013, 11:10 PM
  3. Replies: 4
    Last Post: 08-09-2012, 06:18 PM
  4. Replies: 1
    Last Post: 07-28-2011, 08:48 AM
  5. JavaFX Script and JavaFX Mobile
    By levent in forum Java Software
    Replies: 1
    Last Post: 01-27-2010, 04:48 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •