痞子衡嵌入式：串列埠除錯工具Jays-PyCOM誕生記（2）- 介面構建(wxFormBuilder3.8.0)

---

　　大家好，我是痞子衡，是正經搞技術的痞子。今天痞子衡給大家介紹的是串列埠除錯工具Jays-PyCOM誕生之介面構建。

　　一個軟體的UI介面是非常重要的，這是軟體與使用者互動的介面，軟體功能即使再強大，但如果沒有清晰的UI介面，那也發揮不出軟體的功能，使得使用者體會不到軟體的優勢。今天痞子衡給大家介紹Jays-PyCOM的介面構建過程。

一、介面設計簡圖

　　在真正進入程式碼設計Jays-PyCOM介面前，首先應該在紙上畫一個介面草圖，確定Jays-PyCOM介面應該有哪些元素構成，這些元素分別位於介面上什麼位置。下面是痞子衡畫的Jays-PyCOM的介面簡圖，介面主要包括三大部分：接收區、配置區、傳送區，接收區用於顯示從串列埠接收到的資料；配置區用於配置串列埠引數；傳送區用於編輯要從串列埠傳送出去的資料。

二、介面設計wxPython元件圖

　　有了Jays-PyCOM的介面設計簡圖指導，下一步需要將設計簡圖解析成如下的wxPython元件圖，將簡圖裡的元素轉換成wxPython裡的真實元件。這一步需要配合查閱wxPython相關手冊，瞭解wxPython有哪些元件。
　　有一個地方需要特別提醒的是，wxWrapSizer裡的控制元件是從左到右自上而下排列的，有的時候為了排版，會故意插入一些無效的wxStaticText來佔位，下圖中便用了4個佔位的wxStaticText（淺色框表示）。

三、在wxFormBuilder裡創作

　　有了Jays-PyCOM的介面設計wxPython元件圖，下面便可以在wxFormBuilder裡照樣子創作出Jays-PyCOM的真正介面了。關於wxFormBuilder的使用可參考痞子衡另一篇文章 極易上手的視覺化wxPython GUI構建工具(wxFormBuilder)。

四、使用生成的Python程式碼

　　將wxFormBuilder生成的python程式碼儲存為win.py檔案（其中Frame class名為com_win），並存放於\Jays-PyCOM\src目錄下，此時需要另外新建一個名為main的主函式檔案，並放在\Jays-PyCOM\src目錄下。其中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"Jays-PyCOM v0.1.0")
    main_win.Show()

    app.MainLoop()

　　main.py裡並沒有實現具體功能，只有一個hello world列印的效果，此處只是演示介面已經建立成功，介面執行效果如下：

　　至此，串列埠除錯工具Jays-PyCOM誕生之介面構建痞子衡便介紹完畢了，掌聲在哪裡~~~