Thinking more...

大多數的 gtk+ Windows 應用程式都有相似的問題。
第一步，要先知道應用程式是使用哪裡的 gtk+ library，一般省麻煩的，會自己包在一起，安裝時會放在安裝目錄下。所以可以找到 etc/gtk-2.0 這個目錄，請編輯 gtkrc ，加上：

style "user-font"
{
    font_name="Sans 12"
}
widget_class "*" style "user-font"

就可以解決了。
如果不是在安裝目錄下的，就得自己回想一下看之前安裝在哪裡了。

不知道為什麼，之前覺得這很麻煩，所以現在才來試，結果發現很簡單。

試的過程裡，還用了easy_install (setuptools)，嘖嘖，這是自找麻煩啊~

步驟其實很簡單：

1. 先到GTK+ - Download for Windows網頁，找All-in-one bundles，我用的是2.20，下載以後，解開放到 c:\gtk+ 下，然後在環境變數PATH加上c:\gtk+\bin。
2. 在PyGTK下載網頁的PyGTK for Microsoft Windows一節裡，找到PyCairo、PyGObject、PyGTK，然後下載。要注意的是，點進去你會看到目錄，要點入目錄後，再找最新版本的.exe檔案。下載以後依序安裝即可。

就這樣，超簡單，居然讓我摸了好一陣子，實在是太懶得看英文了，下次不能偷懶。

Windows 下要攔截 Clipboard 的事件處理的話，除了要 override WndProc 以外，還得利用 Windows 提供的函數 SetClipboardViewer()、ChangeClipboardChain()、SendMessage() 來告訴 Windows 說，你的程式會處理 Clipboard。

那在 Gtk# 下要怎麼作呢?

答案是處理 Clipboard 的 OwnerChange 即可，所以程式可以這樣寫：

 private Gtk.Clipboard m_clipboard;
 
 public MainWindow (): base (Gtk.WindowType.Toplevel)
 {
  // Other stuff...
  m_clipboard = Gtk.Clipboard.Get( Gdk.Selection.Clipboard );
  m_clipboard.OwnerChange += new OwnerChangeHandler( delegate( object o, OwnerChangeArgs args ) {
   m_clipboard.RequestText( delegate(Gtk.Clipboard clipboard, string text) {
    Console.WriteLine( "text={0}", text );
   } );
  } );
 }

首先要取得系統的 Clipboard，所以用 Clipboard 的 static function：Get 來取得，接著再指派我們的處理事件進去就行了。相對於 Windows 上的來說，簡單很多。

我有參考 glippper (gnome提供的剪貼簿工具，用 python 寫的)，他拿了不只一個剪貼簿，它還用 GetForDisplay 去拿了另一個剪貼簿，我不知道有什麼差別，或許是處理多螢幕或是從遠端連進來時的情況吧～就目前來說，我應該暫時不必要照著glipper這樣作。

Windows 的 Tray Icon 基本上就是對應到 Gtk 的 StatusIcon，用法蠻簡單的，在繼承自Gtk.Window的類別裡增加一個成員：Gtk.StatusIcon m_icon，然後在 constructor 裡加入：

  m_icon = new Gtk.StatusIcon();
  m_icon.File = "./your_icon.png";
  m_icon.PopupMenu += new PopupMenuHandler( delegate( object o, PopupMenuArgs args ) {
   Console.WriteLine( "click" );
  } );

這樣就可以動了。

當在 Icon 按下右鍵時，就會觸發 PopupMenu 事件。

GtkDrawingArea 預設是不收 button_press_event 跟 key_press_event 的，所以要使用 gtk_widget_set_events() 告訴 GtkDrawingArea 要接收才行。

這個，我是去 Google Code Search 找來的，雖然 devhelp 可以查指令，但沒有範例，還是很難猜到怎麼用。

#include <gdk/gdkkeysyms.h> // 定義按鍵值的 header

