【介紹】PAGE - Python Automatic GUI Generator

陳宥廷 DextinMon, Jun 20, 2020

tags: Tutorial, Python

PAGE是提供python可以方便開發GUI的tcl腳本，類似C#可以drag and drop的方式設計GUI外觀與編輯參數，但目前無法自動生成事件(至少筆者還不會XD)

官方網站
PAGE - Python Automatic GUI Generato

範例影片

Requirement

1. Python 2.7+
2. Tcl/Tk 8.6

※ 詳細查閱站內 Systems Supported

安裝

(筆者使用Windows 10, Python 3.7.2)

Tk module

雖然python有內建tk模組，但使用tcl環境需要安裝完整的tk模組

1. 在ActiveTcl頁面下載ActiveTcl Community Edition
2. 安裝，預設C:\ActiveTcl
3. 確認環境參數Path中有 [安裝路徑]\ActiveTcl\bin
4. 用文字編輯器撰寫 helloWorld.tcl

#!/usr/bin/wish
grid [ttk::button .mybutton -text "Hello World"]

5. 在helloWorld.tcl所在的目錄下，以cmd執行wish helloWorld.tcl
6. 會出現如下圖視窗，表示安裝成功
   

Page

1. 在官方網站內下載最新版本 (筆者是page 5.2)
2. 安裝，預設C:\page
3. 執行page.tcl (wish)
4. 會出現5個視窗，主視窗(PAGE**)、工具箱(Wigdet Toolbar)、屬性編輯(Attribute Editor)、物件樹(Wigdet Tree)、新工作視窗(New Toplevel)

視情況可以將目錄加入Path

操作範例

產生python code

1. 執行page.tcl
2. 編輯Attributes下的title為Example
3. 點擊工具箱中的Button，然後點擊工作視窗內任意位置，會出現一個Button物件
4. 編輯Attributes下的text為Print，或點選右鍵Wigdet >> Set Text
5. 再創建Entry和Label物件，如下圖
   
6. 主視窗Gen_Python >> Generate Support Module
7. 第一次可能需要選擇儲存目錄
8. 然後會跳出Support Console視窗，Save後目錄下會出現Example_support.py
9. 同樣主視窗Gen_Python >> Generate Python GUI
10. 跳出GUI Console然後Save，會出現Example.py和Example.tcl
11. 點擊GUI Console下方的Run測試是否有正常跑出視窗
12. 如果想儲存未完成的檔案File >> Save，以tcl檔儲存
13. 載入之前的檔案File >> Open Project，選擇tcl檔

編寫事件

PAGE無法像C#一樣自動生成事件，需要另外撰寫，這次就來寫一個簡單的事件，這邊不會詳述python tkinter相關語法

事件：按下Print，將Entry的內容顯示於Label中

1. 先產生Example_support.py和Example.py
2. 可以選擇任何編譯器來編輯，這次我們使用PAGE提供的Console
3. Gen_Python >> Load PAGE Consoles
4. 在GUI Console中的class Toplevel1下編寫事件

    def button_click(self):
        self.Label1.configure(text=self.Entry1.get())

5. 然後在__init__中找到Button1的位置，在下方加入

    self.Button1.configure(command=self.button_click)

6. Save後點擊Run，測試功能是否正常
   
7. 說實在PAGE Consoles下編寫不怎麼親民，還是去用別的編譯器XD

參考

Tk教學
Tcl教學
PAGE Documentation
Python Tkinter基礎教學