Javaのカリキュラムの設計_チャット_個人的なレポート

1.コースのデザインチームのブログのリンク

JAVAカリキュラムの設計チームのブログ - チャット

2.モジュールやミッションステートメントの個々の責任

2.1モジュールの責任者

• JavaFXのは、グラフィカルなインターフェイスのデザインを使用します。
• そして、データベースとの対話は、ログイン、登録、チャットへのアクセスや個人情報の変更を実装します。
• CSS造園JavaFXのインターフェースを使用してください。

2.2ミッションステートメント

• まず、ログインと登録インタフェースの設計、およびデータベース成形後まで、適切なボタンアクションを設定するには、確かに相互作用ページのログインやアカウント登録を実装することができます。
• さらに、デザインに対応する部品のモジュールが使用する必要があり、単純な個人的なインターフェースを設計、我々はグループチャットインターフェイスを組み立てました。
• 個人情報インターフェイスのデザインと、データベースとの個人情報インターフェイス、相互作用を修正、変更および個人情報の保存を実装します。
• 関係の友人は、アセンブリ再設計、およびバディリストに挿入され、リアルタイムで後続の呼び出しのために使用される対応するチャットボックスの設計、およびチャットウィンドウに挿入されています。

3.スクリーンショットを提出するために、独自のコードを記録

自分のモジュールまたはタスクの詳細については責任を負う4

4.1ログインボタンコード：

• 分析：あなたは正常にログインした場合、最初にデータベースに接続し、データベースがオンライン、それが存在する場合の方法は、存在するかどうかを確認してからアカウントがすでにオンラインであるかどうかを判断するために、アカウントIDとデータベースは、次のアカウントであれば、オンラインに設定されていますその後、アカウントにログインし、それがオンラインプロンプトを与えています。番号は、対応するパスワードと矛盾している場合は、システム出力と再入力してください。

4.2自動的に一意のアカウント登録を生成します。

4.2.1コードのリスナー登録ボタン

• 分析：まず、情報を入力は、登録ボックスを取得した不整合やパスワードボックスが空の場合、パスワードを2回入力すると、エラーメッセージがポップアップし、パスワードボックスをクリアするには、ユーザーが再入力することができます。上記見つからない場合、自動的に一意のアカウントコードを生成呼ばれ、一意のID番号、ユーザアカウント情報へ送信ポップを生成します。

4.2.2は、自動的に一意のアカウントコードを生成します：

• 分析：存在する場合に第1のランダムのようなランダムな5桁の乱数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模式的框架。