static gboolean press_event( GtkWidget* widget, GdkEventButton* event, gpointer data )
{
 if( debug )
  g_print("press_event: x=%f y=%f button=%d\n", event->x, event->y, event->button );

 if( event->button==1 )  { // left
 }
}

static gboolean key_event( GtkWidget* widget, GdkEventKey* event )
{
 if( debug )
  g_print( "event->keyval=%d event->state=%d\n", event->keyval, event->state );
 switch (event->keyval) {
  // 省略...
 }
 return TRUE;
}

int main( int argc, char* argv[] )
{
// 省略一萬行...
 g_signal_connect( drawing_area, "button_press_event", G_CALLBACK( press_event ), NULL );
 g_signal_connect( drawing_area, "key_press_event", G_CALLBACK( key_event ), NULL );

 // 要接收 button_press_event 跟 key_press_event 喔~
 gtk_widget_set_events( drawing_area, gtk_widget_get_events(drawing_area) | GDK_BUTTON_PRESS_MASK | GDK_KEY_PRESS_MASK );
// 省略兩萬行...
}

實際上是用 GDK+GtkDrawingArea 來畫，所以在下面的程式片斷，你會看到我宣告了 GtkDrawingArea 並且實作了 GtkDrawingArea 的 expose 事件。
GDK 支援的圖片格式很多，常見的 jpg、png、bmp 都沒問題。

static gboolean expose_event( GtkWidget* widget, GdkEventExpose* event, gpointer data )
{
 GError* error=NULL;
 int width=widget->allocation.width, height=widget->allocation.height;

 GdkPixbuf* buf=gdk_pixbuf_new_from_file_at_scale( "your_photo.jpg", &error );
 if( buf==NULL )
  g_print("load fail.\n" );
 else
 {
  bufWidth = gdk_pixbuf_get_width( buf );
  bufHeight = gdk_pixbuf_get_height( buf );
  gdk_draw_pixbuf( widget->window, NULL, buf, 0, 0, 0, 0, 
    (width>bufWidth?bufWidth:width), (height>bufHeight?bufHeight:height), 
    GDK_RGB_DITHER_NORMAL, 0, 0 );
  g_object_unref( buf );
 }
}

int main( int argc, char* argv[])
{
 GtkWidget* drawing_area=NULL;

 // 省略一萬行
 g_signal_connect( G_OBJECT(drawing_area), "expose_event", G_CALLBACK( expose_event ), NULL );

 // 再省略兩萬行... 
}

Seed 也支援對資料庫的存取，目前只支援 SQLite。
用法也超級簡單...

基本上只有 constructor 跟用來執行 SQL 的 exec()。以下代碼來自源碼裡 (modules/sqlite/example.js)：

#!/usr/local/bin/seed
Seed.import_namespace("sqlite");
d = new sqlite.Database(Seed.argv[2]);

d.exec("create table t1 (t1key INTEGER PRIMARY KEY,data TEXT,num double,timeEnter DATE);");
d.exec("insert into t1 (data,num) values ('This is sample data',3);");
d.exec("insert into t1 (data,num) values ('More sample data',6);");
d.exec("insert into t1 (data,num) values ('And a little more',9);");

d.exec("select * from t1", function(results){Seed.print(JSON.stringify(results))});

取出資料的作法則是將 callback 傳入，以處理一筆 record。上面是用 JSON 輸出整筆 record 內容，其實你也可以將欄位名稱代入 indexer 來取得該欄內容：

d.exec("select * from t1", function(results){Seed.print(results["data"])});

純手工寫 UI 實在是很苦，還好有 Glade，你可以用 Glade 設計出介面以後，再用 Seed 把事件指派一下就可以完成一個程式了。這裡假設你已經用 Glade 設計出畫面，把主要的視窗命名為 window1，並且存為 glade-1.glade。存好以後，要使用 gtk-builder-convert 把 .glade 轉為 .xml。

gtk-builder-convert glade-1.glade glade-1.xml

