《R和Ruby数据分析之旅》一1.2　Shoes

1.2　Shoes

R和Ruby数据分析之旅
本章的第二部分将介绍Shoes——一个基于Ruby的用户界面工具包。Shoes通常并不被用作用户界面工具，而且Ruby本身也并不以建立桌面图形界面见长。其他更为流行的Ruby用户界面工具包有FXRuby、WxRuby、qtRuby和Tk。如果要求完全跨平台，JRuby加Swing的组合是个好选择。尚有不少可以代替Swing的选择，比如SWT和Limelight。在Mac平台上，MacRuby则是个很好的备选。

但在本书中，我们将使用Shoes。

1.2.1 何为Shoes

Shoes是个基于Ruby的、用于编写图形程序的、跨平台的工具包。Shoes是完全地、单纯地基于Ruby的，这一点与多数其他工具包不同。其他工具包一般是Ruby和其他UI工具包的混合体。而且Shoes上手非常容易，这是本书使用它的主要动因。

Shoes最初的创作者叫做why the lucky stiff（是的，这就是他的名字），一个相当著名和神秘的Ruby程序员。他还兼做卡通绘制和音乐演奏。他出名的最主要因素可能是写作了Why’s (poignant) Guide to Ruby，这是一本完全不像编程书籍的教授Ruby编程的书。

由于未知的原因，_why（这是他的别称）在2009年8月注销了他的Twitter和GitHub1账号，并关闭了他的个人网站，这都曾经是Ruby程序员们热衷出没的场所。但是，他完成的许多项目，包括Shoes，被Ruby社区收纳并传承下去。

1.2.2 五彩的“鞋子”（Shoes）

红宝石（Ruby的英文原义）是红色的，所以鞋（Shoes的英文原义）也照样。Red Shoes（英文意为“红色的鞋子”）是Shoes的最初版本，它由_why基于C语言编写。_why离开之后，Ruby社区接管了它，在其基础之上，涌现出了不同类型的Shoes，每种都以不同的颜色来命名。

Red Shoes（红鞋）：这是_why编写的最初版本，以C语言为基础。
White Shoes（白鞋）：它又被称作meta-Shoes，是各版本Shoes中最通用的一个。它基本上是一组RSpec2测试，用来确认其他版本的Shoes都服从一个统一的标准。
Blue Shoes（蓝鞋）：它建立在Qt框架3上，用C++编写，是最初的Ruby用户界面框架。
Green Shoes（绿鞋）：这是与Red Shoes在理念上最接近的一款Shoes，因为它使用了GTK4和Cairo5的Ruby绑定接口。它也是最先进的版本之一。
Brown Shoes（棕鞋）：这是用JRuby编写的基于Swing6的一个版本。
本书中提到的Shoes都是指Red Shoes。事实上，Red Shoes也是我唯一实际跑过代码的Shoes版本。所以，我要做一个“标准免责声明”，即后面那些代码不能保证在其他版本的Shoes上也能正确运行。但是，非常欢迎你作些这方面的尝试。

1.2.3 安装Shoes

Shoes的安装通常十分简单。如果你使用Mac或Windows系统，只要从Shoes的网站（http://shoesrb.com/downloads）上下载对应平台版本并安装即可。然而Shoes的使用有些反传统，并不像大多数Ruby程序那样通过控制台运行。你需要打开Shoes应用程序，用它来打开和运行你的Shoes程序。可以在Mac或Windows系统中等效地完成下面的工作：

$ /Applications/Shoes.app/Contents/MacOS/shoes test_shoes.rb

如果你使用某种Linux，Shoes的安装会更复杂一些。截至本书写作时，最好的方法是从源代码来完整地生成它。这并不算很复杂，只是需要先安装一些Shoes要依赖的其他的库。这里列出各种Linux下通用的安装步骤：

$ git clone git://github.com/shoes/shoes.git
$ cd shoes
$ gem install bundler
$ bundle install
$ rake

更详细的信息可以参考这个网站：https://github.com/shoes/shoes/wiki/Building-Shoes-on-Linux。

1.2.4 编写Shoes程序

我在本书中选择Shoes作为用户界面开发工具的一个主要原因是，它可以相当简便地开发很好的图形界面。因为它是纯Ruby的（与那些Ruby和其他工具的混合体相反），代码的可读性强，易于理解。

