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

  • Werner Schuster
  • 苏宇

2007 年 9 月 20 日

话题:Ruby语言 & 开发

人们总是在不断在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方法,而斜线符号后的所有信息都作为参数传给处理函数。这种处理事件的方式要比另一种界面交互方式——发布 / 订阅模式——简单多了。
  • flowstack等布局方法

综上所述,哪怕只是因为它那些不同于其他 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
Ruby语言 & 开发