接著就可以寫 code 了：

#!/usr/bin/env seed
// First, you need to use gtk-builder-convert to convert glade to xml.
// gtk-builder-convert glade-1.glade glade-1.xml

// Import libraries that are used by the program
Seed.import_namespace("Gtk");

// Initialize GTK+
Gtk.init(null, null);
var ui = new Gtk.Builder();
ui.add_from_file("glade-1.xml");

var window = ui.get_object("window1");
window.signal.hide.connect(Gtk.main_quit);

// Start the main GTK+ loop and initiate the program
Gtk.main();

參考資料：Desktop Linux Applications with Javascript

GObject、Gio、Gtk、Glib、Clutter 等在範例裡看到的 library，在 Seed 原始碼裡是看不到的，Seed 是利用 GObject Introspection 來跟這些 library 互動。
Cairo、sqlite、readline 的話，因為並沒有使用 GObject 這個 library，所以 Seed 另外寫 Module 來跟這些 library 互動，你可以在 Seed 原始碼的 modules 目錄下看到～

Cairo 實際上是在 Canvas 這個 module 裡，Canvas 裡共有四個主要的類別：CairoCanvas、PDFCanvas、SVGCanvas、ImageCanvas，創建這些 Canvas 以後，基本上都是使用 Cairo 來在這些 Canvas 上繪圖。裡面沒有封裝 cairo_pattern_xxxx、cairo_text_xxxx、cairo_mask...等函數，所以不能用 Cairo 來繪圖或是繪字。

#!/usr/bin/env seed

Seed.import_namespace("Gtk");
Seed.import_namespace("Canvas");
Seed.import_namespace("Gdk");

//
// Initialize GTK+
//
Gtk.init(null, null);

// Create the main application window and set the title
var window = new Gtk.Window({title: "Canvas Demo"});
var vbox = new Gtk.VBox();
var drawingArea = new Gtk.DrawingArea();
var status = new Gtk.Statusbar();
var hbox = new Gtk.HBox();
var exposeEvent = function() { return true;};

//
// create Cairo Canvas
//
function createCairoCanvas()
{
 var cairo = Gdk.cairo_create( drawingArea.window );
 return new Canvas.CairoCanvas( cairo );
}

// 
// Demos from http://cairographics.org/tutorial/
//
function strokeDemo()
{
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 canvas.strokeStyle = "rgb( 0, 0, 255 )";
 canvas.strokeRect( 10, 10, 50, 50 );
 canvas.stroke();
 return true;
}

function fillDemo()
{
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 canvas.fillStyle = "rgb( 0, 0, 255 )";
 canvas.fillRect( 10, 10, 50, 50 );
 canvas.fill();
 return true;
}

function fourColorDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 canvas.strokeStyle = "rgb( 0, 0, 0 )";
 canvas.moveTo( 0, 0 );
 canvas.lineTo( 100, 100 );
 canvas.moveTo( 100, 0 );
 canvas.lineTo( 0, 100 );
 canvas.lineWidth = 10;
 canvas.stroke();

 canvas.fillStyle = "rgb( 255, 0, 0 )";
 canvas.globalAlpha = 0.8;
 canvas.fillRect( 0, 0, 50, 50 );

 canvas.fillStyle = "rgb( 0, 255, 0 )";
 canvas.globalAlpha = 0.6;
 canvas.fillRect( 0, 50, 50, 50 );

 canvas.fillStyle = "rgb( 0, 0, 255 )";
 canvas.globalAlpha = 0.4;
 canvas.fillRect( 50, 0, 50, 50 );
 return true;
}

function pathDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 canvas.strokeStyle = "rgb( 255, 0, 0 )";
 canvas.beginPath();
 canvas.moveTo( 25, 25 );
 canvas.lineTo( 50, 37.5 );
 canvas.lineTo( 75, 25 );
 canvas.arc( 50, 50, 25*Math.sqrt(2), -0.25*Math.PI, 0.25*Math.PI, false );
 canvas.bezierCurveTo( 50, 37.5, 50, 62.5, 25, 75 );
 canvas.closePath();
 canvas.stroke();
 return true;
}

function scaleAndTransformDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 canvas.strokeStyle = "rgb( 255, 0, 0 )";
 canvas.lineWidth=10;
 canvas.save();
 canvas.scale( 0.5, 1 );
 canvas.arc( 50, 50, 40, 0, 2*Math.PI, true );
 canvas.stroke();

 canvas.translate( 100, 0 );
 canvas.arc( 50, 50, 40, 0, 2*Math.PI, true );
 canvas.restore();
 canvas.stroke();

 return true;
}

// 
// Demos from http://cairographics.org/samples/
//
function arcDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 var xc = 128;
 var yc = 128;
 var radius = 100;
 var angle1 = 45 * (Math.PI/180);
 var angle2 = 180 * (Math.PI/180);

 canvas.lineWidth = 10;
 canvas.arc( xc, yc, radius, angle1, angle2, true );
 canvas.stroke();

 canvas.fillStyle = "rgb( 255, 51, 51 )";
 canvas.globalAlpha = 0.6;
 canvas.lineWidth = 6;
 canvas.arc( xc, yc, 10, 0, 2*Math.PI, true );
 canvas.fill();

 canvas.arc( xc, yc, radius, angle1, angle2, true );
 canvas.lineTo( xc, yc );
 canvas.arc( xc, yc, radius, angle2, angle2, true );
 canvas.lineTo( xc, yc );
 canvas.stroke();

 return true;
}

function clipDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 canvas.arc( 128, 128, 76.8, 0, 2*Math.PI, true );
 canvas.clip();
 canvas.beginPath();
 canvas.fillRect( 0, 0, 256, 256 );
 canvas.strokeStyle = "rgb( 0, 255, 0)";
 canvas.moveTo( 0, 0 );
 canvas.lineTo( 256, 256 );
 canvas.moveTo( 256, 0 );
 canvas.lineTo( 0, 256 );
 canvas.lineWidth = 10;
 canvas.closePath();
 canvas.stroke();

 return true;
}

function curveRectangleDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 var x0 = 25.6;
 var y0 = 25.6;
 var rect_width = 204.8;
 var rect_height = 204.8;
 var radius = 102.4;
 var x1, y1;

 x1 = x0 + rect_width;
 y1 = y0 + rect_height;
 if( rect_width/2 < radius ) {
  if( rect_height/2<radius ) {
   canvas.moveTo( x0, (y0+y1)/2 );
   canvas.bezierCurveTo( x0, y0, x0, y0, (x0+x1)/2, y0 );
   canvas.bezierCurveTo( x1, y0, x1, y0, x1, (y0+y1)/2 );
   canvas.bezierCurveTo( x1, y1, x1, y1, (x0+x1)/2, y1 );
   canvas.bezierCurveTo( x0, y1, x0, y1, x0, (y0+y1)/2 );
  }
  else {
   canvas.moveTo( x0, y0+raius );
   canvas.bezierCurveTo( x0, y0, x0, y0, (x0+x1)/2, y0 );
   canvas.bezierCurveTo( x1, y0, x1, y0, x1, y0+radius );
   canvas.lineTo( x1, y1-radius );
   canvas.bezierCurveTo( x1, y1, x1, y1, (x1+x0)/2, y1 );
   canvas.bezierCurveTo( x0, y1, x0, y1, x0, y1-radius );
  }
 }
 else {
  if( rect_height/2<radius ) {
   canvas.moveTo( x0, (y0+y1)/2 );
   canvas.bezierCurveTo( x0, y0, x0, y0, x0+radius, y0 );
   canvas.lineTo( x1-radius, y0 );
   canvas.bezierCurveTo( x1, y0, x1, y0, x1, (y0+y1)/2 );
   canvas.bezierCurveTo( x1, y1, x1, y1, x1-radius, y1 );
   canvas.lineTo( x0+radius, y1 );
   canvas.bezierCurveTo( x0, y1, x0, y1, x0, (y0+y1)/2 );
  }
  else {
   canvas.moveTo( x0, y0+radius );
   canvas.bezierCurveTo( x0, y0, x0, y0, x0+radius, y0 );
   canvas.lineTo( x1-radius, y0 );
   canvas.bezierCurveTo( x1, y0, x1, y0, x1, y0+radius );
   canvas.lineTo( x1, y1-radius );
   canvas.bezierCurveTo( x1, y1, x1, y1, x1-radius, y1 );
   canvas.lineTo( x0+radius, y1 );
   canvas.bezierCurveTo( x0, y1, x0, y1, x0, y1-radius );
  }
 }
 canvas.closePath();
 canvas.fillStyle = "rgb( 128, 128, 255 )";
 canvas.fill(); // no fill_preserve(), so you won't see the border.
 canvas.strokeStyle = "rgb( 255, 0, 0 )";
 canvas.globalAlpha = 0.5;
 canvas.lineWidth = 10;
 canvas.stroke();

 return true;
}

function curveToDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 var x=25.6, y=128;
 var x1=102.4, y1=230.4, x2=153.6, y2=25.6, x3=230.4, y3=128.0;

 canvas.moveTo( x, y );
 canvas.bezierCurveTo( x1, y1, x2, y2, x3, y3 );
 canvas.lineWidth = 10;
 canvas.stroke();

 canvas.strokeStyle = "rgb( 255, 51, 51 )";
 canvas.globalAlpha = 0.6;
 canvas.lineWidth = 6;
 canvas.moveTo( x, y ); canvas.lineTo( x1, y1 );
 canvas.moveTo( x2, y2 ); canvas.lineTo( x3, y3 );
 canvas.stroke();

 return true;
}

function rotateDemo() {
 drawingArea.window.clear();

 var canvas = createCairoCanvas();
 canvas.translate( 128, 128 );
 canvas.rotate( 45*Math.PI/180 );
 canvas.scale( 0.9, 0.9 );

 canvas.fillStyle = "rgb(200,0,0)";
 canvas.fillRect( 10, 10, 55, 50 );

 canvas.strokeStyle = "rgb( 0, 200, 0 )";
 canvas.strokeRect( 50, 50, 155, 150 );

 canvas.strokeStyle = "rgb( 0, 0, 255 )";
 canvas.arc( 137.5, 137.5, 100, 0, Math.PI*2, true );
 canvas.stroke();
 return true;
}

//
// routines
//
function createButton( label, handler ) {
 var button = new Gtk.Button( {label: label} );
 button.signal.clicked.connect( handler );
 return button;
}

