# 【介紹】PAGE - Python Automatic GUI Generator

> [name=陳宥廷 Dextin][time=Mon, Jun 20, 2020] [color=#87CEFA]
>

###### tags: `Tutorial`, `Python`

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

官方網站
[PAGE - Python Automatic GUI Generato](http://page.sourceforge.net/)

## 範例影片
{%youtube oULe0h0Jl3g%}

## 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](https://www.activestate.com/products/tcl/tcl-tk-modules/)頁面下載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. 在[官方網站](http://page.sourceforge.net/)內下載最新版本 (筆者是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教學](http://tw.gitbook.net/tk/index.html)
[Tcl教學](http://tw.gitbook.net/tcl/index.html)
[PAGE Documentation](http://page.sourceforge.net/html/index.html)
[Python Tkinter基礎教學](https://morvanzhou.github.io/tutorials/python-basic/tkinter/)