扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
结合 uml 所学和 Javafx 从建模到实现一个子功能模块 —— 日程管理。新手上路，类图到代码实现的过程还是很曲折但所幸收获颇丰，记录一下学习心得。
创新互联网站建设提供从项目策划、软件开发，软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务，主营业务为成都网站设计、做网站，成都app开发以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。创新互联深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
JAVAFX里面没有封装日历控件，找了些项目源码做参照肝了一个，不过为了简化分析的过程，不会详细写其中业务逻辑。
总的来说，从建模带代码实现的功能完成了90%，日程列表和日历的通信没写，预期效果是如果有新增的日程，日历上相应的日历块会有 marked 的标记。这一块按照我的想法写代码会变得很乱，也是建模过程中没有认真考虑的点。
日程主要是帮助用户查看和管理日常事务，用户可以记录待办事件并且设置提醒时间，有助于管理时间和提高工作效率。
而作为成绩管理系统学生界面的一个子功能模块，除了帮助学生管理课程和学习任务，它还需要能自动导入课程考试信息，便于学生规划学习进度。
参考老师发的资料，从用例图如何到类图，观点不一。有从活动图 ——> 类图以及从详细的用例描述中抽象出类图，两种都参考尝试了一下。
| 用例编号 | S1.1 |
| 用例名称 | 查看日程详细信息 |
| 参与者 | 学生 |
| 触发条件 | 点击列表中具体的一项日程 |
| 前置条件 | 学生已经登录，并且在日程界面 |
| 后置条件 | 显示目标日程的详细信息 |
| 正常流程 | 1. 点击列表中目标日程，显示日程信息 |
| 扩展流程 | 1. 编辑目标日程，修改事件信息 2. 删除目标日程 |
| 特殊要求 | 无 |
| 用例编号 | S1.2 |
| 用例名称 | 新增日程 |
| 参与者 | 学生 |
| 触发条件 | 点击“新增日程”按钮 |
| 前置条件 | 学生已经登录，并且在日程界面 |
| 后置条件 | 添加了新的日程到日历，对应日期格显示 marked |
| 正常流程 | 1. 点击“新增日程”按钮，打开日程创建面板 2. 填写事件，设置时间段 3. 选择是否设置提醒时间 4. 点击“提交”按钮 |
| 扩展流程 | 1. 取消创建日程 |
| 特殊要求 | 无 |
| 用例编号 | S1.3 |
| 用例名称 | 查看考试安排 |
| 参与者 | 学生 |
| 触发条件 | 点击“查看考试安排”按钮 |
| 前置条件 | 学生已经登录，并且在日程界面 |
| 后置条件 | 显示显示本学期所有考试安排 |
| 正常流程 | 1. 点击“查看考试安排”按钮，显示考试安排面板 |
| 扩展流程 | 1. 添加提醒 |
| 特殊要求 | 无 |
较为倾向于从用例描述中抽象出类，老师发的资料中也写到，用例描述占据着皇后的位置，而三王一后中没有出现活动图。我在写完用例描述后对程序也已经有了轮廓。
学习博客【深入浅出UML类图】
从用例描述中，抽象出所有的类。我们先提取实体类，有日程类，以及填充日历的日期格类。边界类这里就是界面类，有日程主界面类，添加日程的界面类，两个界面类分别都有控制类实现相关的业务逻辑。界面类里面的部件主要是日历类，日程列表类，考试列表类。
先把实体类的属性写好，日程类我们很容易可以知道，有日程名称，开始和截止时间，提醒时间。用户在填写事件时，可能还有一些额外的信息需要提醒自己，那么就添加一个事件备注属性。
日期格类应该包含的是当前格子表示的日期，因为我们还可以直接看到这个格子是否有日程，应该是抽象为一个状态。这里我预备用布尔型 isMarked 来表示。（当时写的时候还加了Mark属性，作为如果存在日程的标记，多余了。
然后进一步思考类之间的关系，先看聚合关系，ScheduleList 和 ExamList 都是由 Schedule 聚合而来，但 ExamList 属于特殊的日程，它在这里只能查看不能修改。日期格和日历Calendar也是聚合关系，我的想法是按月显示，那关系就是一个日历中由35个日期格。
考试列表，日程列表和日历都属于主界面的部件。最后得到类图如下
主界面我直接用的做平时成绩管理系统的界面稍加改动，已经有基本布局和css渲染。添加新日程界面根据用例描述，就是有对日程基本信息的编辑，然后确认取消按键。
下面是静态初始界面，还没有实现任何功能只是个UI。
public class ScheduleStage extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("resource/ScheduleStage.fxml"));
stage.setTitle("Student Schedule");
stage.setScene(new Scene(root, 1080, 720));
stage.setResizable(false);
stage.centerOnScreen();
stage.show();
}
}
日历是用GirdPane写的，每一个日期格都继承AnchorPane，便于在内部进行布局
ScheduleList 有 Schedule 的聚合，初始化我们从数据库导入数据（因为用到数据库的地方较少，就不分离出来的（绝不是懒:/，删除和修改的方法这里暂时不写。
ExamList 直接从数据库初始化数据之后不再会变化，所以它包含的应该是 final static 的 Schedule 数组，与上面类似就已经完成了。
日历类其中涉及细节较多，这里把它当作已经封装好的日历控件FXCalendar。根据类图，我们要完成的时在按上月和下月的按钮时，日历要做出变化。
两个按钮触发的行为实现代码
@FXML
void onButtonLastMonthClicked(ActionEvent event){
LocalDateTime now = LocalDateTime.of(Integer.parseInt(labelYear.getText()), Month.valueOf(labelMonth.getText()), 1, 0, 0, 0);
now = now.minusMonths(1);
labelYear.setText(String.valueOf(now.getYear()));
labelMonth.setText(String.valueOf(now.getMonth()));
changeCalendar(now.getYear(), String.valueOf(labelMonth.getText()));
}
@FXML
void onButtonNextMonthClicked(ActionEvent event){
LocalDateTime now = LocalDateTime.of(Integer.parseInt(labelYear.getText()), Month.valueOf(labelMonth.getText()), 1, 0, 0, 0);
now = now.plusMonths(1);
labelYear.setText(String.valueOf(now.getYear()));
labelMonth.setText(String.valueOf(now.getMonth()));
changeCalendar(now.getYear(), String.valueOf(labelMonth.getText()));
}
可以看到上面调用了 changeCalendar() 方法来实现日历的变化，下面是 changeCalendar() 代码实现
private void changeCalendar(int year, String month){
DateTimeFormatter formatter = new DateTimeFormatterBuilder()
.parseCaseInsensitive()
.appendPattern("yyyy MMMM")
.toFormatter(Locale.ENGLISH);
populateDate(YearMonth.parse(year + " " + month, formatter));
selectedMonth = month;
}
在主界面按下添加日程按键是触发新增日程界面信息，每次都会产生一个新的界面，一个主界面可以有多个添加日程界面。
/*
* 添加新的日程
* */
@FXML
void onButtonAddNewClicked(ActionEvent event) {
Stage addNewStage = new Stage();
Parent root = null;
try {
root = FXMLLoader.load(getClass().getResource("resource/AddNewSchedule.fxml"));
} catch (IOException e) {
e.printStackTrace();
}
addNewStage.initStyle(StageStyle.UNDECORATED);
addNewStage.setTitle("Student");
addNewStage.setScene(new Scene(root, 600, 450));
addNewStage.centerOnScreen();
addNewStage.show();
}
我们从类图中得知，主要有填入事件信息，是否需要提醒，确认添加和取消操作。（这里在编写的时候就发现，类图的不足之处，打开提醒应该是由控制类来完成。
填入事件信息是在界面中完成的
确认添加事件 getNewScheduleButton()
/*
* 将新增的事件放入Schedule
* */
@FXML
void getNewScheduleButton(ActionEvent event) {
String name = itemName.getText();
String comment = itemRemark.getText();
DateTimeFormatter dtf = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm");
String btime = beginDate.getValue() + " " + beginTime.getValue();
String etime = endDate.getValue() + " " + endTime.getValue();
newSchedule = new Schedule(name, comment, LocalDateTime.parse(btime, dtf), LocalDateTime.parse(etime, dtf));
if(isRemindTogButton.isSelected()) {
newSchedule.setRemind(true);
newSchedule.setReminderTime(LocalDateTime.parse(remindDate.getValue() + " " + remindTime.getValue(), dtf));
}
addNew(newSchedule);
closeAddNewStage(event);
}
确认和取消都会触发窗口的关闭，而窗口是在主界面控制类生成的，在这里需要获取当前按钮所在窗口来关闭
@FXML
void closeAddNewStage(ActionEvent event) {
Stage stage = (Stage) closeButton.getScene().getWindow();
stage.close();
}
是否提醒
/*
* 是否打开提醒
* */
private JFXTimePicker remindTime = new JFXTimePicker();
private JFXDatePicker remindDate = new JFXDatePicker();
@FXML
void isReminding(ActionEvent event) {
boolean isSelected = isRemindTogButton.isSelected();
if(isSelected) {
remindDate.setDefaultColor(Paint.valueOf("#0442bf"));
remindTime.setDefaultColor(Paint.valueOf("#0442bf"));
remindDate.setPrefSize(153, 23);
remindTime.setPrefSize(153, 23);
remindTime.setTranslateY(15);
remindDate.setTranslateY(15);
remindHBox.getChildren().addAll(remindDate, remindTime);
}
else {
remindHBox.getChildren().remove(1, 3);
}
}
到这里，添加日程界面和控制类都完成了
deleteSchedule(in schedule:Schedule),showScheduleDetail(schedule:Schedule)这里有个十分迷惑的小bug，虽然处理了。但还是不知道为什么，希望有大佬解惑
ClickedID是在监听日程列表中被鼠标选中的事件编号。
/*
* 删除选中日程
* */
@FXML
void deleteButtonOnAction(ActionEvent event) {
System.out.println(clickedId);
if(clickedId == -1) return;
observableList.remove(clickedId);
// 十分神奇的bug!!!在observableList移除最后一个元素后，clickedId自动从0变成-1，故加下面这句
if(clickedId == -1) clickedId++;
System.out.println(clickedId);
delete(clickedId);
}
查看选中日程时，生成对话框来提示选中日程的所有细节。
/*
* 显示选择日程细节
* */
@FXML
void showDetailButtonOnAction(ActionEvent event) {
if(clickedId == -1) return;
Schedule schedule = list.get(clickedId);
JFXAlert alert = new JFXAlert(showDetailButton.getScene().getWindow());
alert.initModality(Modality.APPLICATION_MODAL);
alert.setOverlayClose(false);
JFXDialogLayout layout = new JFXDialogLayout();
Label label = new Label(schedule.getItemName());
label.setFont(new Font("Cambria", 32));
layout.setHeading(label);
Label newContent = new Label("备注: " + schedule.getItemRemark()
+ "\n开始时间: " + schedule.getStartDate()
+ "\n结束时间: " + schedule.getEndDate()
+ "\n提醒时间: " + schedule.getReminderTime());
newContent.setFont(new Font("Cambria", 16));
layout.setBody(newContent);
JFXButton closeButton = new JFXButton("确 认");
closeButton.setPrefSize(150,55);
closeButton.setFont(new Font("Cambria", 16));
closeButton.getStyleClass().add("dialog-accept");
closeButton.setOnAction(e -> alert.hideWithAnimation());
layout.setActions(closeButton);
alert.setContent(layout);
alert.show();
}
list 做出的相应操作
从类图到代码仍旧花了不少时间在不断思考如何组织和实现，一度想不管结构全部累在一起，这里类图起了一个很大的规范作用。它在设计阶段，规范好整个框架，让我先对业务流程有了大致的轮廓。如果感觉有错误，可以在类图阶段就修改，而不是等到实现时修改代码，减小犯错成本。
一个是命名规范，当时设计类图命名比较草率，导致在代码累积下来后不能见名知意，所以重构了代码并且修改类图中类和方法的命名；
第二个是方法的参数和返回值，类图设计时我对每个方法都写了形参和返回值，但具体实现时大概率会发生变化，比如删除日程那只需要传递日程ID，而不是把Schedule传过去；
其出现两个问题，其一是在根据类图实现代码时发现有些细节没有考虑到，需要在实现时再花时间来设计。其二是根据类图的设计无从下手，有我Java功底尚浅的原因，但也可能是因为设计的不合理。
类图设计的快，可能会有细节被忽略；类图设计的慢，不断打磨精细，如果后续要修改，可能因为投入了较多的时间成本不想修改。
这次从建模到实现，收获很大，真的感受到一个好的建模可以让整个功能实现更加高效。我的建模可能还很不规范，之后还是多实践和总结！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网