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

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




Tk 包含各種常用的 GUI 元件，如下列表

元件名稱	類別名稱
視窗區域	TkFrame
標籤	TkLabel
按鈕	TkButton
核取方塊	TkCheckButton
選取方塊	TkRadioButton
下拉式列表	TkComboBox
列表	TkListbox
捲動軸	TkScrollbar
文字方塊	TkEntry
文字區域	TkText

以下是個簡單例子

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"

require "tk"

然後建立 TkRoot 物件，注意 TkRoot.new 的後面接 do ，下面的程式區塊 (block) 設定 root 的相關實體變數 (instance variable)

root = TkRoot.new do  
    title "Hello, Tk!"
end

如果不用 do 的話，可以這樣設定

root = TkRoot.new
root.title = "Hello, Tk!"

也可以用大括弧

root = TkRoot.new {
    title "Hello, Tk!"
}

以上三種寫法都可以， title 則是視窗標題，因此我們建立的視窗的標題為 Hello, Tk! 。這個視窗只有一個文字標籤， TkLabel 型態的 some

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



程式如下

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 ，全都設定好相關的格子，其中

grid('row'=>0, 'column'=>1, 'columnspan'=>6)

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


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

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

您可以繼續參考

GUI 篇

• GUI 的基本概念
• 加入 command
• 整合 Encrypt 類別
• GUI 中的編碼與解碼
• 存檔與載入
• 完成版的 EncryptGUI
• 下一步

相關目錄

回 Ruby 入門指南
回 Ruby 教材
回首頁

參考資料

http://www.ruby-doc.org/docs/ProgrammingRuby/html/ext_tk.html
http://www.tutorialspoint.com/ruby/ruby_tk_guide.htm