function createButtonGroup()
{
 var buttonGroup = new Gtk.VBox();
 //var buttonGroup = new Gtk.VButtonBox();
 buttonGroup.pack_start( createButton( "Stroke", function() {
  exposeEvent = strokeDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Fill", function() {
  exposeEvent = fillDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "4 color", function() {
  exposeEvent = fourColorDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Path", function() {
  exposeEvent = pathDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Scale and Transform", function() {
  exposeEvent = scaleAndTransformDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Arc", function() {
  exposeEvent = arcDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Clip", function() {
  exposeEvent = clipDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Curve Rectangle", function() {
  exposeEvent = curveRectangleDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Curve To", function() {
  exposeEvent = curveToDemo;
  return exposeEvent();
 }), true, true);
 buttonGroup.pack_start( createButton( "Rotate", function() {
  exposeEvent = rotateDemo;
  return exposeEvent();
 } ), true, true);
 return buttonGroup;
}

//
// Events
//
function drawingArea_ExposeEvent() {
 return exposeEvent();
}

//
// Main
//

// Make the program terminate when the window is closed
window.signal.hide.connect(Gtk.main_quit);

drawingArea.signal.expose_event.connect( drawingArea_ExposeEvent );

hbox.pack_start( createButtonGroup(), false, false);
hbox.pack_start( drawingArea, true, true );

vbox.pack_start( hbox, true, true );
vbox.pack_start( status, false, false, 0);

window.add(vbox);
window.show_all();
window.resize( 640, 480 );

// Start the main GTK+ loop and initiate the program
Gtk.main();

關於這個例子，大部分都是從 Cairo網站上的範例搬來的，也幾乎演示了所有的函數，但還是有少數函數與屬性沒有涵蓋到，如 transform、setTransform、clearRect、quadraticCurveTo...等～
有需要再自己去翻 seed-canvas.c 看吧～

在Ubuntu裡安裝 Seed 很簡單，參考PPA for Orange Owners裡，把

deb http://ppa.launchpad.net/orange-owners/ppa/ubuntu intrepid main
deb-src http://ppa.launchpad.net/orange-owners/ppa/ubuntu intrepid main

放到 /etc/sources.list 裡，然後用 sudo apt-get update 更新，sudo apt-get install seed 來安裝即可。

執行 script 也很簡單，有兩種方法：

1. 直接以 seed 執行：seed your_script.js
2. 把 js 檔的第一行改為 #!/usr/bin/env seed，再以 chmod +x 為 js 檔加上執行權限，就可以用 ./your_script.js 執行。

目前官方沒有文件說明 Seed 內部有哪些類別與方法，這很讓人困擾，這兩天看了 source code 跟 example code 之後，大致上有點了解。

Seed 主要的類別是 Seed，提供了如下方法：

• include：用來含括其他 js，讓你可以為程式作適當的切割，不至於讓檔案變得太大而難以維護。

  Seed.include("other.js");

• print：印字串。

  Seed.print("Hello world!");

• check_syntax：檢查語法，你可以傳 javascript 程式進去檢查，如果有錯，會丟出 exception。

  try { 
   Seed.check_syntax("Seed.print(;");
   Seed.print("syntax ok!");
  }
  catch( e ) {
   Seed.print( e.message );
  }

• spawn：執行外部程式，執行以後會回傳一個 object，這個 object 有兩個屬性：stdout 與 stderr。

  var result = Seed.spawn("ls");
  Seed.print( "=== spawn result(stdout) ===" );
  Seed.print( result.stdout );
  Seed.print( "=== spawn result(stderr) ===" );
  Seed.print( result.stderr );
  

• fork：這跟 C 的 fork() 一樣，回傳值是 0，表示是子行程，-1 表示失敗，大於 0 的值，表示是父行程。

  var pid = Seed.fork();
  if( pid == 0 ) { // child process
   var result = Seed.spawn( "ls" );
   Seed.print( result.stdout );
   Seed.quit();
  }
  else if( pid == -1 ) {
   Seed.print( "cannot create child process." );
  }
  else { // parent process.
   Seed.print( "I am parent process." );
  }
  

• quit：離開。
• introspect：這個函數可以用來探知類別成員函數如何使用，安裝 Seed 以後，/usr/share/doc/seed/examples 下有個 introspect.js，就是一個很好的範例。不過我還不是很懂怎麼去用～
• import_namespace：含括其他 library 進來使用，不要跟 include 搞混了，include 是含括其他 js 檔。

昨天在這兒：Building desktop Linux applications with JavaScript看到的，現在可以用 JavaScript 來寫 GTK Application 了，如果以後再支援 DOM、selector與類似 XUL 語法(GLADE?)的話，應該會吸引一堆會 javascript + html 的人來用吧～
不過話說回來，XUL 好像也沒非常風行啊～

該專案的官方網站在：Seed

Anyway, 如果你想試試的話，已經有人打包了 for Ubuntu 的 package 了，位置在這裡：PPA for Orange Owners
詳細安裝方法，文章裡都寫的很清楚，這裡就不再贅述了。