Ruby 入門指南 - 加入 command

Tk 的 GUI 事件 (event) 由替每個視窗元件設定 command ， command 就是指定與該元件連動的方法 (method)




例如 GUIDemo 中有 New 、 Load 、 Save 、 Encode 、 Decode 、 Clear 與 Copy 等七個按鈕，我們替每個按鈕設計一個方法，使按下按鈕後就將 @display 的文字標籤顯示按下哪個按鈕。程式如下

require "tk"

class GUIDemo
    def initialize
        # 每個 command 的設定
        p_new = proc {newMethod}
        p_load = proc {loadMethod}
        p_save = proc {saveMethod}
        p_encode = proc {encodeMethod}
        p_decode = proc {decodeMethod}
        p_clear = proc {clearMethod}
        p_copy = proc {copyMethod}
        p_input = proc {inputMethod}
        
        # 設定 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)
            command p_new
        }
        @loadButton = TkButton.new(root) {
            text "Load"
            grid('row'=>2, 'column'=>1)
            command p_load
        }
        @saveButton = TkButton.new(root) {
            text "Save"
            grid('row'=>2, 'column'=>2)
            command p_save
        }
        @encodeButton = TkButton.new(root) {
            text "Encode"
            grid('row'=>2, 'column'=>3)
            command p_encode
        }
        @decodeButton = TkButton.new(root) {
            text "Decode"
            grid('row'=>2, 'column'=>4)
            command p_decode
        }
        @clearButton = TkButton.new(root) {
            text "Clear"
            grid('row'=>2, 'column'=>5)
            command p_clear
        }
        @copyButton = TkButton.new(root) {
            text "Copy"
            grid('row'=>2, 'column'=>6)
            command p_copy
        }
        @displayText = TkLabel.new(root) {
            text 'something happened'
            width 65
            height 1;
            grid('row'=>4, 'column'=>0, 'columnspan'=>7)
        }
    end
    
    # 建立新 Encrypt 物件
    def newMethod
        @displayText.text = "This is New Button."
    end
    
    # 載入儲存的密碼表
    def loadMethod
        @displayText.text = "This is Load Button."
    end
    
    # 儲存密碼表
    def saveMethod
        @displayText.text = "This is Save Button."
    end
    
    # 進行編碼
    def encodeMethod
        @displayText.text = "This is Encode Button."
    end
    
    # 進行解碼
    def decodeMethod
        @displayText.text = "This is Decode Button."
    end
    
    # 清除所有輸入、輸出
    def clearMethod
        @displayText.text = "This is Clear Button."
    end
    
    # 拷貝編碼結果到剪貼簿
    def copyMethod
        @displayText.text = "This is Copy Button."
    end
end

GUIDemo.new
Tk.mainloop

=begin
《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：tkdemo2.rb
功能：示範 Ruby 程式 
作者：張凱慶
時間：西元 2012 年 12 月
=end

這裡 command 用變數設定的原因是要放在之後的大括弧裡，每一個變數的等號右邊先用 proc ，然後再用大括弧寫對應的方法名稱，例如 New 按鈕用變數 p_new ，對應到方法 newMethod

# 每個 command 的設定
p_new = proc {newMethod}
p_load = proc {loadMethod}
p_save = proc {saveMethod}
p_encode = proc {encodeMethod}
p_decode = proc {decodeMethod}
p_clear = proc {clearMethod}
p_copy = proc {copyMethod}
p_input = proc {inputMethod}

然後在按鈕的地方，例如 New 按鈕，就加上 command 與變數名稱即可

command p_new

執行後，點擊一下 Encode 按鈕



接下來，我們要開始整合 Encrypt 類別 (class) 囉！

中英文術語對照
事件	event
方法	method
類別	class

您可以繼續參考

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