视觉界面方言

1. 概述

VID 一词代表视觉界面方言,其目的是提供一种用于在 Red View 引擎之上描述图形用户界面的简单的方言(DSL)。

VID 允许你指定要显示的每个图形组件,还给与你不同选择的布局方法:

  • 水平或垂直流布局

  • 网格定位

  • 绝对定位

VID 将自动为你创建一个容器元件以持有你提供的元件描述。默认情况下,容器元件的类型为 window

VID 代码由 layout 函数处理(view 函数内部调用就是它),然后被编译成一棵适合用来显示的内含元件的树。

注意

在 Red 的控制台使用 help viewhelp layout 看看如何处理 VID 区块。

2. 代码结构

典型的 VID 代码区块具有以下结构:

[
    <容器设定>
    <布局描述>
]
  • 容器设定:影响容器对象(可以是面板或窗口)的设定。

  • 布局描述:布局定位命令、样式定义和元件描述。

注意

所有部分都是可选的,没有必须要在 VID 区块中提供的强制性的内容。

3. 容器设定

注意

在元件选项级别之外,react 关键字也可以在容器设定级别使用,参照它那里的描述。

3.1. title

语法

title <text>

<text> : 标题文本 (string!)。

描述

设置该容器元件的标题文本。

3.2. size

语法

size <value>

<value> : 宽高,以像素为单位 (pair!)。

描述

设置该容器元件的大小。如果没有显式地提供大小,则会自动计算该容器的大小以适应其内容。

3.3. backdrop

语法

backdrop <color>

<color> : 颜色的名字或值 (word! tuple! issue!)。

描述

设置该容器元件的背景颜色。

3.4. 动作器定义

容器的动作器也可以定义在该代码区域,要定义动作器请参考动作器小节。

4. 布局

默认情况下,VID 根据简单的规则将元件放置在容器元件中:

  • 方向可以为水平或垂直

  • 一个元件按当前的方向以当前的间隔被放置在另一个元件之后

默认:

  • 原点(origin):10x10

  • 间距(space):10x10

  • 方向(direction):across

  • 对齐(alignment):top

这是在 across 模式中布置元件的方式:

across

这是在 below 模式中布置元件的方式(使用默认的 left 对齐方式):

below

4.1. across

语法

across <alignment>

<alignment> : (可选)可以取的值:top | middle | bottom。

描述

将布局方向设置为水平,从左到右。可选提供对齐修饰符来更改行中默认(top)的元件对齐方式。

4.2. below

语法

below <alignment>

<alignment> : (可选)可以取的值:left | center | right。

描述

将布局方向设置为垂直,从上到下。可选提供对齐修饰符来更改列中默认(left)的元件对齐方式。

4.3. return

语法

return <alignment>

<alignment> : (可选)可以取的值:left | center | right | top | middle | bottom。

描述

根据当前布局方向将位置移动到元件的下一行或下一列。可选提供对齐修饰符来更改行中或列中元件当前的对齐方式。

4.4. space

语法

space <offset>

<offset> : 新的间距值 (pair!)。

描述

设置将用于放置在它之后的元件的新的间距偏移。

4.5. origin

语法

origin <offset>

<offset> : 新原点的值 (pair!)。

描述

设置相对于容器元件的新的原点的位置。

4.6. at

语法

at <offset>

<offset> : 下一个元件的位置 (pair!)。

描述

将下一个元件放在绝对位置。该定位模式仅影响下一个元件,并不会更改布局流位置。所以,在下一个元件之后的元件将再次在布局流中跟着之前的元件被放置。

4.7. pad

语法

pad <offset>

<offset> : 相对偏移量 (pair!)。

描述

以一个相对偏移量修改布局的当前位置,所有在同一行(或列)中的后续元件都会受到影响。

4.8. do

语法

do <body>

<body> : 要求值的代码 (block!)。

描述

对内含常规 Red 代码的区块进行求值,这是用于满足在最后做初始化的需要。body 区块绑定在容器元件(窗口或面板)上,所以可以直接访问容器的特征。可以使用 self 关键字引用到容器元件。

5. 附加样式

视图引擎提供了许多内建部件,VID 方言通过关联的关键字来附加地定义常用的样式以扩展它们。它们可以使用跟其底层元件类型一样的选项,也可以自由地通过 style 命令重新定义样式。

5.1. h1

h1 样式是字体大小设置为 32 的 text 类型。

5.2. h2

h2 样式是字体大小设置为 26 的 text 类型。

5.3. h3

h3 样式是字体大小设置为 22 的 text 类型。

5.4. h4

h4 样式是字体大小设置为 17 的 text 类型。

5.5. h5

h5 样式是字体大小设置为 13 的 text 类型。

5.6. box

box 样式是带有默认的透明颜色的 base 类型。

5.7. image

image 样式是默认大小为 100x100base 类型。它期望被提供一个 image! 选项,如果没有的话,就会提供一个背景颜色为白色的、与元件大小相同的空图像。

6. 元件定义

可以通过使用现有face类型或可用样式之一的名称,将布局中的face插入当前位置。

语法

<name>: <type> <options>

