Ruby Shoes：用户界面、图形及动画的轻量之选

作者 Werner Schuster 译者 苏宇 发布于 2007年9月20日 上午3时30分

社区

Ruby

主题

动态语言,

富客户端/桌面

标签

元编程,

GUI

人们总是在不断在Ruby GUI领域进行尝试。现已知的老式方法包括：将Ruby绑定到Qt或者GTK这样的用户界面库，或者使用基于JRuby的嵌入式DSL或者API创建Swing界面，关于后者，可以看看这边3种不同的实现途径。上述几种方法均采用不同的方法创建及排列界面控件。

Ruby Shoes实现GUI的方式则略显不同。Ruby Shoes出自Why's (Poignant) Guide to Ruby的作者Why The Lucky Stiff之手，这位高产的开发者还开发了HPricot（HTML解析器）、Web框架Camping等许多软件。Why的Ruby Shoes工具箱基于Cairo（绘图）以及Pango（文本）等GTK技术开发，GUI控件的数目受限于设计，而且现有的控件使用到了系统相关的GUI 组件。目前我们可以在MacOSX、Windows以及GTK图形环境下使用它。

Ruby Shoes用C语言实现，并通过Ruby扩展库同Ruby代码交互。在自述文件中，作者声称受到了HyberCard这样的工具包，Processing以及NodeBox这样的语言的启发。我们可以通过Ruby Shoes自带的样例代码，看出后面几种专门用于完成可视化（Visualization）任务的近代语言对它的影响。下面的代码片段实现了一个简单的计时器动画：

l = text "0"
animate(24) do |i|
  l.replace "#{i}"
end

animate调用使用一种十分简洁的方法处理动画。数字参数表示了动画的帧速，程序根据该速率执行代码块以更新动画。

Ruby Shoes还支持通过线条、椭圆以及路径这些基本元素来创建图形，并支持变形、缩放、旋转这样的操作。接下来的这个例子展示了如何响应鼠标的移动。

Shoes.app do
  radius = 20.0
  vert = width - 30.0
  hor = width - 30.0
  o = oval(hor, vert, 10.0)
  animate(10) do |anim|
    nofill
    clear do
      oval(hor - radius, vert - radius, radius * 2.0)
      satellites = vert / 10
      satellites.to_i.times {|x|
        h = hor + Math::sin(((6.28 / satellites) * x )) * 40.0
        v = vert - Math::cos(((6.28 / satellites) * x )) * 40.0
        fill rgb(1.0 / satellites, 1.0 / satellites, 0.8)
        oval(h, v, 5.0)
      }
      skew vert / 10 * Math::cos(anim)
    end
  end
  motion do |x, y|
    hor, vert = x, y
  end
end

借助它的动画及图形功能，像课件设计及可视化这样的图形应用变得简单了。这并不令人惊讶，因为Ruby Shoes本身源于Hackety项目，其初衷就是为编程新手降低编程的门槛。

另一方面，通过示例，我们还可以看到它使用了Web的理念。Ruby Shoes引入了URL和链接，使得界面行为的实现更为简易，而且，在图形界面中，设置和处理链接同样简单。下面的示例是一个简单的类/对象浏览器，用一个可分页的列表展示所有已加载的类，每个类都是一个链接，点击链接，会显示该类的所有实例。

1   module Util
2     def self.find_objects(name, from=0, to=10)
3       objects = []
4       c = 0
5       # get the class object from its name string
6       name_const = eval(name)
7       ObjectSpace::each_object( name_const ){|x|
8         if c >= from
9           objects << x
10        end
11        break if c >= to
12        c += 1
13      }
14      objects.sort{|first, second| first.to_s <=> second.to_s }
15    end
16  end
17  class ClassList < Shoes
18    url '/', :index
19    url '/objects/(\d+)', :object
20    url '/next', :next_page
21    url '/prev', :prev_page
22    def index
23      @@from = 0
24      object(0)
25    end
26    def next_page
27      @@from += 10
28      object(@@from)
29    end
30    def prev_page
31      @@from -= 10
32      object(@@from)
33    end
34    def object(num)
35      @@from ||= 0
36      num = num.to_i
37      stack :width => 500 do
38        flow :width => 200, :margin => 10, :margin_left => 200, :margin_top => 20 do
39          obj = Util::find_objects(@@objects[num].to_s)
40          text "#{obj.size}:" + obj.join(',')
41        end
42        flow :width => 380, :margin_left => 10 do
43          @@links = text ""
44          links = ""
45          if @@from >= 10
46            links +=  "<a href='/prev'>prev</a>\n"
47          end
48          @@objects[@@from, @@from+10].each_with_index{|el, idx|
49            links += "<span> <a href='/objects/#{@@from + idx}'>#{el}</a></span>"
50          }
51          links += "<a href='/next'> next</a>"
52          @@links.replace links
53        end
54      end
55    end
56  end
57  @@objects = Util::find_objects("Class", 0, 200)
58  Shoes.app :width => 640, :height => 700, :title => "Classes"

上述代码显示了Ruby Shoes中的一些理念：

• 给URL模式赋予处理函数的URL路由功能
  18到21行展示了URL是如何映射到处理方法的。很容易看出来，应用的根是对应到index方法的。同理，objects目录下的所有地址匀对应到object方法，而斜线符号后的所有信息都作为参数传给处理函数。这种处理事件的方式要比另一种界面交互方式——发布/订阅模式——简单多了。
• flow和stack等布局方法

综上所述，哪怕只是因为它那些不同于其他GUI的理念，Ruby Shoes也是绝对值得一试的。但是，如其作者所言，目前项目还处于开发阶段，将其投入实际使用还为时尚早，因为目前有些理念仍存变数。另外，目前文档的缺乏，也是阻挠其推广的一大因素。

尽管如此，Ruby Shoes的动画及图形功能使搭建快速应用原型极为容易。关于Ruby Shoes的更多信息请参考RubyInside提供的Ruby Shoes资源列表，或者求助一下攻略，使用简单GUI组件上手或者从2D功能上上手。

查看英文原文：Ruby Shoes for lightweight GUIs, graphics and animation

---

译者简介：苏宇，网名beanworms，软件工程师，开源项目XRuby成员。爱好广泛，尤喜烹饪。乐于寻找更好的解决问题的方法，目前对Ruby技术颇为着迷，个人blog为：http://azure-sky.javaeye.com/。参与InfoQ中文站内容建设，请邮件至china-editorial[at]infoq.com。

• 更早的 >