###### tags: `python`

# wxFormBuilder

## 安裝
1. 連到 https://github.com/wxFormBuilder/wxFormBuilder/releases
2. 下載 [**wxFormBuilder_v3.6.2.exe**](https://github.com/wxFormBuilder/wxFormBuilder/releases/download/v3.6.2/wxFormBuilder_v3.6.2.exe)
3. 安裝(使用預設值即可)

## 產生傳統功能列視窗
1. 建立專案資料夾(例如: hello)
2. 執行 wxFormBuilder
3. 點左邊的「Object Tree」的「Project」
4. 點右邊的「Object Properties」
* name: 軟體名稱(例如: hello)
* path: python檔儲存路徑
* file: python檔名(例如: hello)
* code_generation: 產生指定的程式語言
5. 點上方的「Component Palette/Frame」
6. 點右邊的「Object Properties」
* name: 程式操作該物件的name(例如: FrameMain)
* title: 視窗的顯示名稱(例如: hello)
* wxWindow/pos/X: 視窗一開始位於x軸
* wxWindow/pos/Y: 視窗一開始位於y軸
* wxWindow/size/Width: 視窗的寬度
* wxWindow/size/Height: 視窗的高度
* wxWindow/minimum_size/Width: 視窗最小寬度
* wxWindow/minimum_size/Height: 視窗最小高度
* wxWindow/maximum_size/Width: 視窗最大寬度
* wxWindow/maximum_size/Height: 視窗最大高度
* wxWindow/fg: 前景顏色
* wxWindow/bg: 背景顏色
* wxWindow/window_style/wxHSCROLL: 垂直軸拖拉吧
* wxWindow/window_style/wxVSCROLL: 水平軸拖拉吧
* wxWindow/hidden: 隱藏
7. 按 Ctrl + S 儲存設計檔(test/view/main.fbp)
8. 產生python的wxPython視窗程式(test/view)
9. 打開VScode
10. 按 Ctrl + N 開啟新分頁
11. 輸入以下程式碼

import wx
import hello
  
if __name__ == '__main__':
    app = wx.App()
    MainApp = hello.FrameMain(None) # 沒有父視窗，所以用None
    MainApp.SetIcon(wx.Icon('images/camera.ico', wx.BITMAP\_TYPE\_ICO)) # 視窗左上角小圖示
    MainApp.Show()
    app.MainLoop()

13. 儲存為 main.py
14. 執行 main.py

----
## 產生Ribbon功能列視窗

1. 同上設定專案名稱、檔案產生目錄、檔名、
2. 點「forms/Frame」
設定該Frame的name, title
3. 點「layout/wxBoxSizer」
4. 點「Ribbon/RibbonBar」
5. 點「Ribbon/RibbonPage」產生分頁
設定該RibbonPage的name, title
6. 可依功能需求使用以下3種不同模式

### A. 增加RibbonButtonBar(會有大有小圖示)
1. 點「Ribbon/RibbonPanel」產生面板(功能群組)
設定該RibbonPanel的name, title
2. 點「Ribbon/wxRibbonButtonBar」
3. 點「Ribbon/ribbonButton」
設定riboonButton的name, lable, file_path(圖片檔案位置)

### B. 增加RibbonToolBar(所有圖示統一大小)
1. 點「Ribbon/RibbonPanel」產生面板(功能群組)
設定該RibbonPanel的name, title
2. 點「Ribbon/wxRibbonToolBar」
3. 點「Ribbon/ribbonTool」
設定RibbonTool的name, lable, file_path(圖片檔案位置)

### C. 增加RibbonGallery(可往下移動顯示更多圖示)

1. 點「Ribbon/RibbonPanel」產生面板(功能群組)
設定該RibbonPanel的name, title
2. 點「Ribbon/wxRibbonGallery」
3. 點「Ribbon/ribbonGalleryItem」
設定RibbonGalleryItem的name, file_path(圖片檔案位置)

後續步驟同傳統功能視窗 7~14

---
### 練習：簡易小算盤
1. 產生答案區
2. 產生0~9, 加、減、乘、除、等於、清除按鈕

-----
## 開啟、關閉其他視窗
1. 參考之前練習產生第一個frame
2. 在視窗中新增第一個按鈕:
a. name: btn_products, label: 商品管理
b. OnButtonClick: fun_products # 使用者點該按鈕時呼叫哪個函數
3. 在視窗中新增第二個按鈕:
a. name: btn_customers, label: 客戶管理
b. OnButtonClick: fun_customers
4. 點「Forms/Frame」新增第二個frame:
name: FrameCustomers
5. 點「Layout/wxBoxSizer」
6. 點「Common/wxBotton」
name: btn_close
label: 關閉
OnButtonClick: fun_close_customers
7. 點「Forms/Frame」新增第三個frame:
name: FrameProducts
8. 點「Layout/wxBoxSizer」
9. 點「Common/wxBotton」
name: btn_close
label: 關閉
OnButtonClick: fun_close_products
10. 存檔、產生python語法檔
11. 打開剛剛儲存的語法檔
12. 找到**def fun_open_products( self, event ):**
在底下輸入:
**frameCustomers = FrameCustomers(None)
frameCustomers.Show()**
點該按鈕時打開客戶管理視窗
13. 找到**def fun_open_customers( self, event ):**
在底下輸入:
**frameProducts = FrameProducts(None)
frameProducts.Show()**
點該按鈕時打開產品管理視窗
14. 找到**def fun_close_customers( self, event ):**
在底下輸入:
**self.Destroy()**
點該按鈕時關閉此一視窗
15. 找到**def fun_close_products( self, event ):**
在底下輸入:
**self.Destroy()**
16. 存檔
17. 執行專案第一個執行檔(ex: index.py)
如果正確的話，點「商品管理」打開商品管理視窗
點「關閉」關閉商品管理視窗
客戶管理功能同上

----
## 參考資料
[Free icons set icons pack Free icon 3.02MB](http://all-free-download.com/free-icon/download/free-icons-set-icons-pack_120754.html)
[微軟圖示集](https://www.microsoft.com/en-us/download/details.aspx?id=35825)
[Icons8 Windows 10 Icons](https://github.com/icons8/windows-10-icons)
[wxPython in Action](http://oez.es/wxPython%20in%20Action.pdf)