一个简单的Shoes程序会像下面这样：

Shoes.app do
   button("Click me!") do
     alert("Ruby rocks!")
   end
end

此程序生成一个简单的窗口，其中只有一个名为“Click me!”的按钮。点击该按钮，会弹出一个警告对话框，如图1-1所示。

尽管Shoes是一个简单的UI工具，但还是有很多特性，不可能用几节文字就介绍完整。我只能提供一些基本的例子。让我们从建立一个简单的秒表程序开始。

1．Shoes秒表
在例1-1中，我会展示如何用Shoes建立一个非常简单的秒表。

例1-1 Shoes秒表

Shoes.app height: 200, width: 200 do
   background lightblue
   stack margin: 10 do
     caption strong "Shoes Stopwatch"
     flow do
       button "start" do
        @time = Time.now
        @label.replace "Started at #{@time.strftime '%l:%M:%S %p'}"
       end
       button "stop" do
          @label.replace "Stopped, ", strong("#{Time.now - @time}"),
           " seconds elapsed."
       end
    end
    @label = para "Press ", strong("start"), " to begin timing."
  end
end

所有的Shoes应用代码都必须包含在一个对Shoes.app的调用中。你可以随意设置起始窗口的外观。本例中，我们设定了窗口的宽和高。第二行7代码则设定了窗口的背景颜色。这并不总是必需的，但注意lightblue（浅蓝色）是Shoes窗口的预设颜色。Shoes 借鉴了X118和HTML9调色板定义的一系列默认颜色方案，并用直观的名字来代表它们。如果你倾向于建立自己的自定义颜色方案，可以利用rgb方法。

Shoes应用程序中的元素用槽（slot）来安排，它作为容器，可以盛载若干元素，或者其他槽。槽还可以被嵌套，通过对槽和元素进行嵌套可以编制相当复杂的布局。槽有两种常见类型，即栈（stack）和流（flow）

栈。栈是按上下次序排放的一“摞”元素的集合。例1-1所示的秒表程序将3个元素放入了栈中：一个说明文本块（block）、一个流槽和一个段落文本块。
流。流槽将元素按一个接一个的顺序排成一“队”，紧密衔接。例1-1所示的秒表程序将两个按钮放到一个流中，一个标记为“start”（开始），一个标记为“stop”（结束）。
你也可以为槽设置配置参数。秒表例子中的栈就通过参数设置了10个像素宽的边距。

button（按钮）元素为应用程序生成一个按钮。如果在元素中加入像例子中所示的代码块，当单击按钮时，就会执行其中的代码。另一种设置按钮点击后行为的方法是使用click方法，稍后我们会讲到。

执行先前的代码，你可以看到图1-2所示的秒表。

这是个相当传统的用户界面，让我们来做点更有艺术含量的事情。

2．Shoes涂鸦程序
我们来编写一个简单的涂鸦程序。例1-2中的这个程序是个标准的演示程序，并没有多少使用价值，但阐明了Shoes的一些基本概念。

例1-2 Shoes涂鸦程序

Shoes.app do
  fill red
  orig_left, orig_top = nil,nil
  animate 24 do
    button, left, top = self.mouse
    line(orig_left, orig_top, left, top) if button == 1
    star(orig_left, orig_top, 5, 15, 5) if button ==3
    orig_left, orig_top = left, top
  end
end

这个程序看上去比秒表程序还要简单。让我们从描述animate方法入手来理解它。这个方法启动一个动画计时器，与程序剩下的部分并行执行。我们指定了当动画循环开始后每秒显示的帧数，所以程序会无限地循环下去。你可能会想到，这对于模拟运行而言是一个完美的方法。

self.mouse方法返回一个由3个数组成的数组。第一个数是按下的鼠标按键的编号。如果没有键被按下，这个值将是0。第二个和第三个数表示鼠标光标的左端和上端的位置。我们将这3个数分别赋给变量button、left和top。

如果鼠标左键（即1号键）被点击，程序会画一条从光标原来位置出发，到光标当前位置的线段。因为我们处在动画循环中，如果我们连续移动鼠标，就会产生在屏幕上绘画的效果。

相似地，如果点击3号按键（通常是滚轮键），程序会画一个五角星。因为我们定制了所有画出的图形的填充颜色为红色，我们将会在屏幕上画出红五星。程序运行结果的一个示例如图1-3所示。
]