一个软件的 UI 界面是非常重要的，这是软件与用户交互的接口，软件功能即使再强大，但如果没有清晰的 UI 界面，那也发挥不出软件的功能，使得用户体会不到软件的优势。今天痞子衡给大家介绍 pzh-py-com 的界面构建过程。
一、界面设计简图
在真正进入代码设计 pzh-py-com 界面前，首先应该在纸上画一个界面草图，确定 pzh-py-com 界面应该有哪些元素构成，这些元素分别位于界面上什么位置。下面是痞子衡画的 pzh-py-com 的界面简图，界面主要包括三大部分：接收区、配置区、发送区，接收区用于显示从串口接收到的数据；配置区用于配置串口参数；发送区用于编辑要从串口发送出去的数据。
二、界面设计 wxPython组件图
有了 pzh-py-com 的界面设计简图指导，下一步需要将设计简图解析成如下的 wxPython 组件图，将简图里的元素转换成 wxPython 里的真实组件。这一步需要配合查阅 wxPython 相关手册，了解 wxPython 有哪些组件。
有一个地方需要特别提醒的是，wxWrapSizer 里的控件是从左到右自上而下排列的，有的时候为了排版，会故意插入一些无效的 wxStaticText 来占位，下图中便用了 4 个占位的 wxStaticText(浅色框表示)。
三、在 wxFormBuilder 里创作
有了 pzh-py-com 的界面设计 wxPython 组件图，下面便可以在 wxFormBuilder 里照样子创作出 pzh-py-com 的真正界面了。关于 wxFormBuilder 的使用可参考痞子衡另一篇文章 极易上手的可视化 wxPython GUI构建工具(wxFormBuilder)。
四、使用生成的 Python 代码
将 wxFormBuilder 生成的 python 代码保存为 win.py 文件(其中 Frame class 名为 com_win)，并存放于 pzh-py-comsrc 目录下，此时需要另外新建一个名为 main 的主函数文件，并放在 pzh-py-comsrc 目录下。其中 main 文件内容如下：
import wx
import sys, os
import win
class mainWin(win.com_win):
def clearRecvDisplay( self, event ): event.Skip
def openClosePort( self, event ): event.Skip
def clearSendDisplay( self, event ): event.Skip
def sendData( self, event ):
self.m_textCtrl_recv.Clear
self.m_textCtrl_recv.SetValue('hello world')
if __name__ == '__main__': app = wx.App
main_win = mainWin(None)
main_win.SetTitle(u"JaysPyCOM v0.1.0")
main_win.Show
app.MainLoop
main.py 里并没有实现具体功能，只有一个 hello world 打印的效果，此处只是演示界面已经创建成功，界面运行效果如下：
至此，串口调试工具 pzh-py-com 诞生之界面构建痞子衡便介绍完毕了，掌声在哪里~~~
