好的,那麼呢我們就來開始製作我們的第一個 GUI program 吧。
那我們呢就是透過例子的方式來一步一步地帶大家看說,如果我們要建立 GUI
program,那依序我們要做一些什麼事情,以及每一件事情代表的意涵是什麼。
那麼呢我們的第一個 example 裡面呢,我們要做一個 calculator,
計算機,那我們先做一個簡單的,再做一個更 fancy 的。
所以我們的目標啊,在這個 example 裡面我們想要做的事情呢是一個 square
root calculator, 意思是什麼呢,就是它是一個簡單版的計算機,或者是
你用 Windows 的話呢叫做小算盤,小算盤大家都用過,基本上就是你
按按鈕,可以輸入這個數字, 打鍵盤也可以輸入數字,然後你可以做加減乘除,開根號,各式各樣的活動。
那麼呢,我們今天做個簡單版的,它只能做 square
root, 所以我們的 user
他可以 按這個滑鼠,用滑鼠去按這些這個數字鍵,
然後呢藉由按這些數字鍵來輸入我們的這個數字,
那因為我們的鍵盤上,也就是說數字鍵的鍵盤上也沒有讓它可以輸入負號的地方, 所以自然就會是 non-negative 的 integer 啦。
然後呢,我們的這個使用者可以按下這個 square root 的
icon,在這邊, 這個按鈕按下去了以後呢,就可以得到他所輸入的數字的
根號,大概是這個目標,然後呢我們會讓這個根號是一個 float number,
然後呢是精確到第二位數,大概是我們這個 example 要做的事情。
所以呢我們依序要做這些事情,我們要 create window,我們要把這個
window 做出來, 然後呢我們要做一些 component,或是一些
icon 上去, 比如說我們要有一個 label,就是這個東西,對吧,然後呢我們要有一些
button, 1,2,3,4,5,6,7,8,9,10,11,我們要放
11 個 button,11 個按鈕上去, 然後呢我們要 implement 一些 event triggered
functions,意思 就是當有人按下 1,當有人按下開根號,
要發生一些事情,並且我們要把這些東西排地漂漂亮亮的,大概是這個目標。
好,所以我們就開始開發了,我們的 calculator 0.1 就是我們來 create
一個 window, 做的事情大概是這樣,我們呢必定要使用 library 的嘛,不然誰知道怎麼開發一個
window, 一定有人幫我們已經先把這些作業系統啊,輸入輸出啊的事情都打點好了,
那我們呢在這裡使用的是叫做 tkinter 的這個一個
library,那老實說我也不知道 這怎麼發音啦,不知道是 t-kinter
還是 tk-inter 還是 whatever, 但總之,我們使用這個 library 的話,
就可以來產生 GUI,所以我們先做第一件事情,我們就 import
tkinter, 然後這個 tk 呢就是我們給它的別名,那接下來呢我們就寫一個
class,叫做 Calculator,這裡我們寫一個 class 叫做 Calculator,
但是這個 class 呢並不是我們從頭到尾寫,而是 我們去繼承一個現存的
class,叫做 Frame, 大家注意看這裡,這裡有
tk.Frame,那它的意思很明顯, 就是這是一個 tk 這個
library 裡面的 class, 我們利用舊的 class
來繼承出新的 class, 所以呢我們今天先看一下什麼是 Frame。
Frame 是一個 empty 的 window frame, 也就是說,如果我來
create 一個 frame class, 用 frame class 來 create
一個 object 的話,我會看到一個空空的 視窗框架,OK?它會有一個視窗,但它裡面沒有東西。
那麼這個東西,我們要先把它得到了以後, 待會兒再去寫
code,把東西加進去,那麼呢這就是為什麼我們 要去繼承,因為我們不是真的要去
modify frame 的內容, frame 是人家寫好的,我們無從修改它,
但我們能做的事情是我們繼承 frame 來 create 一個我們自己的
class,繼承一個 class 會得到什麼呢?
我們會得到所有在舊的 class 裡面被 define 好的東西,
所以你可以想象 frame 裡面它已經幫我們寫好很多各式各樣的 member variable
跟 member functions 了, 讓我們去用,讓我們一 create 一個
frame 的時候呢,就會得到一些每一個視窗都應該要有的基本的東西。
有了它以後呢,我們就可以產生我們的 calculator,待會再去裡面加東西。
大概是這個目標,所以呢最後我們只需要知道,我們要繼承一個 class
要怎麼寫,就是我們在建立 class 的時候呢,在後面打個括號,
仿佛好像是我們在一個函數裡面傳入了一個參數,我們把這個 class
的名字放進這個括號裡的話, 就會達到繼承的效果,也就是說 tk.Frame
是 existing class,而我們要建立的是這個叫做 Calculator 的 class, 大概就是這麼一回事。
所以這個時候呢,我們就會說我們的 calculator is
a frame,我們的計算機也是一個框架, 也是一個
window,對吧,大家都是 window,所以我們建立了一個 window, 但是我們建立
window 的方式不是從頭到尾都自己寫, 而是我們利用已經存在的 window 來做。
那接著呢我們要寫幾行字啦,這個地方是我們的 class
裡面要定義的東西, 我們在 class 裡面定義一個 constructor,幹嘛呢?
就是每當我建立一個這個 calculator 物件的時候,我們就 要呼叫
constructor 來做點事情,那我們這個 constructor 啊首先
要去呼叫 tk.Frame.__init__,它的意思無非就是說
我不知道我要幹嘛,但反正 Frame 本人一定有一些 constructor 要做,
那我們趕快先把 frame 的 constructor 做完吧,frame 的 constructor
呢,基本上就是它會去把這個視窗做出來, 所以呢我們就做這件事情,所以我們先呼叫
parent constructor, 然後呢接下來,我們要來呼叫一下我們這個 class 的一些事情啦。
我們來呼叫一個 member function, 叫做 grid,這個叫
grid 的 function 呢也不是我們寫的,也是 frame
寫的, 它的用處就是它會在我們的視窗裡面產生一些
格子,產生一些網格,讓我們可以把 widget 放進去,此刻你還聽不太懂,等一下你就知道了。
總之,某方面來講,這兩行就是麻煩你先照抄啦。
接下來呢,我們就可以來嘗試看看, 我們在這裡,等於是先用
calculator 來建立了一個物件, 用這個物件呢,我們就可以來這個做一些設定,
首先,在物件裡面,我們用物件來呼叫物件的物件的一個 member
function, 然後呢傳入了叫做 My Calculator 的東西,
這個東西是在幹嘛?這個東西就是在說我這個 object,我這個視窗的
title,我要讓它叫 My Calculator, 那視窗的
title 是什麼,等一下你馬上就會看到了,基本上就是上面那一條這個標題列,
我想要讓它出現的字樣是 My Calculator, 這個樣子,所以這個是我們這裡講的,用一個
frame 的 member function 來 setup title。
那你說,欸老師,我怎麼知道要寫這樣,你當然不知道,你是看線上文件才知道的。
OK,最後呢我們要呼叫一個函數,來把這個程式跑起來,把這個視窗跑起來, 我們跑起來的呢就是叫
mainloop 的這個函數,這個函數 寫下去了以後呢,這個視窗等一下就會
show up, 而且這個視窗會持續地去 listening to events,
就是會去聽我們的這個發生什麼事情, 那這個東西呢就很像我們在
Python2 裡面寫 raw_input, 或者是我們在 Python3 裡面,如果我們寫
input 這個函數的話, 寫 input 這個函數的時候會發生什麼事情,大家還有印象嗎?
程式基本上會停在一個地方,然後游標在那邊閃 啊閃的,等著你輸入一些資訊,程式會停在那裡。
那麼我們今天呢用 mainloop 也是一樣的,我們呼叫 mainloop
了以後, 我們的視窗它就會分心,它就會開一個頻道,
去聽有沒有使用者按按鈕,有沒有使用者敲鍵盤,
有的話它就去做相對應的工作,這個東西就是 mainloop 的功能。
那你仔細想想,我們使用過的視窗程式是不是基本上都是這個概念,就是我們的程式在跑, 你開了一個
Word,開了一個 Excel 之類的,那都是當你有 做什麼的時候,它就做一個相對應的反應,當你做什麼,就做一個相對應的反應,
有的時候它也做運算,但是它無時無刻都在聽,你身為一個使用者,你給它下什麼指令。
那就是這個 mainloop,這是一件除非你把視窗關掉,不然不會停下來的事情。
它要一直一直一直地去聽,有沒有人對它做事情。
那這個一直一直一直,你可以想象它是一個持續的概念,每當你按它就會知道。
又或者你可以想成是,它是去檢查的, 它只是每隔很短很短的間隔時間就去檢查一下,剛剛有沒有人來, 大概是這個樣子。
好,廢話不多說,總之,如果你就是 複製貼上來的話,你會看到這樣子的畫面,那我們來試一下。
好,我們今天呢,這個 program 在這裡,我們 import
tkinter,然後 Calculator,然後剛剛那三行,然後這樣,要執行,就直接程式跑下去,
跑下去了以後你就看到左上角這個啦,這個看起來有點怪怪的,這什麼東西,你呢可以把- 它拉大,
這個就是我們剛剛寫的 Calculator 啦,
左上角這裡有一個像羽毛的東西,這個是 tkinter 幫你預設的
icon,那要改可以改,不過我們今天不做這件事情, 這個 My Calculator
比較簡單,你傳什麼字串進去它這裡就出現什麼東西, 那你可以看到這個東西確實很像是一個正常的 Windows
視窗,對吧? 因為它這裡可以放大縮小,你可以最大化,
你可以變回來,你可以最小化,你當然也可以把它關掉,這些事情呢有興趣的話試試看,- 就好了。
所以,這確實是一個空白的視窗, 空的框架,裡面沒東西嘛,它就只有這個框,
然後有上面的這個標題列,其他就沒有了,但你還是可以看到它有很多基本的功能,
這個,這個,這個,這三個按鈕基本上就是每一個視窗都要有, 所以不勞您費心,library
已經幫你寫好了, 只要你用 library 來 create 一個視窗,這三個功能就存在。
而且呢它們會正常地運作,按下去它就是會最大化, 按了以後它就是會變回來,這件事情呢系統會幫你處理。
所以我們只需要費心把裡面的 content 填進去就可以啦,
好,那這就是我們的第一步。