本站電子書

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

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

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




Tk 包含各種常用的 GUI 元件,如下列表
元件名稱類別名稱
視窗區域Frame
標籤Label
按鈕Button
核取方塊CheckButton
選取方塊RadioButton
下拉式列表ComboBox
列表Listbox
捲動軸Scrollbar
文字方塊Entry
文字區域Text


以下是個簡單例子
#!/usr/bin/perl -w
        
use Tk;

use strict;
use warnings;

my $mw = MainWindow->new;
my $some = $mw->Label(-text => "Tk's job!!")->pack;
MainLoop;

# 《程式語言教學誌》的範例程式
# http://pydoing.blogspot.com/
# 檔名:tkdemo.pl
# 功能:示範 Perl 程式
# 作者:張凱慶
# 時間:西元 2013 年 1 月


使用 Tk 首先要 use Tk
use Tk;


然後建立 GUI 的主要視窗物件 (object)
my $mw = MainWindow->new;


這個視窗只有一個文字標籤, Label 型態的 $some
my $some = $mw->Label(-text => "Tk's job!!")->pack;


最後使用 pack 方法,這會讓視窗元件自行安排在視窗中的位置。


這個視窗只有一個文字標籤, Label 型態的 $some
MainLoop;


來執行看看囉!結果如下



現在我們要把 GUI 的建置放在另一個程式檔案中,預計做出如下的 GUI



完整程式請參考


下圖為每個視窗元件與程式中變數 (variable) 的關係



其中像 $input_field 為文字輸入欄 Entry 物件,這裡我們將之前的 pack() 改成 grid() ,這是利用格子將視窗元件定位。如下 -row 設定為 0 就是從上往下數的第 1 列, -column 設定為 0 就是從左往右數的第 2 行, -columnspan 設定水平格子的擴張數,此處設定為 6 ,也就是這個文字輸入欄水平佔有六格,至於 -sticky 設定擴張的方向, "e" 為東 "w" 為西
my $input_field = $mw->Entry();
$input_field->grid(-row => 0, -column => 1, -columnspan => 6, -sticky => "ew");


每個 Button 的 grid() 設定也都類似,我們額外有設定 -command
my $new_button = $mw->Button(-text => "New", -command => \&new_button);
$new_button->grid(-row => 2, -column => 0);


設定 -command 的目的是連結事件處理的副程式 (subroutine) ,例如上面設定按下 New 按鈕後,便執行 new_button 這個副程式。 New 也是我們要在 GUI 中建立 Encrypt 物件按鈕,接下來我們要來仔細看看 new_button ,也就是整合 Encrypt 套件 (package) 囉!


中英文術語對照
標籤label
按鈕button
選單menu
文字方塊textfield
物件object
變數variable
副程式subroutine
套件package


您可以繼續參考
GUI 篇


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


參考資料
http://search.cpan.org/~ni-s/Tk-804.027/pod/UserGuide.pod
http://search.cpan.org/~ni-s/Tk-804.027/pod/Button.pod
http://search.cpan.org/~ni-s/Tk-804.027/pod/Entry.pod
http://search.cpan.org/~ni-s/Tk-804.027/pod/Label.pod

沒有留言: