文本聊天室(TCP-中)

 

• 开始我们今天的代码实现，我们接着上一回，上回实现了服务器的代码

　　　　这次实现客户端的UI(界面)层,

 

1. 我们界面层采用javafx来进行绘制,首先有个登录服务器的界面然后切换到聊天界面
2. 运行结果如下.

---

源代码如下:

package jffx.blogs.net;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;
import javafx.stage.Stage;

import java.net.Socket;


//采用监听按钮事件来切换舞台使得登录界面切换
/**
 * 代码文件:    TalkRoomServer.java
 * 功能描述:    客户端代码
 */
public class TalkRoomClient extends Application {
    private TextArea ta = new TextArea();           //聊天记录框
    private TextField tf = new TextField();          //信息发送框
    private ComboBox<String> userList = new ComboBox<>();      //在线用户下拉列表

    //用户名称
    String name ;
    //与服务器端连接的Socket
    Socket socket ;

    @Override
    public void start(Stage primaryStage) {
        /**
         * 画登录界面，采用GridPane
         */
        GridPane mainPane = new GridPane() ;

        //设置面板及布局
        mainPane.setAlignment(Pos.CENTER) ;   //向中间靠齐
        mainPane.setHgap(10) ;      //节点的水平间距
        mainPane.setVgap(10) ;      //节点的垂直间距
        mainPane.setPadding(new Insets(5, 5, 5, 5)) ;

        //文本框
        Text text = new Text("Welcome") ;
        mainPane.setId("welcome-text");
        mainPane.add(text, 0, 0, 2, 1) ;

        //标签加上输入的文本域
        Label serviceName = new Label("SericeName: ") ;
        TextField tfForService = new TextField() ;
        mainPane.add(serviceName, 0, 1) ;
        mainPane.add(tfForService, 1, 1);

        //昵称加上输入的文本域
        Label inputName = new Label("Name: ") ;
        TextField tfForName = new TextField() ;
        mainPane.add(inputName, 0, 2) ;
        mainPane.add(tfForName, 1, 2) ;

        //按钮这行单独处理，用一个Hbox包装一下
        Button btForLogin = new Button("Login") ;
        HBox box = new HBox(10) ;
        box.getChildren().add(btForLogin) ;
        box.setAlignment(Pos.BOTTOM_RIGHT) ;        //靠向最右边
        //然后再加入主面板
        mainPane.add(box, 1, 4) ;


        //显示一下--将面板放入舞台,至于为什么清查阅相关资料,-----h
        Scene scene = new Scene(mainPane, 300, 200) ;
        primaryStage.setScene(scene) ;
        primaryStage.setTitle("Login") ;
        primaryStage.show() ;

        /**
         * 监听按钮事件，以更换舞台
         */
        //这里用lambda表达式，因为就算你写完整的继承事件接口即
        // EventHandle<ActionEvent>处理,也只是处理一个handle方法
        //所以还不如写lamda,因为handle()只有一个参数，所以event只是一个标识符
        // 代表只有一个参数.
        btForLogin.setOnAction(event -> {
            /**
             * 继续画需要切换的聊天界面图
             */
            Pane pane = new FlowPane() ;
            pane.setPadding(new Insets(20, 20, 20, 20));
            //设置文本域的属性
            ta.setEditable(false);      //不可编辑
            ta.setWrapText(true);       //自动换行
            pane.getChildren().add(new ScrollPane(ta)) ;

            HBox hBox = new HBox(20) ;
            //加入在线用户及输入文本框
            //getItems()方法返回一个选项列表
            userList.getItems().addAll("All", "asd") ;     //默认给所有人
            userList.setStyle("-fx-color: White") ;
            userList.setValue("All") ;
            tf.setAlignment(Pos.BOTTOM_LEFT) ;
            tf.setPrefColumnCount(30);
            hBox.getChildren().addAll(userList, tf) ;

            pane.getChildren().add(hBox) ;
            Scene charScene = new Scene(pane, 400, 300) ;
            primaryStage.setTitle("Chatting") ;
            primaryStage.setScene(charScene) ;
            primaryStage.show() ;



//=====================================后面暂时没写============
            //登陆之后,给成员name初始化
            this.name = tfForName.getText() ;
            String hostName = tfForService.getText() ;
            System.out.println(name);
            System.out.println("抱歉,　我还没有写逻辑代码..") ;
            /**
            //连接服务器
            try {
                this.socket = new Socket(hostName, 5210) ;

            } catch (Exception ex) {
                ex.printStackTrace() ;
            }
             **/

        }) ;
    }
}

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

---

---