Java課程設計_聊天室_我的報告

1. 團隊課程設計博客連接

JAVA團隊課程設計博客--聊天室

2. 我的負責模塊或任務說明

2.1 我的負責模塊

• 使用JavaFx進行圖形界面設計；
• 和數據庫交互實現登陸、註冊、聊天記錄存取和我的信息修改。
• 利用css美化JavaFx界面。

2.2 任務說明

• 首先設計登陸和註冊界面，並設置相應的按鈕動做，待數據庫成型後，能夠進行必定交互，實現頁面登陸和帳號註冊。
• 再者設計簡易我的界面，設計各模塊須要使用的相應的組件，組裝咱們的羣聊界面。
• 設計我的信息界面和修改我的信息界面，和數據庫交互，實現我的信息的存儲和修改。
• 再設計相關相關好友組件，並插入到好友列表中，以及設計相應的聊天框，並用於後續實時調用插入到聊天窗口中。

3. 本身的代碼提交記錄截圖

4. 本身負責模塊或任務詳細說明

4.1 登陸按鈕代碼：

• 分析：首先鏈接數據庫，判斷數據庫中是否存在該方法，若存在則再判斷該帳號是否已是在線狀態，若是爲在線則登陸成功，並將數據庫中該id帳號設置成在線，則下一個帳戶若是再登陸該帳號，則給出已在線提示。若是號碼密碼對應不一致，則輸出提示並從新輸入。

4.2 註冊時自動生成一個惟一的帳號：

4.2.1 註冊按鈕監聽器代碼

• 分析：首先獲取註冊框中的填寫信息，當發現兩次密碼輸入不一致或密碼框中爲空，則彈窗提示錯誤信息並清空密碼框讓用戶從新填寫。若未發現以上狀況，則調用自動生成惟一帳號的代碼，生成一個惟一的id號，彈窗將帳號信息傳輸給用戶。

4.2.2 自動生成一個惟一的帳號代碼：

• 分析：先用隨機類Random生成一個隨機的五位數id號，而後連接數據庫判斷該id號是否已經存在，若以存在，則從新生成一個id，不然退出生成帳號循環，並返回該id號。

4.2.3 生成聊天信息框：

• 分析：由於想到在進行聊天時常常須要生成一個消息框，因此專門寫了一個生成帶有id號和消息框的有排版規則的。先生成一個VBox(垂直佈局)，並將並將傳入方法中的消息分裝在TextArea組件中，根據消息框中的內容消息調整TextArea組件的寬高，並將存id的Label組件和TextArea組件加到VBox上，當判斷jud等於1時，即爲我的信息，設置佈局靠右顯示，不然靠左顯示。最後返回VBox。

4.3 設置拖拽窗口的監聽器

• 分析：經過設置拖拽監聽器來計算實時的頂層容器stage位置，並實時更新stage位置，來實現拖拽的效果。經過外部傳入一個Node的一個根結點，能夠實現經過計算根結點的位置來實時跟新根結點所帶的總體的拖拽位置。

4.4 界面設計展現：

• 登陸框

• 註冊框

• 羣聊界面

• 我的信息界面：

4.4.1 這裏給出一個佈局初始化的代碼：

/**
     * 初始化界面各組件的位置信息，大小
     */
    private void initInterface() {
        // 好友列表
        friendsListView = new ListView<Label>(friends);
        /**
         * 羣聊界面的佈局和組件
         */
        chatPane = new Pane();

        chatPane.setPrefHeight(750);
        chatPane.setPrefWidth(800);
        chatPane.setLayoutX(200);
        chatPane.setLayoutY(50);

        chatBoxListView.setPrefWidth(800);
        chatBoxListView.setPrefHeight(600);
        chatBoxListView.setLayoutX(0);
        chatBoxListView.setLayoutY(0);

        messageEditingTextArea.setPrefWidth(800);
        messageEditingTextArea.setPrefHeight(150);
        messageEditingTextArea.setLayoutX(0);
        messageEditingTextArea.setLayoutY(600);
        messageEditingTextArea.setWrapText(true);

        sendOutButton.setLayoutX(730);
        sendOutButton.setLayoutY(700);

        closeLabel.setLayoutX(970);
        closeLabel.setLayoutY(0);

        minimizeLabel.setLayoutX(940);
        minimizeLabel.setLayoutY(0);

        chatPane.getChildren().addAll(messageEditingTextArea, chatBoxListView, sendOutButton);

        friendsListView.setLayoutX(0);
        friendsListView.setLayoutY(50);
        friendsListView.setPrefWidth(200);
        friendsListView.setPrefHeight(760);

        menuBar.setLayoutX(5);
        menuBar.setLayoutY(5);
        personalMenu.getItems().addAll(myInformationMenuItem, switchAccountMenuItem, new SeparatorMenuItem(), exitAccountMenuItem);
        menuBar.getMenus().add(personalMenu);


        anchorPane.getChildren().addAll(friendsListView, menuBar, closeLabel, minimizeLabel);
        anchorPane.getChildren().add(chatPane);
    }

4.5 CSS 美化代碼

.root {
    -fx-background-color: linear-gradient(#518acb, #51bfff);
}

.menu-bar{
    -fx-background-color: linear-gradient(#518acb, #51bfff);
}

.text-area {
    -fx-text-fill: linear-gradient(#000000, #120008); /*字體顏色*/
    -fx-background-color: linear-gradient(#6edfff, #6edfff);
    -fx-highlight-text-fill: linear-gradient(#291b11, #401d1c);
}

.text-area .scroll-pane .content {
    -fx-background-color: lightblue;
}

.button {
    -fx-background-color: linear-gradient(to right, #1cfffa, #4698ff);
}
-label {
    -fx-background-color: linear-gradient(to right, #61a2b1, #ff1309);
}

.list-view .scroll-bar:vertical,
.list-view .scroll-bar:horizontal{
    -fx-opacity: 0;
    -fx-padding: -7;
}

• root設置的是根結點即Scene的背景顏色。
• TextArea設置了字體顏色和背景顏色。
• 設置button和label背景爲漸變色。
• 最後設置了ListView 的相關垂直滾動條的樣式。

5. 課程設計感想

• 由於此次課程設計是一個團隊的課程設計，因此在和隊員模塊交互和結合上顯得異常重要，也算在團隊開發中有了一點經驗，之後在進行團隊項目開發前，不只要有明確的分工，還要進行定時的討論和交互處理，這樣到後面的實現就不會顯得那麼的尷尬，會浪費不少時間在結合代碼上。
• 再者此次也算是我第一次比較較爲具體的寫GUI方面的代碼，由於以前都是很基礎的入門，至關多的組件的使用都不懂，因此在規劃和學習上花了很多的時間。固然界面的全部的代碼都是經過本身的設計後一個個計算並敲出來的，相對於使用Scene Builder自動生成來講，不言而喻速度上有不少欠缺，以致於到後期有一些後端已經完成的代碼沒法在前端展現和實現交互。因此利用此次學習JavaFx的經驗，繼續深刻學習javaFx的相關界面設計，相信觸類旁通，會爲其餘的頁面設計的學習產生很好的影響。
• 雖然說最後的界面設計出來的效果也並不理想，可是學習了JavaFx仍是頗有成就感的。
• 我的展望：後續但願能以這次UI設計爲鑑，爲後續界面設計開啓新篇章，可以優化UI界面的加載速度，且繼續學習javaFx相關知識，使用FXML和FxController結合實現MVC模式的框架。