本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

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 篇


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


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

沒有留言: