本文是仿微信聊天程序專欄的第八篇文章，主要記錄了【聊天窗口】的界面實現。

界面設計

聊天窗口是整個聊天程序的核心控件，比較復雜，大致可以分為上中下三個部分，上面顯示用戶昵稱以及一些操作菜單，中間是聊天內容顯示區域，下面的信息發送的區域，總體界面設計如下：

界面布局

根據界面設計的劃分，將整個聊天窗口布局劃分為上中下三個部分，中間使用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節【好友信息】的實現。