跳转到内容

Rebol 编程/语言特性/VID

来自维基教科书,开放世界中的开放书籍

VID 代表 **Visual Interface Dialect** (视觉界面方言),是使用 Rebol/View 设计图形用户界面的最常用方法。对于使用大量图形的界面(例如图像、动画)非常有效。

VID 的一大优势是,只需几行代码就可以创建用户界面,例如使按钮执行操作。

GUI 本身是平台独立的,这意味着无论在 Windows、MacOSX、Linux 还是其他平台上运行程序,它看起来都一样。

关于 VID 最重要的一点是,顾名思义,它是一种方言或 Rebol 的子语言。用 VID 编写的代码不会像 Rebol 代码那样评估,而是必须先转换为 Rebol 代码才能执行。本质上,一个称为 **layout** 的代码生成器创建 Rebol 代码,然后由 Rebol View 引擎执行。视觉界面方言中使用的单词可能与普通 Rebol 函数的拼写相同,但使用方式完全不同。

view lo: layout [ button "Press Me" return button "Press Me Too!" ]

这里,**layout** 接受用视觉界面方言编写的单词块。你可以看到这里使用了 **return** 这个词,但在这种情况下,它的含义完全不同。它不是用来 **返回** 值,而是告诉 **layout** 引擎将下一个按钮放置在屏幕的左侧,并在下一行。**return** 的这种不同含义也说明了 Rebol 编程的上下文敏感性。

**layout** 返回一个 Rebol 代码块,在本例中,它被分配给变量 **lo**。如果你接着查看由

probe lo

生成的代码,你会看到一屏一屏的代码在你面前闪过。


以下是一些使用 VID 可以做的事情的示例。

需要更多示例

界面元素

[编辑 | 编辑源代码]

VID 布局中的每个图形元素都称为 **界面元素**,它本质上是对象的树结构。一个界面元素可以包含其他界面元素。

界面元素和界面元素对象的完整机制将在下一章中解释。

示例说明

[编辑 | 编辑源代码]

示例仅显示 **layout 代码块**,即用于创建布局的块。所有示例应写为

view layout [button "Hello World!"]

而我们只显示

button "Hello World!"

这样写示例更容易。

按钮有两种:BTN 和 BUTTON

btn "Hello World!"


此按钮是标准类型,最容易使用。它会随文本自动缩放,但你可以设置按钮的宽度,例如

btn 150 "Hello World!"
btn 150 "This is Rebol"


为 BTN 提供不同的颜色和尺寸也很容易

btn 150x40 red "Big Red Button!"
btn 200x20 yellow "Wide Yellow Button!"


BUTTON 不同,因为它在颜色、边框大小和渐变方面提供了更多定制选项。

button "Hello World!"


按钮操作

[编辑 | 编辑源代码]

为了对按钮进行操作,你可以指定一个操作块。这只是一个代码块,在按下按钮时(例如在左键单击时)进行评估。这个代码块可以这样指定

 button "Hello World!" [print "Hello World!"]

运行此程序时,每次单击按钮,控制台都会打印“Hello World!”。

切换按钮

[编辑 | 编辑源代码]

切换按钮是一个有两种状态的按钮。切换按钮有两种:TOG 和 TOGGLE。

tog "Activated"
toggle "Activated"

与 BUTTON 一样,TOGGLE 可以定制。

https://wikibooks.cn/wiki/REBOL_Programming

选择框

[编辑 | 编辑源代码]

选择框是一个具有多种状态的按钮。它接受多个字符串来创建选择。以下是一个示例

choice "Excellent" "Good" "Ok" "Lacking" "Dismal"

我们可以通过在块中提供代码来扩展此示例。选择框的状态保存在 c/data/1 中

c: choice "Excellent" "Good" "Ok" "Lacking" "Dismal" [print c/data/1]

使用它,我们可以使用 SWITCH 基于特定选择触发事件

c: choice "Excellent" "Good" "OK" "Lacking" "Dismal" [
    switch c/data/1 [
        "Excellent" [alert "Yeah!!!!!!"]
        "Good" [alert "Thank you!"]
        "OK" [alert "eh"]
        "Lacking" [alert "Come on!"]
        "Dismal" [alert "You can do better than that!"]
    ]
]

简单列表

[编辑 | 编辑源代码]

简单列表是单列列表,可以使用 TEXT-LIST 创建。优点是它很容易访问,在多列表布局中非常有用,其中多个列表需要交互。

一个简单列表

>> view layout [text-list data ["Hello World!" Rebol is Cool!]]


复杂列表

[编辑 | 编辑源代码]

复杂列表提供了更多功能,但设置需要更多时间。对于复杂列表,你可以使用

  • 多列
  • 不同的字体和颜色方案

对于典型的复杂列表,你可以使用 LIST

l: list [
  ... GUI code ...
] supply [
  ... DATA code ...
]

列表代码

[编辑 | 编辑源代码]

GUI 代码是一个简单的布局,它代表列表中的一个条目。该布局可以像 VID 中的任何其他布局一样灵活,因此您可以生成带有文本、图形或图像的垂直和水平布局。应遵循某些规则。

示例

l: list 300x100 [across text text text] supply []

将生成一个空的 **迭代面** 列表。

列表数据

[编辑 | 编辑源代码]

