Glade/GTK2 for Windows with PHP5 and Ruby 快速安裝指南

本文將指引讀者，如何在 Windows 平台上快速安裝 GTK2/Glade 暨 PHP (PHP-GTK) 與 Ruby (Ruby-GNOME2) 的開發環境。

在泛Unix環境下，我們通常使用 GTK+ 開發圖形化使用介面(GUI)的應用程式。GTK+ a multi-platform toolkit for creating graphical user interfaces. 許多動態語言，如 Perl, Python, Ruby, PHP 等等，皆可利用 GTK+ 開發圖形化使用介面程式。由於上述動態語言之軟體開發環境與 GTK+ 皆具有跨平台的特性，因此利用它們所設計出的應用程式，通常可運作於多種作業平台之上，包括 Win32 (Windows 2k/XP) 平台。

另一方面，隨著 Web application 演進，我們也開始關注以中介性標籤語言(markup language)進行圖形化介面的視覺設計工作之可行性 (Markup language 對應用軟體設計工作的影嚮)。正好， GTK+ 就有 Glade 這麼一套視覺化使用者介面設計工具。 Glade is a User Interface Designer for GTK+ and GNOME. 它可以將使用者介面的設計成果以 XML 儲存，而應用程式可利用 GladeXML 函數庫載入使用介面。透過 GladeXML ，程序員便不需使用程式語言進行使用者介面的設計工作。

安裝 GTK2/Glade

首先拜訪 Glade 網站，大略了解 Glade 相關資訊。網站上也提供了 Glade 的線上 API 與使用者手冊。但 Glade 網站中並未提供 Windows 版本的軟體安裝套件。故請至 Glade for Windows 取得 Windows 版本的 GTK2/Glade 軟體安裝套件。

在本文中，使用 GTK+ 2.10.11 (gtk-dev-2.10.11-win32-1.exe)。安裝後，應該會在桌面上新增一個 Glade 的圖示，並註冊4組環境變數，如下例:

GTK_BASEPATH = C:\GTK\2.0
INCLIDE = %INCLUDE%;C:\GTK\2.0\INCLUDE;(...很多項)
LIB = %LIB%;C:\GTK\2.0\LIB;
PATH = %PATH%;C:\GTK\2.0\BIN;

安裝 Ruby-GNOME2

在這之前，應該先安裝 Windows 版本的 Ruby 開發工具。

Ruby-GNOME2 is a set of Ruby language bindings for the GNOME 2.0 development environment. 請下載 Windows 版本的軟體安裝套件。在本文中，使用 ruby-gnome2-0.16.0-1-i386-mswin32.exe 。

請將 Ruby-GNOME2 與 Ruby 安裝在同一目錄下，例如 C:\ruby。由於 GTK2 Runtime 已獨立安裝，故不需要安裝 Ruby-GNOME2 安裝套件中的 GTK2 Runtime 。

安裝 PHP-GTK

在這之前，應該先安裝 Windows 版本的 PHP5 開發工具。

PHP-GTK is an extension for the PHP programming language that implements language bindings for GTK+. 請下載 Windows 版本的軟體安裝套件。在本文中，配合 PHP5 的版本，使用 php-gtk-2.0.0 alpha Windows binary for PHP 5.2.* (php-gtk2-alpha-5_2-win32.zip)。Gnope 提供了 Windows 版本的 PHP5 + PHP-GTK 等開發工具的整合安裝套件。然而其中使用的版本較舊，且與官方釋出的 PHP5 Windows 版本相容性較差，故不建議使用此整合安裝套件。

解壓 PHP-GTK2 至一個暫時性目錄，將 php_gtk_libglade2.dll 及 php-gtk2.dll 這兩個檔案複製到 PHP5 的 ext 目錄之中，例如 C:\php5\ext。由於 GTK2 Runtime 已獨立安裝，故不需要安裝 PHP-GTK2 中的 GTK2 Runtime 。

最後參考 PHP-GTK2 中的 php.ini 內容，修改 PHP5 的 php.ini 。加掛 PHP-GTK2 的 extension ，並增加 [PHP-GTK] 的組態區段。


extension = php-gtk2.dll

[PHP-GTK]
;;;;;;;;;;;;;;;;;;;;;;
; PHP-GTK extensions ;
;;;;;;;;;;;;;;;;;;;;;;

; Extensions written for PHP-GTK are in the format php_gtk_*.dll (Windows) or
; php_gtk_*.so (Unix), written here as a comma-separated list. The library
; files need to be in the same directory as the PHP-GTK library, along with
; any other PHP extensions you are using.

php-gtk.extensions = php_gtk_libglade2.dll

;;;;;;;;;;;;;
; Code Page ;
;;;;;;;;;;;;;

; The string variables used for titles and other text values in GTK+ are
; encoded in UTF-8 internally. A code page is needed so that PHP-GTK 'knows'
; which character set is being used, and can convert it to UTF-8 as necessary.

; If your environment uses UTF-8 already, you can set the codepage directive
; to UTF-8 to skip the conversions.

; The default codepage setting in PHP-GTK 2 is ISO-8859-1, but you can also
; use either OEM (e.g. 850) or Windows Code Pages (e.g. CP1250) here, so
; long as the encoding format you choose is capable of iconv conversion. See
; http://www.microsoft.com/globaldev/reference/cphome.mspx for a list of
; the code pages and character sets that are supported on Windows systems.

