Java curriculum design _ Chat _ personal report

1. Course Design Team blog link

JAVA curriculum design team blog - Chat

2. The individual responsible for the module or mission statement

2.1 Individual responsible for module

• JavaFx use graphical interface design;
• And database interaction implement login, registration, access to chat and personal information changes.
• Use css landscaping JavaFx interface.

2.2 mission statement

• First, login and registration interface design, and set the appropriate button action until after the database molding, can certainly interact implement page login and account registration.
• Furthermore design simple personal interface design corresponding component modules need to use, we assembled a group chat interface.
• Personal information interface design and modify personal information interface, interact with the database, modify and implement the storage of personal information.
• Pertains friends redesign assembly, and inserted into the buddy list, and the corresponding chat box design, and used for subsequent calls in real time is inserted into the chat window.

3. Record your own code to submit screenshots

4. responsible for their own module or task details

4.1 Login button code:

• Analysis: First connect to the database, the database to determine whether the method exists, if it exists and then determine whether the account is already online, online if you log in successfully, the account id and the database is set to online, the next account if then log in to the account, it has given the online prompts. If the number is inconsistent with the corresponding password, the system outputs and re-enter.

4.2 automatically generate a unique account registration:

4.2.1 Register button listener Code

• Analysis: First, fill in the information to obtain registration box, enter the password twice when found inconsistencies or password box is empty, pop an error message and clear the password box allows users to re-enter. If not found above, is called automatically generate a unique account code, generates a unique id number, the pop transmitted to the user account information.

4.2.2 automatically generate a unique account code is:

• Analysis: First generate a random five-digit random number id like Random, and then link the database to determine whether the id number already exists, if the present, then regenerate a id, or exit the loop generates account, and returns the id number.

4.2.3 chat message generating block:

• 分析：因为想到在进行聊天时经常需要生成一个消息框，所以专门写了一个生成带有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模式的框架。