1. 團隊課程設計博客鏈接
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模式的框架。