测试工具研发_脚本（5）：GUI窗体的实现

1、V1.0_初步排版输出代码

# 试验带标签文字的文本框

import wx

# 初始化APP
app = wx.App()
# 定义窗体
window = wx.Frame(None, title="试验", size=(500, 500))
# 定义panel
panel = wx.Panel(window)
# 定义标签
lblmin = wx.StaticText(panel, label="最小长度")
# 定义文本框
txtmin = wx.TextCtrl(panel)
# 定义标签
lblmax = wx.StaticText(panel, label="最大长度")
# 定义文本框
txtmax = wx.TextCtrl(panel)
# 定义复选框
chkB1 = wx.CheckBox(panel, label="包含大写字母")
chkB2= wx.CheckBox(panel, label="包含小写字母")
chkB3 = wx.CheckBox(panel, label="包含数字")
chkB4= wx.CheckBox(panel, label="包含符号")
chkB5 = wx.CheckBox(panel, label="包含序号")
chkB6 = wx.CheckBox(panel, label="包含邮箱后缀")
chkB7 = wx.CheckBox(panel, label="保存到文件")
# 定义标签
lblfile = wx.StaticText(panel, label="文件名及路径")
# 定义文本框
txtfile = wx.TextCtrl(panel)
# 定义标签
lblshu = wx.StaticText(panel, label="数据总数")
# 定义文本框
txtshu = wx.TextCtrl(panel)
# 定义2个按钮
butOK = wx.Button(panel, label="确定")
butreset = wx.Button(panel, label="重置")



# 设置布局
box1 = wx.BoxSizer()  # 默认是横向的
box1.Add(lblmin, flag=wx.LEFT | wx.TOP, border=10)
box1.Add(txtmin, flag=wx.LEFT | wx.TOP, border=10)
box1.Add(lblmax, flag=wx.LEFT | wx.TOP, border=10)
box1.Add(txtmax, flag=wx.LEFT | wx.TOP, border=10)
# 设置第二行的布局
box2 = wx.BoxSizer()  # 默认是横向的
box2.Add(chkB1, flag=wx.LEFT | wx.TOP, border=10)
box2.Add(chkB2, flag=wx.LEFT | wx.TOP, border=10)
# 设置第三行的布局
box3 = wx.BoxSizer()  # 默认是横向的
box3.Add(chkB3, flag=wx.LEFT | wx.TOP, border=10)
box3.Add(chkB4, flag=wx.LEFT | wx.TOP, border=10)
# 设置第四行的布局
box4 = wx.BoxSizer()  # 默认是横向的
box4.Add(chkB5, flag=wx.LEFT | wx.TOP, border=10)
box4.Add(chkB6, flag=wx.LEFT | wx.TOP, border=10)
# 设置第五行的布局
box5 = wx.BoxSizer()  # 默认是横向的
box5.Add(chkB7, flag=wx.LEFT | wx.TOP, border=10)
box5.Add(lblfile, flag=wx.LEFT | wx.TOP, border=10)
box5.Add(txtfile, flag=wx.LEFT | wx.TOP, border=10)
# 设置第六行的布局
box6 = wx.BoxSizer()  # 默认是横向的
box6.Add(lblshu, flag=wx.LEFT | wx.TOP, border=10)
box6.Add(txtshu, flag=wx.LEFT | wx.TOP, border=10)
# 设置第七行的布局
box7 = wx.BoxSizer()  # 默认是横向的
box7.Add(butOK, flag=wx.LEFT | wx.TOP, border=10)
box7.Add(butreset, flag=wx.LEFT | wx.TOP, border=10)


# 设置垂直布局
boxFinal = wx.BoxSizer(wx.VERTICAL)
boxFinal.Add(box1)
boxFinal.Add(box2)
boxFinal.Add(box3)
boxFinal.Add(box4)
boxFinal.Add(box5)
boxFinal.Add(box6)
boxFinal.Add(box7)
panel.SetSizer(boxFinal)

# 显示窗体
window.Show(True)
# 启动app
app.MainLoop()

2、V2.0_优化代码结构为面向对象

# V2.0优化结构---面向对象

import wx
import string, random