<name>    : (可选)新组件的名称 (set-word!)。
<type>    : 有效的元件类型或样式名称 (word!)。
<options> : (可选)选项列表。

如果提供了 name,该单词将引用 VID 从元件描述中创建的 face! 对象。

每个元件类型或样式都有提供默认值,因此无需指定任何选项就可以使用一个新的元件。当需要选项时,以下小节将描述可接收的不同类型的选项:

  • 关键字

  • 数据类型

  • 动作器

所有选项都可以以任意顺序指定,跟在元件或样式名称之后。一个新的元件名称或布局关键字标记了给定元件的选项列表的结尾。

注意

window 不能被用作元件类型。

6.1. 关键字

6.1.1. left

语法

left

描述

将该元件的文本向左侧对齐。

6.1.2. center

语法

center

描述

将该元件的文本居中。

6.1.3. right

语法

right

描述

将该元件的文本向右侧对齐。

6.1.4. top

语法

top

描述

将该元件的文本向 top(顶部)对齐。

6.1.5. middle

语法

middle

描述

将该元件的文本向 middle(中央)对齐。

6.1.6. bottom

语法

bottom

描述

将该元件的文本向 bottom(底部)对齐。

6.1.7. bold

语法

bold

描述

将该元件的文本样式设置为 bold(粗体)。

6.1.8. italic

语法

italic

描述

将该元件的文本样式设置为 italic(斜体)。

6.1.9. underline

语法

underline

描述

将该元件的文本样式设置为 underline(下划线)。

6.1.10. extra

语法

extra <expr>

<expr> : 任何值 (any-type!)。

描述

将该元件的 extra 特征设置为一个值(可以为 Red 表达式的结果)。

6.1.11. data

语法

data <list>

<list> : 内含项目的列表的字面值,或 Red 表达式 (block!)。

描述

将该元件的 data 特征设置为内含值的列表,列表的格式取决于该元件类型的要求。

6.1.12. draw

语法

draw <commands>

<commands> : 命令列表的字面值,或 Red 表达式 (block!)。

描述

将该元件的 draw 特征设置为内含 Draw 方言命令的列表。有效的命令请参阅 Draw 方言文档

6.1.13. font

语法

font <spec>

<spec> : 有效的 font 规格 (block! object! word!)。

描述

将该元件的 font 特征设置为新的 font! 对象。关于 font! 对象的描述在这里

注意

可以把 font 跟其他关于字体的设定一起使用,VID 会以最后指定的设定为优先,把它们合并在一起。

6.1.14. para

语法

para <spec>

<spec> : 有效的 para 规格 (block! object! word!)。

描述

将该元件的 para 特征设置为新的 para! 对象。关于 para! 对象的描述在这里

注意

可以把 para 跟其他关于段落的设定一起使用,VID 会以最后指定的设定为优先,把它们合并在一起。

6.1.15. wrap

语法

wrap

描述

当显示文本时对该元件的文本进行自动换行。

6.1.16. no-wrap

语法

no-wrap

描述

避免当显示文本时对该元件的文本进行自动换行。

6.1.17. font-size

语法

font-size <pt>

<pt> : 字体大小,以磅为单位 (integer! word!)。

描述

为该元件的文本设置当前字体大小。

6.1.18. font-color

语法

font-color <value>

<value> : 字体的颜色 (tuple! word! issue!)。

描述

为该元件的文本设置当前字体颜色。

6.1.19. font-name

语法

font-name <name>

<name> : 一个可用字体的有效名字 (string! word!)。

描述

为该元件的文本设置当前字体名称。

6.1.20. react

这个关键字既可用作元件选项,也可用作全局关键字。可以使用任意数量的 react 实例。

语法

react [<body>]
react later [<body>]

<body> : 常规的 Red 代码 (block!)。

描述

body 块创建一个新的响应器。当 react 用作元件选项时,在主体区块里面可以使用 face 单词来引用当前元件。当在全局使用 react 时,需要使用名称来访问目标元件。可选的 later 关键字会跳过在 body 区块被处理之后立即发生的第一次响应。

注意

响应器是 View 中响应式编程支持的部分,它的文档还将要编写。简而言之,body 区块可以使用路径来描述元件属性之间的一个或多个关系。设置元件属性的设径被当作响应器(要更新的元件)的目标来处理,访问元件属性的路径被当作响应器的(一次在源中的变化会触发一次对响应器代码的刷新)来处理。

6.1.21. loose

语法

loose

描述

让该元件可以使用鼠标左键拖动。

6.1.22. all-over

语法

all-over

描述

设置该元件的 all-over 标记,使其允许接收所有鼠标 over 事件。

6.1.23. hidden

语法

hidden

描述

使该元件默认不可见。

6.1.24. disabled

语法

disabled

描述

使该元件默认被禁用(到该元件被启用为止,它不会处理任何事件)。

6.1.25. select

语法

select <index>

<index> : 所选项的索引 (integer!)。

描述

设置当前元件的 selected 特征,主要用于列表,表示哪个项目要被预先选择。

6.1.26. focus

语法

focus

描述

当窗口首次显示时使当前的元件获得焦点。只有一个元件可以获得焦点,如果把几个 focus 选项使用在不同的元件上,只有最后一个会获得焦点。