php-gtk.codepage = UTF-8

;Under Win2k/XP:
;codepage CP950 is BIG5
;codepage CP1250 is ISO-8859-1

Hello Glade

啟動 Glade RAD 設計工具，設計一個簡單的 Hello Glade 範例。如圖所示:

Glade 會將設計結果儲存為 XML 文件，預設副檔名為 .glade 。上圖之設計結果儲存為 C:\helloglade.glade 。

helloglade.glade

<?xml version="1.0" standalone="no"?> <!--*- mode: xml -*-->
<!DOCTYPE glade-interface SYSTEM "http://glade.gnome.org/glade-2.0.dtd">

<glade-interface>

<widget class="GtkWindow" id="window1">
  <property name="width_request">80</property>
  <property name="height_request">80</property>
  <property name="visible">True</property>
  <property name="title" translatable="yes">Hello Glade</property>
  <property name="type">GTK_WINDOW_TOPLEVEL</property>
  <property name="window_position">GTK_WIN_POS_NONE</property>
  <property name="modal">False</property>
  <property name="resizable">True</property>
  <property name="destroy_with_parent">False</property>
  <property name="decorated">True</property>
  <property name="skip_taskbar_hint">False</property>
  <property name="skip_pager_hint">False</property>
  <property name="type_hint">GDK_WINDOW_TYPE_HINT_NORMAL</property>
  <property name="gravity">GDK_GRAVITY_NORTH_WEST</property>
  <property name="focus_on_map">True</property>
  <property name="urgency_hint">False</property>
  <signal name="destroy_event" handler="gtk_main_quit"/>

  <child>
    <widget class="GtkVBox" id="vbox1">
      <property name="visible">True</property>
      <property name="homogeneous">False</property>
      <property name="spacing">0</property>

      <child>
	<widget class="GtkLabel" id="label1">
	  <property name="visible">True</property>
	  <property name="label" translatable="yes">Hello Glade!</property>
	  <property name="use_underline">False</property>
	  <property name="use_markup">False</property>
	  <property name="justify">GTK_JUSTIFY_LEFT</property>
	  <property name="wrap">False</property>
	  <property name="selectable">False</property>
	  <property name="xalign">0.5</property>
	  <property name="yalign">0.5</property>
	  <property name="xpad">0</property>
	  <property name="ypad">0</property>
	  <property name="ellipsize">PANGO_ELLIPSIZE_MIDDLE</property>
	  <property name="width_chars">-1</property>
	  <property name="single_line_mode">False</property>
	  <property name="angle">0</property>
	</widget>
	<packing>
	  <property name="padding">20</property>
	  <property name="expand">True</property>
	  <property name="fill">False</property>
	</packing>
      </child>

      <child>
	<widget class="GtkHButtonBox" id="hbuttonbox1">
	  <property name="visible">True</property>
	  <property name="layout_style">GTK_BUTTONBOX_SPREAD</property>
	  <property name="spacing">0</property>

	  <child>
	    <widget class="GtkButton" id="button1">
	      <property name="visible">True</property>
	      <property name="can_default">True</property>
	      <property name="can_focus">True</property>
	      <property name="label" translatable="yes">Close</property>
	      <property name="use_underline">True</property>
	      <property name="relief">GTK_RELIEF_NORMAL</property>
	      <property name="focus_on_click">True</property>
	      <signal name="clicked" handler="onClickButton"/>
	    </widget>
	  </child>
	</widget>
	<packing>
	  <property name="padding">10</property>
	  <property name="expand">False</property>
	  <property name="fill">False</property>
	</packing>
      </child>
    </widget>
  </child>
</widget>

</glade-interface>

helloglade.php

以 PHP5 撰寫一個程式，利用 GladeXML 函數庫載入 glade 文件。將之儲存於 C:\helloglade.php 。

<?php
//This method is called when the button is clicked
function onClickButton() {
    echo "button clicked!\r\n";
    Gtk::main_quit();
}

$glade = new GladeXML('helloglade.glade');

//Let glade do all the signal connections we specified in the file
$glade->signal_autoconnect();

//Start the main loop
Gtk::main();
?>

執行:

C:\> php5\php-win.exe helloglade.php

helloglade.rb

以 Ruby 撰寫一個程式，利用 GladeXML 函數庫載入 glade 文件。將之儲存於 C:\helloglade.rb 。

require 'gtk2'
require 'libglade2'

class SignalsHandler
    #This method is called when the button is clicked
    def onClickButton(*args)
        puts "button clicked!\r\n";
        Gtk::main_quit();
    end
end
signalMap = SignalsHandler.new

Gtk.init
glade = GladeXML.new('helloglade.glade')

#Let glade do all the signal connections we specified in the file
window1 = glade['window1']
window1.signal_connect("destroy") {
    Gtk.main_quit
}
glade.signal_autoconnect_full do |source, target, signal_name, handler_name, signal_data|
    source.signal_connect(signal_name) {
        signalMap.send(handler_name, signal_data)
    }
end

#Start the main loop
Gtk.main

執行:

C:\> ruby\bin\rubyw.exe helloglade.rb