?

• 開始我們今天的代碼實現，我們接著上一回，上回實現了服務器的代碼

　　　　這次實現客戶端的UI(界面)層,

?

我們界面層采用javafx來進行繪制,首先有個登錄服務器的界面然后切換到聊天界面

運行結果如下.

---

源代碼如下:

1 package jffx.blogs.net; 2 3 import javafx.application.Application; 4 import javafx.geometry.Insets; 5 import javafx.geometry.Pos; 6 import javafx.scene.Scene; 7 import javafx.scene.control.*; 8 import javafx.scene.control.Button; 9 import javafx.scene.control.Label; 10 import javafx.scene.control.ScrollPane; 11 import javafx.scene.control.TextArea; 12 import javafx.scene.control.TextField; 13 import javafx.scene.layout.FlowPane; 14 import javafx.scene.layout.GridPane; 15 import javafx.scene.layout.HBox; 16 import javafx.scene.layout.Pane; 17 import javafx.scene.text.Text; 18 import javafx.stage.Stage; 19 20 import java.net.Socket; 21 22 23 //采用監聽按鈕事件來切換舞臺使得登錄界面切換 24 /** 25 * 代碼文件: TalkRoomServer.java 26 * 功能描述: 客戶端代碼 27 */ 28 public class TalkRoomClient extends Application { 29 private TextArea ta = new TextArea(); //聊天記錄框 30 private TextField tf = new TextField(); //信息發送框 31 private ComboBox<String> userList = new ComboBox<>(); //在線用戶下拉列表 32 33 //用戶名稱 34 String name ; 35 //與服務器端連接的Socket 36 Socket socket ; 37 38 @Override 39 public void start(Stage primaryStage) { 40 /** 41 * 畫登錄界面，采用GridPane 42 */ 43 GridPane mainPane = new GridPane() ; 44 45 //設置面板及布局 46 mainPane.setAlignment(Pos.CENTER) ; //向中間靠齊 47 mainPane.setHgap(10) ; //節點的水平間距 48 mainPane.setVgap(10) ; //節點的垂直間距 49 mainPane.setPadding(new Insets(5, 5, 5, 5)) ; 50 51 //文本框 52 Text text = new Text("Welcome") ; 53 mainPane.setId("welcome-text"); 54 mainPane.add(text, 0, 0, 2, 1) ; 55 56 //標簽加上輸入的文本域 57 Label serviceName = new Label("SericeName: ") ; 58 TextField tfForService = new TextField() ; 59 mainPane.add(serviceName, 0, 1) ; 60 mainPane.add(tfForService, 1, 1); 61 62 //昵稱加上輸入的文本域 63 Label inputName = new Label("Name: ") ; 64 TextField tfForName = new TextField() ; 65 mainPane.add(inputName, 0, 2) ; 66 mainPane.add(tfForName, 1, 2) ; 67 68 //按鈕這行單獨處理，用一個Hbox包裝一下 69 Button btForLogin = new Button("Login") ; 70 HBox box = new HBox(10) ; 71 box.getChildren().add(btForLogin) ; 72 box.setAlignment(Pos.BOTTOM_RIGHT) ; //靠向最右邊 73 //然后再加入主面板 74 mainPane.add(box, 1, 4) ; 75 76 77 //顯示一下--將面板放入舞臺,至于為什么清查閱相關資料,-----h 78 Scene scene = new Scene(mainPane, 300, 200) ; 79 primaryStage.setScene(scene) ; 80 primaryStage.setTitle("Login") ; 81 primaryStage.show() ; 82 83 /** 84 * 監聽按鈕事件，以更換舞臺 85 */ 86 //這里用lambda表達式，因為就算你寫完整的繼承事件接口即 87 // EventHandle<ActionEvent>處理,也只是處理一個handle方法 88 //所以還不如寫lamda,因為handle()只有一個參數，所以event只是一個標識符 89 // 代表只有一個參數. 90 btForLogin.setOnAction(event -> { 91 /** 92 * 繼續畫需要切換的聊天界面圖 93 */ 94 Pane pane = new FlowPane() ; 95 pane.setPadding(new Insets(20, 20, 20, 20)); 96 //設置文本域的屬性 97 ta.setEditable(false); //不可編輯 98 ta.setWrapText(true); //自動換行 99 pane.getChildren().add(new ScrollPane(ta)) ; 100 101 HBox hBox = new HBox(20) ; 102 //加入在線用戶及輸入文本框 103 //getItems()方法返回一個選項列表 104 userList.getItems().addAll("All", "asd") ; //默認給所有人 105 userList.setStyle("-fx-color: White") ; 106 userList.setValue("All") ; 107 tf.setAlignment(Pos.BOTTOM_LEFT) ; 108 tf.setPrefColumnCount(30); 109 hBox.getChildren().addAll(userList, tf) ; 110 111 pane.getChildren().add(hBox) ; 112 Scene charScene = new Scene(pane, 400, 300) ; 113 primaryStage.setTitle("Chatting") ; 114 primaryStage.setScene(charScene) ; 115 primaryStage.show() ; 116 117 118 119 //=====================================后面暫時沒寫============ 120 //登陸之后,給成員name初始化 121 this.name = tfForName.getText() ; 122 String hostName = tfForService.getText() ; 123 System.out.println(name); 124 System.out.println("抱歉,　我還沒有寫邏輯代碼..") ; 125 /** 126 //連接服務器 127 try { 128 this.socket = new Socket(hostName, 5210) ; 129 130 } catch (Exception ex) { 131 ex.printStackTrace() ; 132 } 133 **/ 134 135 }) ; 136 } 137 }

//------------------------------------------------------------

---

?

---

?

轉載于:https://www.cnblogs.com/jffx/p/9807949.html

總結

以上是生活随笔為你收集整理的文本聊天室(TCP-中)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。