Shoes，Ruby GUI！

 Tk 总是报错，让我很不爽。

>ruby shoes.rb e:/ruby/lib/ruby/1.8/tk.rb:1557: [BUG] Segmentation fault ruby 1.8.6 (2007-09-24) [i386-mswin32] This application has requested the Runtime to terminate it in an unusual way. Please contact the application's support team for more information. >Exit code: 3

今天逛InfoQ 的时候居然发现了Shoes，一个Ruby GUI 客户端。试了一下，比Ruby/Tk 好用。比如这个Tutorial 里面的例子。假设下面的代码保存在background.rb 里面。

Shoes.app do background "#F3F".."#F90" title "Shoooes", :top => 60, :align => "center", :font => "Trebuchet MS", :stroke => white end

 

安装Shoes 之后，用Shoes 打开这个.rb 文件就可以看到：

可能是由于刚出现的原因，响应还很慢（有人用"两百来行"编了个扫雷，鼠标点下去半天没反应）。但我相信它会引起又一轮Ruby 浪潮。

Shoes 并不是针对严谨的大规模GUI 应用，Shoes 应用一般都很灵巧。Shoes 的目标是让GUI 编程愉快、有趣。

Shoes 有本漫画教程NOBODY KNOWS SHOES，是why 大叔亲自写的。

一个GUI 应该包括显示和响应两方面元素。

Shoes 有10种元素用于显示：

• para

para 是paragraph 的简写。你不必给它任何坐标或者尺寸参数。它会自动填充它所在的box。但可以为文本指定格式。比如：strong() 就是加粗，em() 是强调等。

Shoes.app do para "Testing test test. ", strong("Breadsticks. "), em("Breadsticks. "), code("Breadsticks. "), strong(ins("Very good.")) end  

还可以指定字体大小：title 什么的或者直接指定（如：para "Oh, to fling and be flung.", :size => 48）

Shoes.app do title "Title/n" subtitle "Subtitle/n" tagline "Tagline/n" caption "Caption/n" para "Para/n" inscription "Inscription/n" end

• stacks & flows

stack 和flow 就是Shoes 里面的布局管理器。stack 把部件垂直摞在一起。flow 也是一种容器，只不过它在水平方向上摆放部件。如果一行摆不下了，它会另起一行。主窗口本身也是一个flow。flow 和stack 组合可以形成不同的布局。如果你是一个Web 开发者，你会发现它们很像CSS布局引擎。也不奇怪，Shoes 的作者why the lucky stiff说他深受Web 开发的影响。比如：后面你会看到的Shoes 的一种虚拟部件link。

Shoes.app do @o = oval :top => 0, :left => 0, :radius => 40 stack :margin => 40 do title "Dancing With a Circle" subtitle "How graceful and round." end motion do |x, y| @o.move width - x, height - y end end

当鼠标移动时，motion 会拿到你鼠标的坐标重新绘制圆。

• button

一旦你点击button，就会激活它之后的block。

Shoes.app { button("Trurl?") { alert("Klapaucius!") } }

还可以这么写：

Shoes.app { @b = button("Trurl?") @b.click { alert("Klapaucius!") } }

button 还有个方法focus()。如果用户敲了回车，按钮就会按下（手册上这么说，但我还没试成）。

• image

图片可以是PNG, JPEG 或者GIF；可以从本地文件系统，也可以从Web 上载入。还可以通过:height 和:width调整图片大小。

Shoes.app do image("f:/Ruby.jpg", :click=>"http://google.com") end

• edit-line

text 把敲进编辑框的内容当作字符串返回。

• 

Shoes.app do @e = edit_line :width => 400 button "O.K." do alert @e.text end end 

如果是多行，可以用edit-box。

Shoes.app do @e = edit_box "Would that I...", :width => 400, :height => 240 button "O.K." do alert @e.text end end

• link

Shoes.app do para(link("Google", :click=>"http://google.com")) end

• background

一幅背景包括三个要素：颜色、明暗变化和图片。你可以用内建的颜色，也可以用rgb 方法。查看这里。

• url

 class BookList < Shoes url '/', :index url '/twain', :twain url '/kv', :vonnegut def index para "Books I've read: ", link("by Mark Twain/n", :click => "/twain"), link("by Kurt Vonnegut/n", :click => "/kv") end def twain para "Just Huck Finn./n", link("Go back.", :click => "/") end def vonnegut para "Cat's Cradle. Sirens of Titan. ", "Breakfast of Champions./n", link("Go back.", :click => "/") end end Shoes.app :width => 400, :height => 500

url 还可以是正则表达式：

class Dictionary < Shoes url '/', :index url '/(/w+)', :word def index stack do title "Enter a Word" @word = edit_line button "OK" do visit "/#{@word.text}" end end end def word(string) stack do para "No definition found for #{string}. ", "Sorry this doesn't actually work." end end end Shoes.app

• clear

Shoes.app { @poem = stack { para " My eyes have blinked again And I have just realized This upright world I have been in. My eyelids wipe My eyes hundreds of times Reseting and renovating The scenery." } para(link("Clear"). click { @poem.clear }) }

 

此外，Shoes 还提供了click，animate等。

Shoes.app :width => 200, :height => 120 do @seconds = 0 @paused = false def display_time @display.clear do title "%02d:%02d:%02d" % [ @seconds / (60*60), @seconds / 60 % 60, @seconds % 60 ], :stroke => @paused ? gray : black end end @display = stack :margin => 10 display_time button "Pause", :width => '50%' do @paused = !@paused display_time end button "Reset", :width => '50%' do @seconds = 0 display_time end animate(1) do @seconds += 1 unless @paused display_time end end

如果你感兴趣，应该去Shoebox 逛逛，N多牛人啊！