6.1.27. hint

语法

hint <message>

<message> : 提示文本 (string!)。

描述

field 的内容为空时,在 field 元件中提供提示信息。当提供任何新内容时,该文本消失(用户操作或设置 face/text 特征)。

6.1.28. rate

语法

rate <value>
rate <value> now

<value>: 时长或频率 (integer! time!)。

描述

以一个时长(time!)或频率(integer!)给该元件设置定时器。每次定时器到期时,将为该元件生成 time 事件。如果使用 now 选项,则会立即生成第一次 time 事件。

6.1.29. default

语法

default <value>

<value>: data 特征的默认值 (any-type!)。

描述

定义当 text 特征的转换返回 nonedata 特征的默认值。该默认值作为键值对存储在 options 特征中。

注意

目前仅被 textfield 元件类型使用。

6.1.30. with

语法

with <body>

<body>: 绑定到当前元件的 Red 代码区块 (block!)。

描述

对绑定到当前定义的元件的 Red 代码区块进行求值,使得可以直接设置元件字段,覆盖掉其他 VID 选项。

6.2. 数据类型

除了关键字,还允许使用以下类型的字面值将设定传递给元件:

数据类型 目的

integer!

指定该元件的宽度。对于面板,表示布局中行或列的数量,是行还是列取决于当前的布局方向。

pair!

指定该元件的宽度和高度。

tuple!

指定该元件的背景的颜色(如果适用于该元件的话)。

issue!

以十六进制记号(#rgb, #rrggb, #rrggbbaa)指定该元件的背景的颜色。

string!

指定该元件要显示的文本。

percent!

设置其 data 特征(对 progressslider 类型很有用)。

logic!

设置其 data 特征(对 checkradio 类型很有用)。

image!

设置要作为该元件的背景显示的图片(如果适用于该元件的话)。

url!

加载该 URL 指向的资源,接着根据它被加载后的类型处理该资源。

block!

设置该元件的默认事件的动作。对于面板来说,指定他的内容。

get-word!

使用现存的函数作为动作器。

char!

(保留以供将来使用)

6.3. 动作器

动作器可以通过指定一个区块字面值或一个动作器名称后跟一个区块值来挂接到元件。

语法

<actor>
on-<event> <actor>

<actor> : 动作器的主体区块或动作器的引用 (block! get-word!)。
<event> : 有效的事件名称 (word!)。

描述

可以通过仅提供动作器的主体区块来指定动作器,其规格区块是隐含的。动作器函数会被构造出来,接着被添加到元件的 actor 特征中。可以以这样的方式指定好几个动作器。

创建的动作器函数的完整规格为:

func [face [object!] event [event! none!]][...body...]

可以从这里找到有效的事件名称的清单。

当一个区块或一个取词没有跟着任何动作器名称前缀被传递时,会按照这里的定义创建该元件类型的默认动作器。

7. 面板

可以定义子面板以把多个元件编为一组,并在最后应用特定的样式。如果没有明确指定面板的大小,将会自动计算新面板的大小以适应其内容。

在 VID 中使用特定的语法支持 View 的面板类元件类型:

7.1. panel

语法

panel <options> [<content>]

<options> : (可选)面板的设定列表。
<content> : 面板的 VID 内容描述 (block!)。

描述

在当前容器内部构造子面板,其内容是另外的 VID 区块。除了其他的元件选项之外,还可以提供一个整数分割器选项以设置网格模式布局:

  • 如果方向是 across,则分割器表示列数。

  • 如果方向是 below,则分割器表示行数。

7.2. group-box

语法

group-box <divider> <options> [<body>]

<divider> : (可选)行或列的数量 (integer!)。
<options> : (可选)面板的设定列表。
<body>    : 面板的 VID 内容描述 (block!)。

描述

在当前容器内部构造子编组框面板,其内容是另外的 VID 区块。可以提供一个分割器参数以设置网格模式布局:

  • 如果方向是 across,则分割器表示列数。

  • 如果方向是 below,则分割器表示行数。

注意

若提供一个 string! 值作为选项,将会以其设置编组框的标题文本。

7.3. tab-panel

语法

tab-panel <options> [<name> <body>...]

<options> : (可选)面板的设定列表。
<name>    : 选项卡的标题 (string!)。
<body>    : 选项卡的内容,作为 VID 描述 (block!)。

描述

在当前容器内部构造一个选项卡面板。对于每个选项卡,规格区块必须包含名称和内容描述这样一对参数。每个选项卡的内容主体都是一个新的子面板元件,跟任何其他面板的作用一样。

8. 样式

8.1. style

语法

style <new> <old> <options>

<new>     : 新样式的名称 (set-word!)。
<old>     : 旧样式的名称 (word!)。
<options> : (可选)新样式的设定列表。

描述

在当前面板中设置新样式。可以从现有的元件类型或其他样式创建新样式,该新样式仅在当前面板和其子面板中有效。

样式可以从父面板级联到子面板,所以可以在子面板中重新定义或扩展同一样式名称,而不会影响父面板中的定义。

results matching ""

    No results matching ""