软工大作业——多线程下载(三)

2022-03-14

这篇博客主要是关于这个软件的ui设计的,很简洁,是一些很基础的东西

大概就用这篇水货作为这个大作业项目的博客结尾了

其实我觉得command比ui好用的多,至少在下载这件事上

一、根据psp表格做出预估

表格中实际耗时由需求完成后进行的统计

PSP 2.1表格

PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟)
Planning 计划 20 30
· Estimate · 估计这个任务需要多少时间 10 10
Development 开发 650 540
· Analysis · 需求分析 (包括学习新技术) 60 60
· Design Spec · 生成设计文档 60 40
· Design Review · 设计复审 (和同事审核设计文档) 30 30
· Coding Standard · 代码规范 (为目前的开发制定合适的规范) 20 20
· Design · 具体设计 60 70
· Coding · 具体编码 360 240
· Code Review · 代码复审 20 20
· Test · 测试(自我测试,修改代码,提交修改) 40 60
Reporting 报告 120 140
· Test Report · 测试报告 60 80
· Size Measurement · 计算工作量 20 20
· Postmortem & Process Improvement Plan · 事后总结, 并提出过程改进计划 40 40
  合计 790 710

二、思考与学习

​ 这次新增的需求如下所示:

第3阶段 用户界面

目前的下载助手只有命令行版本,使用起来不是很方便,可以给用户提供GUI(图形用户界面)。至少提供三个功能:

  • 添加下载链接:单个或多个、批量生成
  • 可自动从系统剪贴板得到下载链接
  • 下载设置:包括并发数、输出位置,并可保存设置信息,在下次启动应用时可自动加载

也就是说,要我们设计一个ui,将原来的麻烦的命令行转变为易于操作的图形界面

而内里对链接处理的逻辑和我们之前在命令行模式的处理是几乎相同的,只要迁移过来就可以了

三、内容实现

既然主要是做ui,我们还是说些和ui有关的内容

1、核心思路

​ 我们采用javafx的图形化技术制作我们的ui界面

​ 关于javafx的基础知识这里不作介绍,想要了解的请出门直奔金旭亮老师的ppt,详细又清晰

​ 首先根据我们的要求设计一下界面原型:

ui.drawio1

​ 我的想法是这样子的,在要现有需求的基础上,

  • 首先我们必须允许用户自行指定线程数和缓存位置,于是要有线程数和保存位置
  • 但是用户有可能懒得做这么多设置,考虑到方便性,这两个位置需要有默认值
  • 同时我们允许用户同时输入多个链接,那么我们的链接就需要一个Area文本框,同时支持从剪贴板获取
  • 我们允许用户从文件读取链接或者使用torrent文件,我们还要有个输入文件框
  • 为了方便用户使用,我们的文件选择都允许调用资源管理器,也允许手动输入
  • 如果勾选生成链接,我们会在后台尝试下载与输入类似的链接
  • 为了使用户有下载的实质感,我们还需要有速度和进度的显示

2、具体实现

(1)界面设计

​ 得益于SceneBuilder的强大功能,我们可以直接通过拖动、双击等图形化的方式来设计这个图形化界面,并自动生成对应的fxml文档,可以看到,我们通过拖放UI控件,就可以简单组合出我们要的图形界面,最终界面如下所示:

image-20220211154338058

(2)文件选择

​ 这是javafx提供的文件选择器,使用非常简单

​ 我在本软件中分别用到了 FileChooser以及DirectoryChooser,分别用来选择输入的文件,和输出的文件夹

FileChooser中我们对输入文件的格式做出了限制,以防止用户的未知领域操作,txt输入链接,torrent文件输入种子文件:

FileChooser chooser = new FileChooser();
chooser.getExtensionFilters().addAll(
	new FileChooser.ExtensionFilter("Txt", "*.txt"),
	new FileChooser.ExtensionFilter("Torrent", "*.torrent"));
File file = chooser.showOpenDialog(root.getScene().getWindow());
if(file != null) {
	inputFile = file.getAbsolutePath();
}
logger.info("set input path: " + inputFile);
inputPos.setText(inputFile);

这里用DirectoryChooser选择我们要存储的文件夹:

DirectoryChooser chooser = new DirectoryChooser();
File dict = chooser.showDialog(root.getScene().getWindow());
if(dict != null) {
	outputDict = dict.getAbsolutePath();
}

logger.info("set output dictionary: " + outputDict);
savePos.setText(outputDict);

(3)从剪贴板获取

因为javafx的textArea提供了从剪贴板获取的方法,我们直接调用即可

四、总结

​ 这部分其实没啥东西,毕竟ui是糊出来的,基本上都是javafx的基本操作,看客有心的话可以去学习一下javafx,就知道这篇文章是水出来对付老师的了(×