# 定义类
class GUI_CreatData:
    # 类的初始化
    def __init__(self):
        # 初始化APP
        self.app = wx.App()
        # 定义窗体
        self.window = wx.Frame(None, title="试验", size=(500, 500))
        # 定义panel
        self.panel = wx.Panel(self.window)
        # 定义标签
        self.lblmin = wx.StaticText(self.panel, label="最小长度")
        # 定义文本框
        self.txtmin = wx.TextCtrl(self.panel)
        # 定义标签
        self.lblmax = wx.StaticText(self.panel, label="最大长度")
        # 定义文本框
        self.txtmax = wx.TextCtrl(self.panel)
        # 定义复选框
        self.chkB1 = wx.CheckBox(self.panel, label="包含大写字母")
        self.chkB2 = wx.CheckBox(self.panel, label="包含小写字母")
        self.chkB3 = wx.CheckBox(self.panel, label="包含数字")
        self.chkB4 = wx.CheckBox(self.panel, label="包含符号")
        self.chkB5 = wx.CheckBox(self.panel, label="包含序号")
        self.chkB6 = wx.CheckBox(self.panel, label="包含邮箱后缀")
        self.chkB7 = wx.CheckBox(self.panel, label="保存到文件")
        # 定义标签
        self.lblfile = wx.StaticText(self.panel, label="文件名及路径")
        # 定义文本框
        self.txtfile = wx.TextCtrl(self.panel)
        # 定义标签
        self.lblshu = wx.StaticText(self.panel, label="数据总数")
        # 定义文本框
        self.txtshu = wx.TextCtrl(self.panel)
        # 定义2个按钮
        self.butOK = wx.Button(self.panel, label="确定")
        self.butreset = wx.Button(self.panel, label="重置")

    # 控件布局
    def layout(self):
        # 设置布局
        box1 = wx.BoxSizer()  # 默认是横向的
        box1.Add(self.lblmin, flag=wx.LEFT | wx.TOP, border=10)
        box1.Add(self.txtmin, flag=wx.LEFT | wx.TOP, border=10)
        box1.Add(self.lblmax, flag=wx.LEFT | wx.TOP, border=10)
        box1.Add(self.txtmax, flag=wx.LEFT | wx.TOP, border=10)
        # 设置第二行的布局
        box2 = wx.BoxSizer()  # 默认是横向的
        box2.Add(self.chkB1, flag=wx.LEFT | wx.TOP, border=10)
        box2.Add(self.chkB2, flag=wx.LEFT | wx.TOP, border=10)
        # 设置第三行的布局
        box3 = wx.BoxSizer()  # 默认是横向的
        box3.Add(self.chkB3, flag=wx.LEFT | wx.TOP, border=10)
        box3.Add(self.chkB4, flag=wx.LEFT | wx.TOP, border=10)
        # 设置第四行的布局
        box4 = wx.BoxSizer()  # 默认是横向的
        box4.Add(self.chkB5, flag=wx.LEFT | wx.TOP, border=10)
        box4.Add(self.chkB6, flag=wx.LEFT | wx.TOP, border=10)
        # 设置第五行的布局
        box5 = wx.BoxSizer()  # 默认是横向的
        box5.Add(self.chkB7, flag=wx.LEFT | wx.TOP, border=10)
        box5.Add(self.lblfile, flag=wx.LEFT | wx.TOP, border=10)
        box5.Add(self.txtfile, flag=wx.LEFT | wx.TOP, border=10)
        # 设置第六行的布局
        box6 = wx.BoxSizer()  # 默认是横向的
        box6.Add(self.lblshu, flag=wx.LEFT | wx.TOP, border=10)
        box6.Add(self.txtshu, flag=wx.LEFT | wx.TOP, border=10)
        # 设置第七行的布局
        box7 = wx.BoxSizer()  # 默认是横向的
        box7.Add(self.butOK, flag=wx.LEFT | wx.TOP, border=10)
        box7.Add(self.butreset, flag=wx.LEFT | wx.TOP, border=10)
        # 设置垂直布局
        boxFinal = wx.BoxSizer(wx.VERTICAL)
        for i in range(1, 8):
            boxFinal.Add(eval(f"box{
      
      i}"))  # eval函数将字符串转换为对象
        self.panel.SetSizer(boxFinal)

    # 运行app
    def run(self):
        self.window.Show(True)
        self.app.MainLoop()


if __name__ == '__main__':
    gui = GUI_CreatData()
    gui.layout()
    gui.run()

3、关于GUI窗体实现的总体思路梳理

4、过程中的问题梳理

1、如何把文字需求转化为图形界面?
文字需求：实现带有GUI界面测试数据生成器

2、在进行界面设计时要注意哪些问题？
1、保证把所有的输入条件、处理都能涵盖在界面中
2、如果一个界面的内容过于复杂，可以考虑界面拆分
3、可以暂时不考虑用哪些控件最优，先完成基础版本，在评审时细化讨论细节

3、如何评价界面设计符合文字需求？
1、功能是否覆盖到
2、每个功能对应的输入和处理都在界面有体现吗？
3、可选：输出的内容在界面上如何体现？
4、界面设计是否好理解？
5、对不易理解的部分是否有对应的帮助、说明
6、界面控件设计是否合理

4、基于GUI的测试工具，如何进行类的设计？

5、如何评价类的设计符合需求？
1、类的方法实现是否覆盖了所有的控件实现
2、对应的按钮处理货其他按空间是否有相应的方法实现

6、常见控件的定义方法
1、文本控件TextCtrl
2、标签控件StaticText
3、复选框控件CheckBox
4、按钮控件Button
5、布局控件BoxSizer、panel.SetSizer(Box)
6、panel控件
7、窗体控件

7、如何进行控件布局的设计
逐行添加，平行排列
最后把每一行对应的水平Box添加到垂直布局的box里面

8、如何循环添加多个box到box进行布局？
通过eval函数把字符串转换为Box的对象