用wxPython创建GUI应用程序展示NASA图片(第二部分)

NASA搜索应用的创建

快速原型是一种快速创建小而实用的应用程序的方法,无需花费大量时间实现所有部件,而是在应用中自上而下依次添加。相较于创建一系列嵌套的sizer,这种方法效率更高。

首先,让我们创建一个名为nasa_search_ui.py的脚本:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里将导入一些新包。第一个是请求包,使用方便,基于Python实现文件下载和Internet相关操作,许多开发人员认为它比Python自带的urllib更好用。不过它需要安装才能使用,同时还需要安装ObjectListView。

如下是使用pip的安装方法:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

另外,需要导入urllib.parse,用于编码URL参数。最后,DownloadDialog是一个用于创建对话的类,用于NASA图像的下载。

由于在应用中将使用ObjectListView,因此需要一个类来表示该窗口部件中的对象:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

Result类用于保存构成ObjectListView中每行的数据。Item参数是查询响应JSON的一部分。您可以根据需求解析相关信息。

在这种情况下,需要如下字段:

  • 标题
  • 图片位置
  • NASA内部ID
  • 照片描述
  • 摄影师名称
  • 图像创建时间
  • 缩略图URL

其中一些项并不总是包含在JSON响应中,在这些情况下,将通过get()方法返回空字符串。

下面将开始UI的实现:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

MainPanel是程序的主体。这里,您可以处理一些内务工作并创建一个search_results,以便用户搜索时保存Result对象列表。您还可以设置缩略图的max_size,要使用的字体,sizer以及标准路径等。

下面将如下代码加入__init__()中:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里,使用wx.StaticText为应用程序创建标题标签。然后,添加了wx.SearchCtrl,其与wx.TextCtrl非常类似,只不过内置了特殊的按钮。此外还将搜索按钮的单击事件(EVT_SEARCHCTRL_SEARCH_BTN)和EVT_TEXT_ENTER绑定到搜索相关的事件处理程序(on_search)。

接下来添加搜索结果部件:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这段代码设置ObjectListView的方式和我的其他一些文章中的方式非常相似。您可以通过调用SetEmptyListMsg()来自定义空消息,还可以将窗口部件绑定到EVT_LIST_ITEM_SELECTED,以便用户在选择搜索结果时执行某些操作。

下面将其余代码加入__init__()中:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

最后几行代码添加了标题文本控件和图像窗口部件,这些部件将在选择结果时更新。您还可以添加下载按钮,以允许用户选择要下载图像的大小。NASA通常会提供从缩略图到原始TIFF图之间的几种不同版本的图像。

要查看的首个事件处理程序是on_download():

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里,通过调用GetSelectedObject()来获取用户的选择。如果用户未选择任何内容,则退出此方法。此外,如果用户选择了某个条目,则实例化DownloadDialog并将其展示给用户以允许他们下载某些内容。

下面将学习如何实现搜索:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里,on_search()事件将获取用户输入的字符串或者返回一个空字符串。假设用户实际输入了要搜索的内容,则使用NASA的常规搜索查询,q并对media_type进行硬编码以实现成像。之后,将查询编码为格式正确的URL,并通过requests.get()来请求JSON响应。

接下来,将尝试循环搜索结果。请注意,如果不返回任何数据,代码将运行失败并抛出异常。如果返回数据,可以对其进行解析以获取所需信息。

您将跳过未设置标题字段的项目。否则,将创建一个Result对象并将其添加到search_results列表中。在方法结束时,需要通知UI更新搜索结果。

在使用该函数之前,需要创建on_selection():

用wxPython创建GUI应用程序展示NASA图片(第二部分)

您将再次获得所选条目,但是这次采用选择标题文本进行选择并更新标题文本控制。然后检查是否存在缩略图并更新(如果有)。如果无缩略图,则设置为空图像,因为您不希望它继续显示之前选择的图像。

下一个要创建的方法是update_image():

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里,update_image()接收URL作为其唯一的参数。它接收此URL并拆分文件名。然后通过计算机的临时目录创建一个新的下载位置。接着下载图像并检查文件是否存储正确。如果是,则使用设置的max_size加载缩略图;否则将设置为空白图像。

最后几行代码Refresh()和Layout()面板,使得部件能正确显示。

最后,您需要创建最后一个方法:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里,将创建框架,设置标题和初始大小并添加面板,之后显示框架。

主UI的外观如下:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

