Ruby 入門指南 - GUI 的基本概念

圖形介面的元件有很多種，如標籤 (label) 、按鈕 (button) 、選單 (menu) 、文字方塊 (textfield) 等等




Tk 包含各種常用的 GUI 元件，如下列表
元件名稱類別名稱
視窗區域TkFrame
標籤TkLabel
按鈕TkButton
核取方塊TkCheckButton
選取方塊TkRadioButton
下拉式列表TkComboBox
列表TkListbox
捲動軸TkScrollbar
文字方塊TkEntry
文字區域TkText


以下是個簡單例子
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
require "tk"
 
root = TkRoot.new do 
    title "Hello, Tk!"
end
some = TkLabel.new(root) do
    text "Tk's job!!"
    height 5
    width 30
    grid("row"=>0, "column"=>0)
end
Tk.mainloop
 
=begin
《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：tkdemo.rb
功能：示範 Ruby 程式
作者：張凱慶
時間：西元 2012 年 12 月
=end


使用 Tk 首先要 require "tk"
1
require "tk"


然後建立 TkRoot 物件，注意 TkRoot.new 的後面接 do ，下面的程式區塊 (block) 設定 root 的相關實體變數 (instance variable)
3
4
5
root = TkRoot.new do 
    title "Hello, Tk!"
end


如果不用 do 的話，可以這樣設定
3
4
root = TkRoot.new
root.title = "Hello, Tk!"


也可以用大括弧
3
4
5
root = TkRoot.new {
    title "Hello, Tk!"
}


以上三種寫法都可以， title 則是視窗標題，因此我們建立的視窗的標題為 Hello, Tk! 。這個視窗只有一個文字標籤， TkLabel 型態的 some
6
7
8
9
10
11
some = TkLabel.new(root) do
    text "Tk's job!!"
    height 5
    width 30
    grid("row"=>0, "column"=>0)
end


這裡 new 的參數 (parameter) 為 root ，這樣 some 才會顯示在 root 視窗上。後設定文字標籤的文字 text 為 Tk's job!! ，高 height 為 5 ，寬 width 為 30 ，最後一個 grid 為 Tk 格子式幾何版面管理 (grid geometry manager) ，這裡設定為列 row 為 0 ，行 column 為 0 ，代表左上角的第一格，也是唯一的一格。


來執行看看囉！結果如下



現在我們要把 GUI 的建置放在類別 (class) 中，每個元件都用實體變數 (instance variable) 建立，預計做出如下的 GUI



程式如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
require "tk"
 
class GUIDemo
    def initialize
        # 設定 GUI 各元件
        root = TkRoot.new {
            title "EncryptGUI Demo"
        }
        @inputText = TkLabel.new(root) {
            text "Input:"
            width 8
            height 1
            grid('row'=>0, 'column'=>0)
        }
        @inputField = TkEntry.new(root) {
            width 60
            grid('row'=>0, 'column'=>1, 'columnspan'=>6)
        }
        @outputText = TkLabel.new(root) {
            text 'Output:'
            width 8
            height 1
            grid('row'=>1, 'column'=>0)
        }
        @outputField = TkEntry.new(root) {
            width 60
            grid('row'=>1, 'column'=>1, 'columnspan'=>6)
        }
        @newButton = TkButton.new(root) {
            text "New"
            grid('row'=>2, 'column'=>0)
        }
        @loadButton = TkButton.new(root) {
            text "Load"
            grid('row'=>2, 'column'=>1)
        }
        @saveButton = TkButton.new(root) {
            text "Save"
            grid('row'=>2, 'column'=>2)
        }
        @encodeButton = TkButton.new(root) {
            text "Encode"
            grid('row'=>2, 'column'=>3)
        }
        @decodeButton = TkButton.new(root) {
            text "Decode"
            grid('row'=>2, 'column'=>4)
        }
        @clearButton = TkButton.new(root) {
            text "Clear"
            grid('row'=>2, 'column'=>5)
        }
        @copyButton = TkButton.new(root) {
            text "Copy"
            grid('row'=>2, 'column'=>6)
        }
        @displayText = TkLabel.new(root) {
            text 'something happened'
            width 65
            height 1;
            grid('row'=>4, 'column'=>0, 'columnspan'=>7)
        }
    end
end
 
GUIDemo.new
Tk.mainloop
 
=begin
《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：tkdemo2.rb
功能：示範 Ruby 程式
作者：張凱慶
時間：西元 2012 年 12 月
=end


總共有三個 TkLabel 、兩個 TkEntry 及七個 TkButton ，全都設定好相關的格子，其中
17
grid('row'=>0, 'column'=>1, 'columnspan'=>6)


'columnspan' 為水平擴展的格子數，這裡我們讓兩個文字輸入框都水平佔滿六格。


目前按鈕都沒有動作，因為我們還沒設定相關事件 (event) 處理，這要加入 command 囉！


中英文術語對照
標籤label
按鈕button
選單menu
文字方塊textfield
類別class
實體變數instance variable
事件event


您可以繼續參考
GUI 篇


相關目錄
回 Ruby 入門指南
回 Ruby 教材
回首頁


參考資料
http://www.ruby-doc.org/docs/ProgrammingRuby/html/ext_tk.html
http://www.tutorialspoint.com/ruby/ruby_tk_guide.htm
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)