Search code examples
javafxjavafx-2javafx-8

JAVAFX ListView chatting


I need to insert values in list view in one by one like chatting. now my code is

@FXML
private ListView<String> messageList;    

private ObservableList<String> messages = FXCollections.observableArrayList();    

messageList.setItems(messages);

Solution

  • This may be similar to what you are asking.

    Main:

    import javafx.application.Application;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.Parent;
    import javafx.scene.Scene;
    import javafx.stage.Stage;
    
    public class ChatApp extends Application {
    
        @Override
        public void start(Stage stage) throws Exception {
            Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
    
            Scene scene = new Scene(root);
    
            stage.setScene(scene);
            stage.show();
        }
    
        /**
         * @param args the command line arguments
         */
        public static void main(String[] args) {
            launch(args);
        }
    
    }
    

    Controller:

    import java.net.URL;
    import java.util.ResourceBundle;
    import javafx.collections.FXCollections;
    import javafx.collections.ObservableList;
    import javafx.event.ActionEvent;
    import javafx.fxml.FXML;
    import javafx.fxml.Initializable;
    import javafx.scene.control.ListView;
    import javafx.scene.control.TextField;
    
    public class FXMLDocumentController implements Initializable {
    
        @FXML private ListView lvChatWindow;
        @FXML private TextField tfUser1, tfUser2;
    
        ObservableList<String> chatMessages = FXCollections.observableArrayList();//create observablelist for listview
    
    
        //Method use to handle button press that submits the 1st user's text to the listview.
        @FXML
        private void handleUser1SubmitMessage(ActionEvent event) {
            chatMessages.add("User 1: " + tfUser1.getText());//get 1st user's text from his/her textfield and add message to observablelist
            tfUser1.setText("");//clear 1st user's textfield
        }
    
        //Method use to handle button press that submits the 2nd user's text to the listview.
        @FXML
        private void handleUser2SubmitMessage(ActionEvent event) {
            chatMessages.add("User 2: " + tfUser2.getText());//get 2nd user's text from his/her textfield and add message to observablelist
            tfUser2.setText("");//clear 2nd user's textfield
        }
    
        @Override
        public void initialize(URL url, ResourceBundle rb) {
            // TODO
            lvChatWindow.setItems(chatMessages);//attach the observablelist to the listview
        }      
    }
    

    FXML:

    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import javafx.scene.control.Button?>
    <?import javafx.scene.control.Label?>
    <?import javafx.scene.control.ListView?>
    <?import javafx.scene.control.TextField?>
    <?import javafx.scene.layout.AnchorPane?>
    
    <AnchorPane id="AnchorPane" prefHeight="349.0" prefWidth="549.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.60" fx:controller="chatapp.FXMLDocumentController">
        <children>
            <Button fx:id="bntUser1Send" layoutX="99.0" layoutY="299.0" onAction="#handleUser1SubmitMessage" text="send message user1" />
            <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
          <Button fx:id="btnUser2Send" layoutX="351.0" layoutY="299.0" mnemonicParsing="false" onAction="#handleUser2SubmitMessage" text="send message user2" />
          <ListView fx:id="lvChatWindow" layoutX="75.0" layoutY="29.0" prefHeight="200.0" prefWidth="419.0" />
          <TextField fx:id="tfUser1" layoutX="36.0" layoutY="258.0" prefHeight="25.0" prefWidth="239.0" />
          <TextField fx:id="tfUser2" layoutX="293.0" layoutY="258.0" prefHeight="25.0" prefWidth="239.0" />
        </children>
    </AnchorPane>
    

    enter image description here

    This app simulates two different users sending messages to one listview. Similar to a chat. More comments in Controller