好用的 wxPython 界面設計工具 — wxFormBuilder

在測試過程中,我們常常透過終端機執行指令,來完成一些事情。這些常用的指令,久了可能會忘,我們可以提供一個整合的介面,方便大家使用。

另外,現有自動化測試已經包含了一連串的 test case。有時我們不需要跑一整套,只需要跑部分的 test case。這時如果有一個介面可以方便提供勾選,指定要執行的 test case,會方便很多。除此之外,測試結果可以直接匯總後顯示在 UI 介面上,會比較直覺。基於這樣的需求,我們可以透過 wxPython 做一個有 UI 介面的測試工具包,幫助工作效率提升。

我們選擇使用 wxFormBuilder 來輔助我們設計 wxPython 程式的介面。

wxFormBuilder 是一套專注於設計 UI 的工具,他的特色有:

  • 使用 OS native 的 UI 組件

(像是:wxWidgets dialogs, frames, panels, toolbars and menubars)

EX. 同一份 GUI source code,在 Windows 上執行出來看起來會像是 Windows 的視窗,在 Mac 上執行出來看起來會像是 Mac 風格的視窗

  • Support 產生出 C++/ Python/ PHP 等等的 source code

換言之,它並非專屬為 Python 而生

利用 wxFormBuilder 生成一個 GUI 界面的 Python Based 程式,
會需要進行以下三個階段:
1. 安裝 wxFormBuilder
2. 利用 wxFormBuilder 設計出一個 UI
3. 針對 step 2 生成的 GUI 加入各事件的邏輯(Python Script)

使用 wxFormBuilder 設計 UI 的步驟是:
1. 增加上述所說的組件
2. 在組件中放入各種 sizer
3. 加入各種 UI component,像是 Button 之類的(如下圖所示)
wxPython_practice_1
4. 加入 UI component 對應的動作,例如 clickMe Button 的 onClickMe()
wxPython_practice_2
5. 自動生成 UI source code
wxPython_practice_3

以上只有完成 UI 佈局,還有針對各個 UI component 註冊他們支援的 event listener。

想要針對各個 UI component 的 event callback 加入相對應的邏輯 (in Python),建議直接繼承上述生成的 GUI,再編寫程式。這樣的用意是讓 UI 跟邏輯的程式碼分離,程式碼才好維護。

最後附上「計算機的各種運算類型的壓力測試」介面和程式碼:

stress_test_ui


# -*- coding: utf-8 -*- 

###########################################################################
## Python code generated with wxFormBuilder (version Nov 27 2012)
## http://www.wxformbuilder.org/
##
## PLEASE DO "NOT" EDIT THIS FILE!
###########################################################################

import wx
import wx.xrc
import wx.richtext

###########################################################################
## Class Frame_Stress_Test
###########################################################################

class Frame_Stress_Test ( wx.Frame ):
	
	def __init__( self, parent ):
		wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = u"計算機的壓力測試", pos = wx.DefaultPosition, size = wx.Size( 400,300 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
		
		self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
		self.SetFont( wx.Font( wx.NORMAL_FONT.GetPointSize(), 70, 90, 90, False, wx.EmptyString ) )
		self.SetForegroundColour( wx.SystemSettings.GetColour( wx.SYS_COLOUR_3DLIGHT ) )
		self.SetBackgroundColour( wx.SystemSettings.GetColour( wx.SYS_COLOUR_HIGHLIGHT ) )
		
		bSizer2 = wx.BoxSizer( wx.VERTICAL )
		
		gSizer4 = wx.GridSizer( 0, 3, 0, 0 )
		
		self.Text_ChooseTestItems = wx.StaticText( self, wx.ID_ANY, u"請選擇測試項目:", wx.DefaultPosition, wx.DefaultSize, 0 )
		self.Text_ChooseTestItems.Wrap( -1 )
		self.Text_ChooseTestItems.SetForegroundColour( wx.SystemSettings.GetColour( wx.SYS_COLOUR_CAPTIONTEXT ) )
		
		gSizer4.Add( self.Text_ChooseTestItems, 0, wx.ALL, 5 )
		
		choice_TestItemsChoices = [ u"加、減法", u"乘法", u"極大數", u"全部都測" ]
		self.choice_TestItems = wx.Choice( self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, choice_TestItemsChoices, 0 )
		self.choice_TestItems.SetSelection( 0 )
		gSizer4.Add( self.choice_TestItems, 0, wx.ALL, 5 )
		
		self.button_StartTest = wx.Button( self, wx.ID_ANY, u"RUN", wx.Point( 100,100 ), wx.DefaultSize, 0 )
		gSizer4.Add( self.button_StartTest, 0, wx.ALL, 5 )
		
		
		bSizer2.Add( gSizer4, 1, wx.EXPAND, 5 )
		
		self.richText_ShowResult = wx.richtext.RichTextCtrl( self, wx.ID_ANY, wx.EmptyString, wx.DefaultPosition, wx.Size( 400,0 ), 0|wx.VSCROLL|wx.HSCROLL|wx.NO_BORDER|wx.WANTS_CHARS )
		self.richText_ShowResult.SetForegroundColour( wx.SystemSettings.GetColour( wx.SYS_COLOUR_CAPTIONTEXT ) )
		
		bSizer2.Add( self.richText_ShowResult, 1, wx.EXPAND |wx.ALL, 5 )
		
		
		self.SetSizer( bSizer2 )
		self.Layout()
		
		self.Centre( wx.BOTH )
		
		# Connect Events
		self.button_StartTest.Bind( wx.EVT_BUTTON, self.onClickButton_startTest )
	
	def __del__( self ):
		pass
	
	
	# Virtual event handlers, overide them in your derived class
	def onClickButton_startTest( self, event ):
		event.Skip()

# -*- coding: utf-8 -*-  
# file: practice_main.py

# import practice.py, which was generated by wxFB
import practice
import wx
import os

class Practice(practice.Frame_Stress_Test):

	def __init__(self, parent):
		practice.Frame_Stress_Test.__init__(self, parent)

	def onClickButton_startTest(self, event):
		os.system('python stress_add_10000_times.py')

class EventTriggerMain(wx.App):

	def OnInit(self):
		self.m_frame = Practice(None)
		self.m_frame.Show()
		return True

app = EventTriggerMain()
app.MainLoop()

參考資料:
1. wxFormBuilder 官方網頁
2. wxPython 界面設計工具 — wxFormBuilder

廣告

3 thoughts on “好用的 wxPython 界面設計工具 — wxFormBuilder

發表迴響

Please log in using one of these methods to post your comment:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s