- 1. 概述
- 2. 代码结构
- 3. 容器设定
- 4. 布局
- 5. 附加样式
- 6. 元件定义
- 6.1. 关键字
- 6.1.1.
left - 6.1.2.
center - 6.1.3. right
- 6.1.4.
top - 6.1.5.
middle - 6.1.6.
bottom - 6.1.7.
bold - 6.1.8.
italic - 6.1.9.
underline - 6.1.10.
extra - 6.1.11.
data - 6.1.12.
draw - 6.1.13.
font - 6.1.14.
para - 6.1.15.
wrap - 6.1.16.
no-wrap - 6.1.17.
font-size - 6.1.18.
font-color - 6.1.19.
font-name - 6.1.20.
react - 6.1.21.
loose - 6.1.22.
all-over - 6.1.23.
hidden - 6.1.24.
disabled - 6.1.25.
select - 6.1.26.
focus - 6.1.27.
hint - 6.1.28.
rate - 6.1.29.
default - 6.1.30.
with
- 6.1.1.
- 6.2. 数据类型
- 6.3. 动作器
- 6.1. 关键字
- 7. 面板
- 8. 样式
VID 一词代表视觉界面方言，其目的是提供一种用于在 Red View 引擎之上描述图形用户界面的简单的方言（DSL）。
VID 允许你指定要显示的每个图形组件，还给与你不同选择的布局方法：
-
水平或垂直流布局
-
网格定位
-
绝对定位
VID 将自动为你创建一个容器元件以持有你提供的元件描述。默认情况下，容器元件的类型为 window。
VID 代码由 layout 函数处理（view 函数内部调用就是它），然后被编译成一棵适合用来显示的内含元件的树。
|
注意
|
在 Red 的控制台使用 |
典型的 VID 代码区块具有以下结构：
[
<容器设定>
<布局描述>
]-
容器设定：影响容器对象（可以是面板或窗口）的设定。
-
布局描述：布局定位命令、样式定义和元件描述。
|
注意
|
所有部分都是可选的，没有必须要在 VID 区块中提供的强制性的内容。 |
默认情况下，VID 根据简单的规则将元件放置在容器元件中：
-
方向可以为水平或垂直
-
一个元件按当前的方向以当前的间隔被放置在另一个元件之后
默认：
-
原点（origin）：
10x10 -
间距（space）：
10x10 -
方向（direction）：
across -
对齐（alignment）：
top
这是在 across 模式中布置元件的方式：
这是在 below 模式中布置元件的方式（使用默认的 left 对齐方式）：
语法
across <alignment>
<alignment> : （可选）可以取的值：top | middle | bottom。描述
将布局方向设置为水平，从左到右。可选提供对齐修饰符来更改行中默认（top）的元件对齐方式。
语法
below <alignment>
<alignment> : （可选）可以取的值：left | center | right。描述
将布局方向设置为垂直，从上到下。可选提供对齐修饰符来更改列中默认（left）的元件对齐方式。
语法
return <alignment>
<alignment> : （可选）可以取的值：left | center | right | top | middle | bottom。描述
根据当前布局方向将位置移动到元件的下一行或下一列。可选提供对齐修饰符来更改行中或列中元件当前的对齐方式。
语法
at <offset>
<offset> : 下一个元件的位置 (pair!)。描述
将下一个元件放在绝对位置。该定位模式仅影响下一个元件，并不会更改布局流位置。所以，在下一个元件之后的元件将再次在布局流中跟着之前的元件被放置。
视图引擎提供了许多内建部件，VID 方言通过关联的关键字来附加地定义常用的样式以扩展它们。它们可以使用跟其底层元件类型一样的选项，也可以自由地通过 style 命令重新定义样式。
可以通过使用现有face类型或可用样式之一的名称，将布局中的face插入当前位置。
语法
<name>: <type> <options>
<name> : （可选）新组件的名称 (set-word!)。
<type> : 有效的元件类型或样式名称 (word!)。
<options> : （可选）选项列表。如果提供了 name，该单词将引用 VID 从元件描述中创建的 face! 对象。
每个元件类型或样式都有提供默认值，因此无需指定任何选项就可以使用一个新的元件。当需要选项时，以下小节将描述可接收的不同类型的选项：
-
关键字
-
数据类型
-
动作器
所有选项都可以以任意顺序指定，跟在元件或样式名称之后。一个新的元件名称或布局关键字标记了给定元件的选项列表的结尾。
|
注意
|
|
语法
data <list>
<list> : 内含项目的列表的字面值，或 Red 表达式 (block!)。描述
将该元件的 data 特征设置为内含值的列表，列表的格式取决于该元件类型的要求。
语法
draw <commands>
<commands> : 命令列表的字面值，或 Red 表达式 (block!)。描述
将该元件的 draw 特征设置为内含 Draw 方言命令的列表。有效的命令请参阅 Draw 方言文档。
语法
font <spec>
<spec> : 有效的 font 规格 (block! object! word!)。描述
将该元件的 font 特征设置为新的 font! 对象。关于 font! 对象的描述在这里。
|
注意
|
可以把 |
语法
para <spec>
<spec> : 有效的 para 规格 (block! object! word!)。描述
将该元件的 para 特征设置为新的 para! 对象。关于 para! 对象的描述在这里。
|
注意
|
可以把 |
这个关键字既可用作元件选项，也可用作全局关键字。可以使用任意数量的 react 实例。
语法
react [<body>]
react later [<body>]
<body> : 常规的 Red 代码 (block!)。描述
从 body 块创建一个新的响应器。当 react 用作元件选项时，在主体区块里面可以使用 face 单词来引用当前元件。当在全局使用 react 时，需要使用名称来访问目标元件。可选的 later 关键字会跳过在 body 区块被处理之后立即发生的第一次响应。
|
注意
|
响应器是 View 中响应式编程支持的部分，它的文档还将要编写。简而言之， |
6.1.23. hidden
语法
hidden描述
使该元件默认不可见。
语法
select <index>
<index> : 所选项的索引 (integer!)。描述
设置当前元件的 selected 特征，主要用于列表，表示哪个项目要被预先选择。
语法
hint <message>
<message> : 提示文本 (string!)。描述
当 field 的内容为空时，在 field 元件中提供提示信息。当提供任何新内容时，该文本消失（用户操作或设置 face/text 特征）。
语法
rate <value>
rate <value> now
<value>: 时长或频率 (integer! time!)。描述
以一个时长（time!）或频率（integer!）给该元件设置定时器。每次定时器到期时，将为该元件生成 time 事件。如果使用 now 选项，则会立即生成第一次 time 事件。
语法
default <value>
<value>: data 特征的默认值 (any-type!)。描述
定义当 text 特征的转换返回 none 时 data 特征的默认值。该默认值作为键值对存储在 options 特征中。
|
注意
|
目前仅被 |
除了关键字，还允许使用以下类型的字面值将设定传递给元件：
| 数据类型 | 目的 |
|---|---|
|
指定该元件的宽度。对于面板，表示布局中行或列的数量，是行还是列取决于当前的布局方向。 |
|
指定该元件的宽度和高度。 |
|
指定该元件的背景的颜色（如果适用于该元件的话）。 |
|
以十六进制记号（ |
|
指定该元件要显示的文本。 |
|
设置其 |
|
设置其 |
|
设置要作为该元件的背景显示的图片（如果适用于该元件的话）。 |
|
加载该 URL 指向的资源，接着根据它被加载后的类型处理该资源。 |
|
设置该元件的默认事件的动作。对于面板来说，指定他的内容。 |
|
使用现存的函数作为动作器。 |
|
(保留以供将来使用)。 |
动作器可以通过指定一个区块字面值或一个动作器名称后跟一个区块值来挂接到元件。
语法
<actor>
on-<event> <actor>
<actor> : 动作器的主体区块或动作器的引用 (block! get-word!)。
<event> : 有效的事件名称 (word!)。描述
可以通过仅提供动作器的主体区块来指定动作器，其规格区块是隐含的。动作器函数会被构造出来，接着被添加到元件的 actor 特征中。可以以这样的方式指定好几个动作器。
创建的动作器函数的完整规格为：
func [face [object!] event [event! none!]][...body...]可以从这里找到有效的事件名称的清单。
当一个区块或一个取词没有跟着任何动作器名称前缀被传递时，会按照这里的定义创建该元件类型的默认动作器。
可以定义子面板以把多个元件编为一组，并在最后应用特定的样式。如果没有明确指定面板的大小，将会自动计算新面板的大小以适应其内容。
在 VID 中使用特定的语法支持 View 的面板类元件类型：
语法
panel <options> [<content>]
<options> : （可选）面板的设定列表。
<content> : 面板的 VID 内容描述 (block!)。描述
在当前容器内部构造子面板，其内容是另外的 VID 区块。除了其他的元件选项之外，还可以提供一个整数分割器选项以设置网格模式布局：
-
如果方向是
across，则分割器表示列数。 -
如果方向是
below，则分割器表示行数。
语法
group-box <divider> <options> [<body>]
<divider> : （可选）行或列的数量 (integer!)。
<options> : （可选）面板的设定列表。
<body> : 面板的 VID 内容描述 (block!)。描述
在当前容器内部构造子编组框面板，其内容是另外的 VID 区块。可以提供一个分割器参数以设置网格模式布局：
-
如果方向是
across，则分割器表示列数。 -
如果方向是
below，则分割器表示行数。
|
注意
|
若提供一个 |