DATA 代码是为列表提供数据的代码,它是一个函数,在列表中的每个面都进行迭代。两个变量 **index** 和 **count** 可直接用于自动迭代函数中的数据。**index** 值由列表的每个 **列** 使用,而 **count** 指定每个 **行**。对于一个有 3 列的列表,序列将是

ROW1 COLUMN1
ROW1 COLUMN2
ROW1 COLUMN3

ROW2 COLUMN1
ROW2 COLUMN2
ROW2 COLUMN3

ROW3 COLUMN1
ROW3 COLUMN2
.
.
.

对于列表,**滚动条** 是独立的,也应该手动管理。它也可以放置在您想要的位置。

选择值

[编辑 | 编辑源代码]

列表布局中的事件可用于在您将鼠标悬停在列表条目上时选择或显示 **over** 颜色。

完整示例

[编辑 | 编辑源代码]

一个完整的示例

l: list 300x200 [
  across
  text 200 bold
  text 50 red
  text 50 blue
] supply [
  (complete this)
]

操作迭代的面

[编辑 | 编辑源代码]

**supply** 函数可以操作列表布局,因为您正在向下迭代列表。当您想要使文本样式、背景颜色或其他面属性数据依赖时,这很有用。

交替背景颜色示例
[编辑 | 编辑源代码]
l: list 300x200 [
  across space 0
  text 200 bold
  text 50 red
  text 50 blue
] supply [
  (complete this)
]

布局函数

[编辑 | 编辑源代码]

VID 提供了各种函数用于按特定布局排序您的面。

调整大小

[编辑 | 编辑源代码]

将 VID 与可调整大小的窗口一起使用有点困难,但仍然可行:您需要检测窗口何时调整大小,然后根据这个新大小重新绘制您的 GUI。

遵守可调整大小的布局

[编辑 | 编辑源代码]

要将 VID 与可调整大小的面一起使用,您需要了解 GUI 的尺寸。

VID 没有直接用于将面“附加”到 GUI 的特定尺寸相关位置的函数,因此我们需要自己执行这些计算。

面板是 VID 面组。这有很多优势

  • 面板中的面可以一起移动
  • 面板中的文本字段可以一起更新

更新面板面

[编辑 | 编辑源代码]

当您有一个需要自动填充的表单时,您可以一次填充每个字段,或者将它们分组到一个面板中,并使用 SET-FACE 一次性更新所有字段

person: panel [
  field field field
]

并更新所有字段

set-face person ["This" "is" "Cool"]

不仅可以使用字符串

set-face person [25$ now http://www.rebol.com]

如果您有除字段以外的其他面,则可以通过在块中插入 NONE 来跳过它们

person: panel [
  field field box field
]
set-face person ["This" "is" none "Cool"]

TODO:请检查 SET-FACE 在哪些面上有效

多个窗口

[编辑 | 编辑源代码]

在 REBOL 中,没有真正的“主窗口”概念,除了控制台。如果您关闭控制台,您将关闭所有窗口并退出正在运行的程序。如果您有一个从 Windows XP 中双击脚本图标运行的脚本,您将能够在没有控制台窗口的情况下运行您的程序,因此没有主窗口。

您可以打开任意数量的窗口,它们在功能上彼此平等,并且可以完全控制彼此。

VID 窗口实际上是面组,存储在另一个面对象中。这使您可以灵活地在窗口中或作为较大 GUI 的一部分呈现您的 GUI。

要打开一个窗口,您通常使用 VIEW

view layout [btn "Hello World"]

要从这个窗口打开其他窗口,请向 BTN 添加一个操作

view layout [
  btn "Hello World" [view/new layout [h1 "New Window"]]
]

VIEW/NEW 也很有用,如果您想在捕获来自已创建窗口的事件之前设置变量或运行其他代码。

写一些关于 DO-EVENTS 的内容。

如果您想快速显示带有消息和几个按钮的对话框,警报很有用。它是获取用户反馈的快速方法。ALERT 是最简单的

alert "This is an Alert Window"

将给出以下内容

REQUEST 提供了更多灵活性和各种按钮排列。

request "Do you want to Rock and REBOL?"

对话框

[编辑 | 编辑源代码]

如果您想要更多地控制对大范围面的视觉外观,样式很有用。假设您想让所有按钮都变红?您可以使用 **stylize** 来做到这一点。您可以生成一种不同于标准按钮的行为的新按钮。面中的所有部分都可以在自定义样式中进行更改。**样式是创建定制但统一的 GUI 外观和行为的最简单方法。**

可以将其视为文字处理器的样式调色板。您可以定义各种样式,在您的 GUI 中使用它们,并像更改文档中的所有部分标题一样更改它们。该概念也类似于与网页和 HTML 一起使用的层叠样式表。

使用样式有两种方法

'style 单词在布局中使用

view layout [
  style my-btn btn red
  my-btn "Customized Button"
]

如果您想要一个更大的独立样式部分,您可以将其定义为一个块

my-styles: stylize [
  my-btn: btn red
]

view layout [
   styles my-styles
   my-btn "Customized Button"
   my-btn "Another Button"
]

这可能应该移到视图,因为它比 VID 更基本的功能。

所有面都共享同一个事件系统,这意味着**处理面的事件的方式对所有面都是一样的**。(正确吗?)

要控制面的事件,可以使用 FEEL 关键字。

图像可以加载到 VID GUI 中。

特殊效果

[编辑 | 编辑源代码]
华夏公益教科书