Red/View (或称 View) 组件是 Red 编程语言的图形系统,其设计目标为:
-
面向数据的极简 API
-
以虚拟对象树作为编程接口
-
显示系统与虚拟树之间可实时或延迟地同步
-
让双向绑定的支持可以轻松实现
-
拥有不同的后端并且跨平台的能力
-
支持操作系统的、第三方的以及自定义的部件集
-
低性能开销
虚拟树是用元件(face)对象构建起来的,每个元件对象都以双向绑定映射到一个在显示器上的图形组件。
face
对象是 face!
模板对象的拷贝,一个在 face
对象中的字段被称作特征(facet)。
可用特征的清单:
特征 | 数据类型 | 强制性? | 适用性 | 描述 |
---|---|---|---|---|
|
|
是 |
所有 |
图形组件的类型(参考下面)。 |
|
|
是 |
所有 |
相对与父元件左上角原点的偏移量。 |
|
|
是 |
所有 |
该元件的大小。 |
|
|
否 |
所有 |
显示在该元件上的标签文本。 |
|
|
否 |
某些 |
显示在该元件背景的图片。 |
|
|
否 |
某些 |
该元件的背景颜色,格式为 |
|
|
否 |
所有 |
菜单栏或上下文菜单。 |
|
|
否 |
所有 |
该元件的内容数据。 |
|
|
是 |
所有 |
启用或禁用在该元件上的输入事件。 |
|
|
是 |
所有 |
显示或隐藏该元件。 |
|
|
否 |
某些 |
当前选中的元素的索引,用于列表类型。 |
|
|
否 |
某些 |
改变该元件的显示或行为的特殊的关键字列表。 |
|
|
否 |
某些 |
额外的元件属性,格式为 |
|
|
否 |
所有 |
对父元件的反向引用(如果有的话)。 |
|
|
否 |
某些 |
显示在该元件内部的子元件的列表。 |
|
|
否 |
所有 |
内部的元件状态的信息 (仅被 View 引擎使用)。 |
|
|
否 |
所有 |
元件的计时器。使用整数设置频率,使用时间设置时长,使用无来停止它。 |
|
|
否 |
所有 |
(保留以供将来使用)。 |
|
|
否 |
所有 |
用于定位文本的 |
|
|
否 |
所有 |
用于设置元件的字体属性的 |
|
|
否 |
所有 |
用户提供的事件处理器。 |
|
|
否 |
所有 |
附加于该元件上的可选的用户数据(用法自由)。 |
|
|
否 |
所有 |
要画在元件上的 Draw 命令的列表。 |
flags
特征的全局可用的标记的清单:
标记 | 描述 |
---|---|
|
向该元件发送所有的 |
其他特定于元件类型的标记记录在其各自的小节中。
注意
|
|
创建新的元件要通过拷贝 face!
对象,并至少提供一个有效的 type
名称来达成。
button: make face! [type: 'button]
一旦元件被创建,其 type
字段就不允许再被更改。
font
对象是 font!
模板对象的拷贝。一个 font
对象可以被一个或多个 face
引用,这使从单个地方控制一组 face
的 font
属性成为可能。
字段 | 数据类型 | 强制性? | 描述 |
---|---|---|---|
|
|
否 |
安装在操作系统上的有效的字体名称。 |
|
|
否 |
字体大小,以磅为单位。 |
|
|
否 |
样式模式或样式模式区块。 |
|
|
是 |
文本书写角,以角度为单位(默认为 |
|
|
是 |
文本颜色,格式为 |
|
|
否 |
反锯齿模式(激活/非激活或特殊模式)。 |
|
(保留) |
否 |
(保留以供将来使用) |
|
|
否 |
内部的元件状态信息(仅被 View 引擎使用)。 |
|
|
否 |
内部的对父元件(可多个)的反向引用(仅被 View 引擎使用)。 |
注意
|
|
可用的字体样式:
-
bold
-
italic
-
underline
-
strike
可用的抗锯齿模式:
-
激活/非激活(
anti-alias?: yes/no
) -
ClearType 模式(
anti-alias?: 'ClearType
)
para
对象是 para!
模板对象的拷贝。一个 para
对象可以被一个或多个 face
引用,这使从单个地方控制一组 face
的 para
属性成为可能。
字段 | 数据类型 | 描述 |
---|---|---|
|
保留 |
(保留以供将来使用) |
|
保留 |
(保留以供将来使用) |
|
保留 |
(保留以供将来使用) |
|
|
控制文本水平对齐: |
|
保留 |
控制文本垂直对齐: |
|
|
启用/禁用在元件中的文本自动换行。 |
|
|
内部的对父元件(可多个)的反向引用。(仅被 View 引擎使用)。 |
注意
|
|
base
类型是最基本的元件类型,但它也是最全能的一种元件类型。它默认只显示一个颜色为 128.128.128
的背景。
特征 | 描述 |
---|---|
|
|
|
可以指定 |
|
可以指定背景颜色,它支持透明通道。 |
|
显示在元件内部的可选的文本。 |
|
Draw 原语完全支持透明度。 |
注意
|
|
该元件类型应该被用于所有的自定义图形组件的实现。
text
类型是用于显示的静态标签。
特征 | 描述 |
---|---|
|
|
|
标签文本。 |
|
以文本显示的值。 |
|
支持的字段: |
data
特征与 text
元件使用以下转换规则实时同步:
-
当
text
变化时,data
会被设置为load
过的text
值或none
,或如果有定义options/default
,也可能被设置为该值。 -
当
data
变化时,text
会被设置为form
过的data
值。
options
特征接受以下属性:
-
default
:可以被设置为任何值,比如无法加载的字符串,如果转换text
返回none
,它将被该data
特征使用。
该类型代表简单的按钮。
元件 | 描述 |
---|---|
|
|
|
按钮的标签文本。 |
|
该图片会被显示在按钮内部,它可以与文本一起使用。 |
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
当用户在按钮上点击时触发。 |
该类型代表复选框,它带有可选的标签文本,文本显示在左侧或右侧。
特征 | 描述 |
---|---|
|
|
|
标签文本。 |
|
|
|
|
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
当该复选框的状态被用户动作更改时触发。 |
该类型代表单选按钮,它带有可选的标签文本,文本显示在左侧或右侧。每个窗格中只能有一个单选按钮被选中。
特征 | 描述 |
---|---|
|
|
|
标签文本。 |
|
|
|
|
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
当该单选框的状态被一个用户动作更改时触发。 |
该类型代表单行输入文本域。
特征 | 描述 |
---|---|
|
|
|
输入文本;为可读/写值。 |
|
以文本显示的值。 |
|
支持的字段: |
|
开启/关闭某些特殊的文本域特性( |
支持的 flags
:
-
no-border
:删除由底层 GUI 框架创建的边缘装饰。
data
特征与 text
特征使用以下转换规则实时同步:
-
当
text
变化时,data
会被设置为load
过的text
值或none
,或如果有定义options/default
,也可能被设置为该值。 -
当
data
变化时,text
会被设置为form
过的data
值。
options
元件接收以下属性:
-
default
:可以被设置为任何值,比如无法加载的字符串,如果转换text
返回none
,它将被该data
特征使用。
注意
|
|
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
每次在该文本域中按下回车键时发生。 |
|
|
每次在该文本域中造成一个输入时发生。 |
|
|
每次在该文本域中按下一个键时发生。 |
该类型代表多行输入域。
特征 | 描述 |
---|---|
|
|
|
输入文本;为可读/写值。 |
|
开启/关闭某些特殊的文本区域特性( |
支持的 flags
:
-
no-border
:删除由底层 GUI 框架创建的边框装饰。
注意
|
|
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
每次在该文本区域中造成一个输入时发生。 |
|
|
每次在该文本区域中按下一个键时发生。 |
该类型代表含有一组文本字符串的垂直列表,它显示在固定的框架中。如果内容大小不符合框架,则会自动出现垂直滚动条。
特征 | 描述 |
---|---|
|
|
|
要显示的字符串列表( |
|
选定的字符串的索引,或若未选择,则为无值。(可读/写) |
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
当该列表中的条目被选定时发生。 |
|
|
在 |
注意
|
|
该类型表示含有一组文本字符串的垂直列表,它显示在可折叠的框架中。如果内容大小不符合框架,则会自动出现垂直滚动条。
特征 | 描述 |
---|---|
|
|
|
要显示的字符串列表( |
|
选定的字符串的索引,或若未选择,则为无值。(可读/写) |
data
特征可接收任意值,但只有字符串值才会被添加到该列表中并显示,可以以字符串作为键,使用额外的非字符串数据类型的值来创建关联数组。selected
特征是基于 1 的整数索引,它表示在该列表中所选字符串的位置,而不是在 data
特征中的位置。
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
当该列表中的条目被选定时发生。 |
|
|
在 |
注意
|
|
该类型表示含有一组文本字符串的垂直列表的文本域,它显示在可折叠的框架中。如果内容大小不符合框架,则会自动出现垂直滚动条。
特征 | 描述 |
---|---|
|
|
|
要显示的字符串列表( |
|
选定的字符串的索引,或若未选择,则为无值。(可读/写) |
data
特征可接收任意值,但只有字符串值才会被添加到该列表中并显示,可以以字符串作为键,使用额外的非字符串数据类型的值来创建关联数组。selected
特征是基于 1 的整数索引,它表示在该列表中所选字符串的位置,而不是在 data
特征中的位置。
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
当该列表中的条目被选定时发生。 |
|
|
在 |
注意
|
|
该类型代表水平的或垂直的进度条。
特征 | 描述 |
---|---|
|
|
|
代表进度的值( |
注意
|
|
该类型代表可沿水平轴或垂直轴移动的光标。
特征 | 描述 |
---|---|
|
|
|
代表光标位置的值( |
注意
|
|
该类型用于显示相机提要。
特征 | 描述 |
---|---|
|
|
|
区块形式的内含相机(可多个)的列表。 |
|
用一个整数索引从 |
注意
|
|
面板是其他元件的容器。
特征 | 描述 |
---|---|
|
|
|
内含子元件的区块,区块中的顺序定义了在显示器上的 Z 轴次序。 |
注意
|
|
选项卡面板一组面板的列表,它在一个给定时刻只有一个面板可见。面板名称列表作为“选项卡”显示,它用于切换面板。
特征 | 描述 |
---|---|
|
|
|
内含选项卡名字的区块(字符串值)。 |
|
内含面板的列表,对应于选项卡列表( |
|
所选面板的索引,或无值( |
事件类型 | 处理器 | 描述 |
---|---|---|
|
|
当用户选择一个新的面板时发生。 |
注意
|
|
代表操作系统桌面上显示的窗口。
特征 | 描述 |
---|---|
|
|
|
该窗口的标题( |
|
相对于桌面屏幕左上角的偏移量,不把该窗口的边框装饰计算在内。( |
|
该窗口的大小,不把该窗口的边框装饰计算在内( |
|
开启/关闭某些特殊的窗口特性( |
|
在该窗口里显示菜单栏( |
|
要在该窗口内部显示的元件列表( |
|
选择将会获得焦点的元件( |
支持的 flags
:
-
modal
:使窗口变成模态,禁用所有之前打开的窗口。 -
resize
:使窗口可调整大小(默认是固定大小,不是可调整的)。 -
no-title
:不显示窗口标题文本。 -
no-border
:删除窗口的边框装饰。 -
no-min
:删除窗口的标题栏中的最小化按钮。 -
no-max
:删除窗口的标题栏中的最大化按钮。 -
no-buttons
:删除窗口的标题栏中的所有按钮。 -
popup
: 另一种更小的边框装饰(仅支持 Windows)。
注意
|
|
代表连接到该计算机的图形显示单元(通常为显示器)。
特征 | 描述 |
---|---|
|
|
|
该显示屏幕的大小,在 View 引擎启动时被设置( |
|
要显示在屏幕上的内含窗口的列表( |
所有显示的元件都需要是屏幕元件的子元件。
-
从
face!
原型创建一个元件对象。 -
将元件对象插入到与屏幕元件相连的元件树中。
-
使用
show
在屏幕上渲染元件对象。-
此时系统资源被分配。
-
face/state
区块被设置。
-
-
从窗格中删除元件以将其从显示器上移除。
-
垃圾收集器将负责在元件不再被引用时释放相关的系统资源。
注意
|
|
语法
show <face>
<face>: face! 对象的拷贝,或内含元件对象或名称(使用 word! 值)的区块。
描述
该功能用于更新屏幕上的元件或内含元件的列表,只有在连接到屏幕元件的元件树中被引用的元件才能正常地渲染到屏幕上。当第一次调用时,将分配系统资源,设置`state` 特征,将该图形组件显示在屏幕上,随后的调用会在屏幕上反映对元件对象所做的任何更改。如果有定义 pane
特征,那么 show
也会递归地应用于其子元件
state
特征
以下提供信息仅供参考。在正常操作中,用户不应该动 state
特征,然而如果用户要直接调用 OS API 或者不得不修改 View 引擎的行为,则可以访问它。
位置/字段 | 描述 |
---|---|
1 ( |
该图形对象的特定于操作系统的句柄( |
2 ( |
位元标记数组,用来标记从最后一次对 |
3 ( |
当关闭实时更新时,内含从最后一次对 |
4 ( |
存储当进入元件拖拽模式时起始鼠标指针的偏移位置( |
注意
|
|
View 引擎有两种不同的模式,它们用来在完成对元件树的修改之后更新其显示:
-
实时更新:任何对元件的修改都会立即渲染在屏幕上。
-
延迟更新:直到以元件或其父元件为参数调用
show
,所有对该元件的修改才会在屏幕上传播。
system/view/auto-sync
单词能控制这两个模式之间的切换:如果设置为 yes
,则开始实时更新模式(默认模式);如果设置为 no
,则 View 引擎将延迟所有更新。
默认情况下使用实时更新的动机是:
-
源代码更简单、更短,无需在任何对元件的修改后调用
show
。 -
初学者的学习开销较低
-
对于简单的或原型应用程序来说是足够的。
-
在控制台里做实验很简单。
为了避免发生抖动,也为了以最佳性能为目标的情况,延迟模式会同时更新多个变化。
注意
|
|
元件对象依靠 Red 的所有权系统将对象与其特征中使用的序列绑定,所以元件对象会检测到它某一个特征中发生的任何变化(甚至是深变化)并根据当前的同步模式(实时或延迟)进行处理。
另一方面,对渲染的图形对象进行的修改会立即反映在对应的特征中。例如,在 field
元件里打字会以实时地反映其 text
特征的输入。
这种双向绑定简化了程序员跟图形对象的交互,不需要任何特定的 API,使用序列的动作修改特征就足够了。
例:
view [
list: text-list data ["John" "Bob" "Alice"]
button "Add" [append list/data "Sue"]
button "Change" [lowercase pick list/data list/selected]
]
名称 | 输入类型 | 原因 |
---|---|---|
|
鼠标 |
鼠标左键被按了。 |
|
鼠标 |
鼠标左键被释放。 |
|
鼠标 |
鼠标中键被按了。 |
|
鼠标 |
鼠标中键被释放。 |
|
鼠标 |
鼠标右键被按了。 |
|
鼠标 |
鼠标右键被释放。 |
|
鼠标 |
鼠标辅助键被按了。 |
|
鼠标 |
鼠标辅助间被释放。 |
|
鼠标 |
开始拖拽元件。 |
|
鼠标 |
元件正在被拖拽。 |
|
鼠标 |
拖拽的元件被放下。 |
|
鼠标 |
鼠标左键单击(仅限按钮部件)。 |
|
鼠标 |
鼠标左键双击。 |
|
鼠标 |
鼠标指针经过元件。该事件会在鼠标移进元件和移出元件的时刻发生。如果 |
|
鼠标 |
窗口被移动了。 |
|
鼠标 |
窗口大小被调整了。 |
|
鼠标 |
窗口正被移动。 |
|
鼠标 |
窗口大小正被调整。 |
|
鼠标 |
鼠标滚轮正在移动。 |
|
触摸 |
缩放手势(捏)被识别。 |
|
触摸 |
拖动手势(扫)被识别。 |
|
触摸 |
旋转手势被识别。 |
|
触摸 |
双击手势被识别。 |
|
触摸 |
按住轻敲手势被识别。 |
|
键盘 |
一个键被按下。 |
|
键盘 |
输入了一个文字或一个特殊键被按了(除了 control, shift 和菜单键)。 |
|
键盘 |
一个按下的键被释放。 |
|
键盘 |
回车键被按了。 |
|
任意 |
元件刚获得焦点。 |
|
任意 |
元件刚失去焦点。 |
|
任意 |
在具有多项选择的元件中做了一个选择。 |
|
任意 |
接收到用户输入,元件发生了改变(文本输入或列表的选择)。 |
|
任意 |
一个菜单项被选择。 |
|
任意 |
窗口正要关闭。 |
`time* |
计时器 |
元件的 |
注意
|
|
event
值是一个不透明的对象,它保存有关给定事件的所有信息。你可以使用路径记号访问 event
字段。
字段 | 返回值 |
---|---|
|
事件类型( |
|
发生该事件的元件对象( |
|
发生该事件的窗口元件( |
|
当该事件发生时鼠标指针相对于该元件对象的偏移量( |
|
按的键( |
|
在元件中选择的新项目( |
|
返回内含一个或多个标记的列表(参照下面的清单)( |
|
如果鼠标指针移出该元件的边界,则返回 |
|
如果鼠标左键是按下的,则返回 |
|
如果鼠标中键是按下的,则返回 |
|
如果鼠标右键是按下的,则返回 |
|
如果 CTRL 键是按下的,则返回 |
|
如果 SHIFT 左键是按下的,则返回 |
这是可能在 event/flags
中出现的 flags
的清单:
-
away
-
down
-
mid-down
-
alt-down
-
aux-down
-
control
-
shift
注意
|
|
这里是由 event/key
作为单词返回的特殊键的清单:
-
page-up
-
page-down
-
end
-
home
-
left
-
up
-
right
-
down
-
insert
-
delete
-
F1
-
F2
-
F3
-
F4
-
F5
-
F6
-
F7
-
F8
-
F9
-
F10
-
F11
-
F12
以下几个额外的按键名称只会作为 key-down
和 key-up
的信息被 event/key
返回:
-
left-control
-
right-control
-
left-shift
-
right-shift
-
left-menu
-
right-menu
动作器是 View 事件的处理器函数,它们由 actors
特征引用的自由格式的对象(不提供原型)定义。所有动作器都具有相同的规格区块。
语法
on-<event>: func [face [object!] event [event!]]
<event> : 任何有效的事件名(上面的表中的)。
face : 接收该事件的元件对象。
event : 事件值。
除了 GUI 事件,还可以定义 on-create
动作器,它在第一次显示元件时被调用,刚好就在系统资源被分配给它之前。与其他动作器不同,on-create
只有一个参数 face
。
返回值
'stop : 退出事件循环。
'done : 阻止该事件流动到下一个元件。
其他的返回值不会有作用。
事件通常在特定的屏幕位置被生成,分配给最接近的、在前方的元件。不过,事件会在元件的祖先层级中以两种方向在游历过一个又一个的元件,这俗称为:
-
事件捕获:事件从窗口元件向下传递到在前方的、作为该事件起源的元件。对每个元件生成一个
detect
事件,如果提供了相应的处理器,则会调用它。 -
事件冒泡:事件从元件向着父窗口传递。对于每个元件,调用局部的事件处理器。
典型的事件流路径:
-
按钮生成一个单击事件,执行全局处理器(参照下一个小节)。
-
事件捕获阶段开始:
-
首先窗口获得该事件,调用它的
on-detect
处理器。 -
接着面板获得该事件,调用面板的
on-detect
处理器。 -
最后按钮获得该事件,调用按钮的
on-detect
处理器。
-
-
事件冒泡阶段开始:
-
首先按钮获得该事件,调用它的的
on-click
处理器。 -
接着面板获得该事件,调用面板的
on-click
处理器。 -
最后窗口获得该事件,调用它的
on-click
处理器。
-
注意
|
|
在进入事件流路径之前,可以使用所谓的"`全局事件处理器`"来进行特定的预处理。有提供以下的 API 用于添加和删除它们。
语法
insert-event-func <handler>
<handler> : 用来预处理事件(可多个)的处理器函数或代码区块。
处理器的函数规格 : func [face [object!] event [event!]]
返回值
新添加的处理器函数(`function!`)。
描述
安装一个全局处理函数,它可以在事件到达元件的处理器之前进行预处理。每一次事件发生,所有的全局处理器都会被调用,因此处理器主体代码需要为速度和内存占用进行优化。如果提供区块作为参数,它会被用 function
构造函数转换成函数。
处理器函数的返回值:
-
none
:该事件可以被其他处理器处理(none!
)。 -
'done
:其他全局处理器将被跳过,但事件会向子元件传播(word!
)。 -
'stop
:退出事件循环(word!
)。
返回对处理器函数的引用,如果之后需要删除则应该保存它。
单词 | 描述 |
---|---|
|
内含代表连接到的显示器的屏幕元件的列表。 |
|
保留以供将来使用 |
|
保留以供将来使用 |
|
View 引擎的底层平台的代码(包含后端代码)。 |
|
处理 VID 的代码。 |
|
内含全局事件处理器的列表。 |
|
内部的关联表,用于响应式元件和它们的动作器区块。 |
|
内部的表,用于事件到动作器名称的转换。 |
|
View 引擎初始化函数,如果需要用户可以调用它。 |
|
高级事件的主要入口函数。 |
|
|
|
|
|
|
|
|
在编译时默认情况下不包含 View 组件。要包括它,Red 主脚本必须在首部使用 Needs
字段来声明依赖。
Red [
Needs: 'View
]
注意
|
在 View 组件可用的平台上,使用 |
函数 | 描述 |
---|---|
|
用元件树或 VID 代码区块在屏幕上渲染一个窗口,除非用 了 |
|
销毁一个或多个窗口。 |
|
把 VID 代码区块转换成元件树。 |
|
使元件相对于其父元件居中。 |
|
输出对元件树的紧凑的描述(用于调试)。 |
|
手动对元件的动作器进行求值。 |
|
发起事件循环(视需要可只处理一下挂起的事件然后返回)。 |
|
把 Draw 方言区块渲染成图像。 |
|
把任何渲染过的元件转换为图像。 |
|
以像素为单位测量在元件中的文本(会把选择的字体考虑在内)。 |
待添加:
-
menu
特征的规范 -
image!
数据类型的描述