仿微信聊天程序 - 08. 聊天窗口

本文是仿微信聊天程序专栏的第八篇文章，主要记录了【聊天窗口】的界面实现。

界面设计

聊天窗口是整个聊天程序的核心控件，比较复杂，大致可以分为上中下三个部分，上面显示用户昵称以及一些操作菜单，中间是聊天内容显示区域，下面的信息发送的区域，总体界面设计如下：

界面布局

根据界面设计的划分，将整个聊天窗口布局划分为上中下三个部分，中间使用WebView用于显示聊天内容，完整的fxml布局代码如下：

<StackPane prefHeight="610.0"
           prefWidth="546.0" stylesheets="@ChatMainController.css"
           xmlns:fx="http://javafx.com/fxml"
           fx:controller="michong.javafx.wx.view.chat.ChatMainController">
    <SplitPane dividerPositions="0.65" orientation="VERTICAL" styleClass="chat-main-pane">
        <items>
            <VBox>
                <children>
                    <HBox alignment="CENTER" prefHeight="40.0" styleClass="chat-main-menu">
                        <children>
                            <Label fx:id="nicknameLabel" styleClass="name-label"/>
                            <Pane HBox.hgrow="ALWAYS"/>
                            <MenuButton styleClass="chat-main-menu-more">
                                <items>
                                    <MenuItem text="清空" styleClass="chat-main-menu-item" onAction="#onClearClick"/>
                                    <MenuItem text="关闭" styleClass="chat-main-menu-item" onAction="#onCloseClick"/>
                                </items>
                            </MenuButton>
                        </children>
                        <padding>
                            <Insets left="20.0" right="5.0"/>
                        </padding>
                    </HBox>
                    <Separator styleClass="wx-separator"/>
                    <!--<Pane VBox.vgrow="ALWAYS"/>-->
                    <WebView fx:id="chatWebView" VBox.vgrow="ALWAYS"/>
                </children>
            </VBox>
            <VBox alignment="TOP_RIGHT" styleClass="chat-main-input">
                <children>
                    <HBox spacing="10.0">
                        <children>
                            <Button styleClass="face-button"/>
                            <Button styleClass="message-button"/>
                            <Pane HBox.hgrow="ALWAYS"/>
                            <Button styleClass="audio-button"/>
                            <Button styleClass="video-button"/>
                        </children>
                        <padding>
                            <Insets bottom="5.0" left="20.0" right="20.0" top="5.0"/>
                        </padding>
                    </HBox>
                    <StackPane VBox.vgrow="ALWAYS">
                        <children>
                            <TextArea fx:id="messageTextArea" wrapText="true"/>
                        </children>
                        <padding>
                            <Insets bottom="5.0" left="20.0" right="20.0" top="5.0"/>
                        </padding>
                    </StackPane>
                    <ButtonBar prefHeight="80.0">
                        <buttons>
                            <Button styleClass="wx-btn-send" text="发送(S)" onAction="#onSendClick"/>
                        </buttons>
                        <padding>
                            <Insets bottom="5.0" right="20.0" top="5.0"/>
                        </padding>
                    </ButtonBar>
                </children>
            </VBox>
        </items>
    </SplitPane>
</StackPane>

样式美化

跟其他界面一样，JavaFX默认提供的控件样式风格跟聊天程序并不搭，所以聊天窗口仍需要进行样式美化，完整的CSS代码如下：

.chat-main-pane {
  -fx-background-color: #fafafa;
  -fx-border-color: transparent;
}

.chat-main-pane .button {
  -fx-cursor: hand;
  -fx-background-color: transparent;
  -fx-border-color: transparent;
  -fx-pref-width: 30px;
  -fx-pref-height: 30px;
  -fx-background-size: 30px 30px;
}

.chat-main-menu {
  -fx-background-color: #fafafa;
}

.name-label {
  -fx-font-size: 20px;
  -fx-text-fill: black;
}

.chat-main-menu-more {
  -fx-cursor: hand;
  -fx-background-color: transparent;
  -fx-border-color: transparent;
  -fx-pref-width: 44px;
  -fx-pref-height: 30px;
  -fx-background-size: 44px 30px;
  -fx-background-image: url("/icon/more.png");
}
.chat-main-menu-item {
  -fx-padding: 5 0 5 5;
}
.chat-main-menu-item:hover,
.chat-main-menu-item:focused {
  -fx-cursor: hand;
  -fx-background-color: #dbd9d8;
}
.chat-main-menu-item:hover .label,
.chat-main-menu-item:focused .label {
  -fx-text-fill: black;
}

.separator .line {
  -fx-border-color: derive(#eee9e9, 20%);
  -fx-border-width: 1;
}

.chat-main-input > * {
  -fx-background-color: #ffffff;
}

.face-button {
  -fx-background-image: url("/icon/face_0.png");
}
.face-button:hover {
  -fx-background-image: url("/icon/face_1.png");
}
.message-button {
  -fx-background-image: url("/icon/message_0.png");
}
.message-button:hover {
  -fx-background-image: url("/icon/message_1.png");
}
.audio-button {
  -fx-background-image: url("/icon/audio_0.png");
}
.audio-button:hover {
  -fx-background-image: url("/icon/audio_0.png");
}
.video-button {
  -fx-background-image: url("/icon/video_0.png");
}
.video-button:hover {
  -fx-background-image: url("/icon/video_0.png");
}

.send-button {
  -fx-padding: 5px 10px;
  -fx-font-size: 12px;
  -fx-background-color: #f5f5f5;
}
.send-button:hover {
  -fx-cursor: hand;
  -fx-text-fill: #ffffff;
  -fx-background-color: #5cb85c;
  -fx-border-color: #4cae4c;
}
.text-area {
  -fx-font-size: 14px;
  -fx-padding: 0;
  -fx-cursor: default;
  -fx-background-color: #ffffff;
}
.text-area .content {
  -fx-cursor: text;
  -fx-background-color: #ffffff;
}
.text-area:focused .content {
  -fx-background-color: #ffffff;
}

逻辑控制

调整原来聊天列表的事件控制逻辑，当单击聊天列表项时显示聊天信息界面，这里只是静态显示，动态拉取聊天信息后续功能将继续完善，控制代码如下：

void initializeEvent() {
    chatListView.getSelectionModel().selectedItemProperty().addListener((obj, ov, nv) -> {
        if (Objects.nonNull(nv)) {
            Pane main = FXComponent.mainComponent();
            main.getChildren().clear();
            main.getChildren().add(FXComponent.chatMainComponent(nv.getId()));
        }
    });
}

数据填充

跟好友信息的处理方式类似，这里直接给出Controller的代码：

/**
 * @author michong
 */
public class ChatMainController implements UserDataController {
    public Label nicknameLabel;
    public WebView chatWebView;
    public TextArea messageTextArea;

    private Long contactsId;

    @Override
    public void initialize(Object data) {
        contactsId = (Long) data;
        initializeUI();
        initializeEvent();
        renderDebugData();
    }

    void initializeUI() {
    }

    void initializeEvent() {
    }

    void renderDebugData() {
        nicknameLabel.setText("WxID: " + contactsId);
    }

    public void onClearClick(ActionEvent actionEvent) {
    }

    public void onCloseClick(ActionEvent actionEvent) {
    }

    public void onSendClick(ActionEvent actionEvent) {
    }
}

更多细节，可以查看第7节【好友信息】的实现。