下面让我们一起学习如何实现下载对话框吧!

下载对话框

下载对话框将允许用户下载一个或多个图像,每张图像至少存在两个甚至五六个版本。

先看一下代码的前几行:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里将再次导入requests并在保存图像时设置wildcard。

下面将创建__init__():

用wxPython创建GUI应用程序展示NASA图片(第二部分)

在此示例中,您将创建StandardPaths的新引用并添加wx.ListBox。列表框将包含可下载图像的变量。如果结果太多无法同时显示,它还会自动添加滚动条。通过传入selection对象调用get_image_urls以获取URL列表,然后遍历urls并提取名称中包含jpg的urls。这将导致遗漏其他图像文件类型,例如PNG或TIFF。

因此可以对此代码进行改进。过滤URL的原因在于排除非图像URL,以免给用户带来困惑。

最后还需要添加一个“保存”按钮,当然也可以添加“取消”按钮,但是由于对话框顶部已经包含退出按钮,所以没必要。

下面来了解以下get_image_urls()的作用:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

当用户按下“保存”按钮时,将激活此事件处理程序。当用户尝试保存某些内容而不在列表框中选择条目时,将返回-1。如果发生此类情况,将通过MessageDialog告知用户进行选择。当用户选择某些内容时,将展示一个wx.FileDialog,允许用户选择保存文件的位置以及调用内容。

如下是save()方法:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里,您将再次使用requests下载图像。注意,这里并未对用户是否添加扩展名做出检查,请使用右侧扩展名。如果可以的话,请自行添加。

当文件下载完成后,向用户展示一条提示信息。

如果发生异常,您也可以显示一个对话框通知用户!

对话框的样式如下:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

接下来让我们添加一些新功能吧!

添加高级搜索

您可以使用几个字段来缩小查询范围。但是除非用户确实想使用这些过滤器,否则尽量不要用此来扰乱用户界面的设计。为了解决这个问题,可以添加“高级搜索”选项。

添加这个功能需要重新组织代码,因此这里将nasa_search_ui.py和download_dialog.py复制到名为version_2的新文件夹中。

接下来将nasa_search_ui.py重命名为main.py作为程序的入口。为了使程序更加模块化,可以将搜索结果提取到自己的类中,并在单独的类中进行高级搜索。这意味最终将需要三个面板:

  • 主面板
  • 搜索结果面板
  • 高级搜索面板

实现后的对话框样式如下:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

接下来将分别讨论这些问题。

main.py脚本

main模块是应用程序的入口,是为了启动应用程序而运行的代码。如果要将应用程序绑定到可执行文件中,也可以使用它。

如下是main模块:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这个示例导入了两个与搜索相关的面板:

  • AdvancedSearch
  • RegularSearch

它还使用pubsub订阅更新主题。

让我们探索一下__init__()中包含的其他内容:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

这里,可以像之前那般为页面添加标题和搜索部件,还可以添加新的“高级搜索”按钮,并使用新的sizer来包含搜索部件和按钮。然后将sizer添加到主sizer中。

接下来让我们添加面板:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

在此示例中,将实例化RegularSearch和AdvancedSearch面板。由于RegularSearch是默认值,因此在启动时隐藏了用户的AdvancedSearch。

现在更新on_search():

用wxPython创建GUI应用程序展示NASA图片(第二部分)

当用户按下“输入/返回”时将调用on_search()。如果用户在搜索框中输入搜索条件,则将构建查询,并通过pubsub发送。

当用户按下Advanced Search按钮,会发生什么呢?

用wxPython创建GUI应用程序展示NASA图片(第二部分)

当触发on_advanced_search()时,会隐藏搜索部件,常规搜索面板以及高级搜索按钮。接下来,将显示高级搜索面板并在main_sizer上调用Layout(),因此面板将会进行切换并调整以适应框架大小。

最后需要创建update_ui()方法:

用wxPython创建GUI应用程序展示NASA图片(第二部分)

当用户执行Advanced Search时,将调用update_ui()方法,此方法由pubsub调用。它会执行on_advanced_search(),取消显示高级搜索面板时隐藏的所有窗口部件,当然它也可以隐藏高级搜索面板。

框架代码与之前相同,因此这里并未展示。

下面让我们接着学习如何实现常规搜索面板吧!

英文原文:https://www.blog.pythonlibrary.org/2019/04/18/creating-a-gui-application-for-nasas-api-with-wxpython/ 译者:我是昵称耶~

相关推荐