Skip to content

Latest commit

 

History

History
966 lines (728 loc) · 36.1 KB

view.adoc

File metadata and controls

966 lines (728 loc) · 36.1 KB

Red/View 图形引擎

1. 设计目标

Red/View (或称 View) 组件是 Red 编程语言的图形系统,其设计目标为:

  • 面向数据的极简 API

  • 以虚拟对象树作为编程接口

  • 显示系统与虚拟树之间可实时或延迟地同步

  • 让双向绑定的支持可以轻松实现

  • 拥有不同的后端并且跨平台的能力

  • 支持操作系统的、第三方的以及自定义的部件集

  • 低性能开销

虚拟树是用元件(face)对象构建起来的,每个元件对象都以双向绑定映射到一个在显示器上的图形组件。

2. face 对象

face 对象是 face! 模板对象的拷贝,一个在 face 对象中的字段被称作特征(facet)。

可用特征的清单:

特征 数据类型 强制性? 适用性 描述

type

word!

所有

图形组件的类型(参考下面)。

offset

pair!

所有

相对与父元件左上角原点的偏移量。

size

pair!

所有

该元件的大小。

text

string!

所有

显示在该元件上的标签文本。

image

image!

某些

显示在该元件背景的图片。

color

tuple!

某些

该元件的背景颜色,格式为 R.G.BR.G.B.A

menu

block!

所有

菜单栏或上下文菜单。

data

any-type!

所有

该元件的内容数据。

enabled?

logic!

所有

启用或禁用在该元件上的输入事件。

visible?

logic!

所有

显示或隐藏该元件。

selected

integer!

某些

当前选中的元素的索引,用于列表类型。

flags

block!, word!

某些

改变该元件的显示或行为的特殊的关键字列表。

options

block!

某些

额外的元件属性,格式为 [name: value]

parent

object!

所有

对父元件的反向引用(如果有的话)。

pane

block!

某些

显示在该元件内部的子元件的列表。

state

block!

所有

内部的元件状态的信息 (仅被 View 引擎使用)

rate

integer!, time!

所有

元件的计时器。使用整数设置频率,使用时间设置时长,使用无来停止它。

edge

object!

所有

(保留以供将来使用)

para

object!

所有

用于定位文本的 para 对象的引用。

font

object!

所有

用于设置元件的字体属性的 font 对象的引用。

actors

object!

所有

用户提供的事件处理器。

extra

any-type!

所有

附加于该元件上的可选的用户数据(用法自由)。

draw

block!

所有

要画在元件上的 Draw 命令的列表。

flags 特征的全局可用的标记的清单:

标记 描述

all-over

向该元件发送所有的 over 事件。

其他特定于元件类型的标记记录在其各自的小节中。

注意
  • 非强制性特征可以设置为 none

  • offsetsize 以屏幕像素为单位指定。

  • offsetsize 在它们被显示之前有时可以设置 none,View 引擎将负责设置这些值(像在 tab-panel 类型里的 panel 那样).

  • 显示顺序(从后往前):colorimagetextdraw.

创建新的元件要通过拷贝 face! 对象,并至少提供一个有效的 type 名称来达成。

button: make face! [type: 'button]

一旦元件被创建,其 type 字段就不允许再被更改。

2.1. option 特征

option 特征持有可选的用于特定的行为的特征:

选项 描述

drag-on

可以是其中之一:'down'mid-down'alt-down'aux-down。用于启用拖拽操作。

3. font 对象

font 对象是 font! 模板对象的拷贝。一个 font 对象可以被一个或多个 face 引用,这使从单个地方控制一组 facefont 属性成为可能。

字段 数据类型 强制性? 描述

name

string!

安装在操作系统上的有效的字体名称。

size

integer!

字体大小,以磅为单位。

style

word!, block!

样式模式或样式模式区块。

angle

integer!

文本书写角,以角度为单位(默认为 0)。

color

tuple!

文本颜色,格式为 R.G.BR.G.B.A

anti-alias?

logic!, word!

反锯齿模式(激活/非激活或特殊模式)。

shadow

(保留)

(保留以供将来使用)

state

block!

内部的元件状态信息(仅被 View 引擎使用)

parent

block!

内部的对父元件(可多个)的反向引用(仅被 View 引擎使用)

注意
  • 非强制性特征可以被设置为 none

  • angle 字段还不能正常工作。

  • 所有字段的值将来都应会变成可选的。

可用的字体样式:

  • bold

  • italic

  • underline

  • strike

可用的抗锯齿模式:

  • 激活/非激活(anti-alias?: yes/no

  • ClearType 模式(anti-alias?: 'ClearType

4. para 对象

para 对象是 para! 模板对象的拷贝。一个 para 对象可以被一个或多个 face 引用,这使从单个地方控制一组 facepara 属性成为可能。

字段 数据类型 描述

origin

保留

(保留以供将来使用)

padding

保留

(保留以供将来使用)

scroll

保留

(保留以供将来使用)

align

word!

控制文本水平对齐:leftcenterright

v-align

保留

控制文本垂直对齐:topmiddlebottom

wrap?

logic!

启用/禁用在元件中的文本自动换行。

parent

block!

内部的对父元件(可多个)的反向引用。(仅被 View 引擎使用)

注意
  • 任何段落的字段都可以设置为 none

5. 元件树

元件组织在一棵树中,这棵树会映射到显示器上的图形组件层级。树的关系定义为:

  • pane 特征:区块形式的内含一个或多个子元件的列表。

  • parent 特征:对父元件的引用。

元件对象在 pane 中的顺序的有关系的,它映射到图形对象的 Z 轴次序(在 pane 的头部的元件显示在所有其他元件的后面,在尾部的元件显示在所有对象的顶部)。

元件树的根是 screen 元件,screen 元件只能显示其 pane 区块里的 window 元件。

要让任何元件在屏幕上显示出来,它都必须直接地(对于窗口来说)或间接地(对于其他元件类型来说)连接到 screen 元件。

Face tree

6. 元件类型

6.1. base

base 类型是最基本的元件类型,但它也是最全能的一种元件类型。它默认只显示一个颜色为 128.128.128 的背景。

特征 描述

type

'base

image

可以指定 image! 值,它支持透明通道。

color

可以指定背景颜色,它支持透明通道。

text

显示在元件内部的可选的文本。

draw

Draw 原语完全支持透明度。

注意
  • 支持以下特征的全组合,并会以以下顺序渲染:colorimagetextdraw

  • 可以在 colorimagetextdraw 中指定颜色元组值中的一个透明通道分量来达到透明效果:R.G.B.A,其中 A = 0 表示完全不透明,A = 255,表示完全透明。

该元件类型应该被用于所有的自定义图形组件的实现。

6.2. text

text 类型是用于显示的静态标签。

特征 描述

type

'text

text

标签文本。

data

以文本显示的值。

options

支持的字段:default

data 特征与 text 元件使用以下转换规则实时同步:

  • text 变化时,data 会被设置为 load 过的 text 值或 none,或如果有定义 options/default,也可能被设置为该值。

  • data 变化时,text 会被设置为 form 过的 data 值。

options 特征接受以下属性:

  • default:可以被设置为任何值,比如无法加载的字符串,如果转换 text 返回 none,它将被该 data 特征使用。

6.3. button

该类型代表简单的按钮。

元件 描述

type

'button

text

按钮的标签文本。

image

该图片会被显示在按钮内部,它可以与文本一起使用。

事件类型 处理器 描述

click

on-click

当用户在按钮上点击时触发。

6.4. check

该类型代表复选框,它带有可选的标签文本,文本显示在左侧或右侧。

特征 描述

type

'check

text

标签文本。

para

align 字段控制该文本是靠左边(left)显示还是靠右边(right)显示。

data

true:被选中的;false;未被选中的(默认)。

事件类型 处理器 描述

change

on-change

当该复选框的状态被用户动作更改时触发。

6.5. radio

该类型代表单选按钮,它带有可选的标签文本,文本显示在左侧或右侧。每个窗格中只能有一个单选按钮被选中。

特征 描述

type

'radio

text

标签文本。

para

align 字段控制该文本是靠左边(left)显示还是靠右边(right)显示。

data

true:被选中的;false;未被选中的(默认)。

事件类型 处理器 描述

change

on-change

当该单选框的状态被一个用户动作更改时触发。

6.6. field

该类型代表单行输入文本域。

特征 描述

type

'field

text

输入文本;为可读/写值。

data

以文本显示的值。

options

支持的字段:default

flags

开启/关闭某些特殊的文本域特性(block!)。

支持的 flags

  • no-border:删除由底层 GUI 框架创建的边缘装饰。

data 特征与 text 特征使用以下转换规则实时同步:

  • text 变化时,data 会被设置为 load 过的 text 值或 none,或如果有定义 options/default,也可能被设置为该值。

  • data 变化时,text 会被设置为 form 过的 data 值。

options 元件接收以下属性:

  • default:可以被设置为任何值,比如无法加载的字符串,如果转换 text 返回 none,它将被该 data 特征使用。

注意
  • selected 将来会用于控制的输入文本的高亮部分。

事件类型 处理器 描述

enter

on-enter

每次在该文本域中按下回车键时发生。

change

on-change

每次在该文本域中造成一个输入时发生。

key

on-key

每次在该文本域中按下一个键时发生。

6.7. area

该类型代表多行输入域。

特征 描述

type

'area

text

输入文本;为可读/写值。

flags

开启/关闭某些特殊的文本区域特性(block!)。

支持的 flags

  • no-border:删除由底层 GUI 框架创建的边框装饰。

注意
  • selected 将来会用于控制的输入文本的高亮部分。

  • 如果文本行在该文本区域中不是所有都可见的,则会出现垂直滚动条(大概将来会由的某个 flags 选项来控制)。

事件类型 处理器 描述

change

on-change

每次在该文本区域中造成一个输入时发生。

key

on-key

每次在该文本区域中按下一个键时发生。

6.8. text-list

该类型代表含有一组文本字符串的垂直列表,它显示在固定的框架中。如果内容大小不符合框架,则会自动出现垂直滚动条。

特征 描述

type

'text-list

data

要显示的字符串列表(block! hash!)。

selected

选定的字符串的索引,或若未选择,则为无值。(可读/写)

事件类型 处理器 描述

select

on-select

当该列表中的条目被选定时发生。selected 特征指向旧的被选定的条目的索引。

change

on-change

selected 事件之后发生。selected 特征指向这个新的被选定的条目的索引。

注意
  • 现在用户还不能定义可见项目的数量。

6.9. drop-list

该类型表示含有一组文本字符串的垂直列表,它显示在可折叠的框架中。如果内容大小不符合框架,则会自动出现垂直滚动条。

特征 描述

type

'drop-list

data

要显示的字符串列表(block! hash!)。

selected

选定的字符串的索引,或若未选择,则为无值。(可读/写)

data 特征可接收任意值,但只有字符串值才会被添加到该列表中并显示,可以以字符串作为键,使用额外的非字符串数据类型的值来创建关联数组。selected 特征是基于 1 的整数索引,它表示在该列表中所选字符串的位置,而不是在 data 特征中的位置。

事件类型 处理器 描述

select

on-select

当该列表中的条目被选定时发生。selected 特征指向旧的被选定的条目的索引。

change

on-change

selected 事件之后发生。selected 特征指向这个新的被选定的条目的索引。

注意
  • 现在用户还不能定义可见项目的数量。

6.10. drop-down

该类型表示含有一组文本字符串的垂直列表的文本域,它显示在可折叠的框架中。如果内容大小不符合框架,则会自动出现垂直滚动条。

特征 描述

type

'drop-down

data

要显示的字符串列表(block! hash!)。

selected

选定的字符串的索引,或若未选择,则为无值。(可读/写)

data 特征可接收任意值,但只有字符串值才会被添加到该列表中并显示,可以以字符串作为键,使用额外的非字符串数据类型的值来创建关联数组。selected 特征是基于 1 的整数索引,它表示在该列表中所选字符串的位置,而不是在 data 特征中的位置。

事件类型 处理器 描述

select

on-select

当该列表中的条目被选定时发生。selected 特征指向旧的被选定的条目的索引。

change

on-change

selected 事件之后发生。selected 特征指向这个新的被选定的条目的索引。

注意
  • 现在用户还不能定义可见项目的数量。

6.11. progress

该类型代表水平的或垂直的进度条。

特征 描述

type

'progress

data

代表进度的值(percent!float! 值)。

注意
  • 如果把浮点数值用于 data,它需要在 0.0 到 1.0 之间。

6.12. slider

该类型代表可沿水平轴或垂直轴移动的光标。

特征 描述

type

'slider

data

代表光标位置的值(percent!float! 值)。

注意
  • 如果把浮点数值用于 data,它需要在 0.0 到 1.0 之间。

6.13. camera

该类型用于显示相机提要。

特征 描述

type

'camera

data

区块形式的内含相机(可多个)的列表。

selected

用一个整数索引从 data 列表中选择要显示的相机,如果设为 none,则禁用相机提要。

注意
  • data 特征最初会被设置为 none,这个内含相机的列表会在第一次以该相机元件为参数调用 show 时被取得。

  • 可以以该元件为参数调用 to-image 来捕捉相机元件的内容。

6.14. panel

面板是其他元件的容器。

特征 描述

type

'panel

pane

内含子元件的区块,区块中的顺序定义了在显示器上的 Z 轴次序。

注意
  • 子元件 offset 坐标相对于父面板的左上角。

  • 子元件会被裁剪以适应该面板的框架。

6.15. tab-panel

选项卡面板一组面板的列表,它在一个给定时刻只有一个面板可见。面板名称列表作为“选项卡”显示,它用于切换面板。

特征 描述

type

'tab-panel

data

内含选项卡名字的区块(字符串值)。

pane

内含面板的列表,对应于选项卡列表(block!)。

selected

所选面板的索引,或无值(integer!)(可读/写)。

事件类型 处理器 描述

change

on-change

当用户选择一个新的面板时发生。event/picked 持有该新选定的选项卡的索引。selected 属性会在这个事件刚结束后被更新。

注意
  • datapane 两个特征都要填写,以正常显示选项卡面板。

  • 如果 pane 包含比指定的选项卡更多的面板,它们将被忽略。

  • 添加/删除选项卡时,相应的面板需要添加到 pane 列表/从 pane 列表中删除。

6.16. window

代表操作系统桌面上显示的窗口。

特征 描述

type

'window

text

该窗口的标题(string!)。

offset

相对于桌面屏幕左上角的偏移量,不把该窗口的边框装饰计算在内。(pair!)。

size

该窗口的大小,不把该窗口的边框装饰计算在内(pair!)。

flags

开启/关闭某些特殊的窗口特性(block)。

menu

在该窗口里显示菜单栏(block)。

pane

要在该窗口内部显示的元件列表(block!)。

selected

选择将会获得焦点的元件(object)。

支持的 flags

  • modal:使窗口变成模态,禁用所有之前打开的窗口。

  • resize:使窗口可调整大小(默认是固定大小,不是可调整的)。

  • no-title:不显示窗口标题文本。

  • no-border:删除窗口的边框装饰。

  • no-min:删除窗口的标题栏中的最小化按钮。

  • no-max:删除窗口的标题栏中的最大化按钮。

  • no-buttons:删除窗口的标题栏中的所有按钮。

  • popup: 另一种更小的边框装饰(仅支持 Windows)。

注意
  • 在使用菜单规格区块的开头使用 popup 关键字将强制使用窗口中的上下文菜单而不是默认情况下的菜单栏。

6.17. screen

代表连接到该计算机的图形显示单元(通常为显示器)。

特征 描述

type

'screen

size

该显示屏幕的大小,在 View 引擎启动时被设置(pair!)。

pane

要显示在屏幕上的内含窗口的列表(block!)。

所有显示的元件都需要是屏幕元件的子元件。

6.18. group-box

编组框是其他元件的容器,周围有可见的边框,这是临时的样式,一旦我们有了对 edge 特征的支持它就会被移除

特征 描述

type

'group-box

pane

内含子元件的区块,区块中的顺序定义了在显示器上的 Z 轴次序。

注意
  • 子元件 offset 坐标相对于编组框的左上角。

  • 子元件会被裁剪以适应该编组框的框架。

7. 元件生命周期

  1. face! 原型创建一个元件对象。

  2. 将元件对象插入到与屏幕元件相连的元件树中。

  3. 使用 show 在屏幕上渲染元件对象。

    1. 此时系统资源被分配。

    2. face/state 区块被设置。

  4. 从窗格中删除元件以将其从显示器上移除。

  5. 垃圾收集器将负责在元件不再被引用时释放相关的系统资源。

注意
  • 之后可能会提供 free 函数用于为消耗大量资源的应用程序手动控制系统资源的释放。

8. show 函数

语法

show <face>

<face>: face! 对象的拷贝,或内含元件对象或名称(使用 word! 值)的区块。

描述

该功能用于更新屏幕上的元件或内含元件的列表,只有在连接到屏幕元件的元件树中被引用的元件才能正常地渲染到屏幕上。当第一次调用时,将分配系统资源,设置`state` 特征,将该图形组件显示在屏幕上,随后的调用会在屏幕上反映对元件对象所做的任何更改。如果有定义 pane 特征,那么 show 也会递归地应用于其子元件

state 特征

以下提供信息仅供参考。在正常操作中,用户不应该动 state 特征,然而如果用户要直接调用 OS API 或者不得不修改 View 引擎的行为,则可以访问它。

位置/字段 描述

1 (handle)

该图形对象的特定于操作系统的句柄(integer!)。

2 (changes)

位元标记数组,用来标记从最后一次对 show 的调用起哪个特性被改变过(integer!)。

3 (deferred)

当关闭实时更新时,内含从最后一次对 show 的调用起的延迟变化的列表(block! none!)。

4 (drag-offset)

存储当进入元件拖拽模式时起始鼠标指针的偏移位置(pair! none!)。

注意
  • 在调用 show 后,changes 字段会被重置为 0,deferred 字段区块会被清空。

  • 将来会把 handle! 数据类型用于不透明操作系统句柄。

9. 实时 vs 延迟更新

View 引擎有两种不同的模式,它们用来在完成对元件树的修改之后更新其显示:

  • 实时更新:任何对元件的修改都会立即渲染在屏幕上。

  • 延迟更新:直到以元件或其父元件为参数调用 show,所有对该元件的修改才会在屏幕上传播。

system/view/auto-sync 单词能控制这两个模式之间的切换:如果设置为 yes,则开始实时更新模式(默认模式);如果设置为 no,则 View 引擎将延迟所有更新。

默认情况下使用实时更新的动机是:

  • 源代码更简单、更短,无需在任何对元件的修改后调用 show

  • 初学者的学习开销较低

  • 对于简单的或原型应用程序来说是足够的。

  • 在控制台里做实验很简单。

为了避免发生抖动,也为了以最佳性能为目标的情况,延迟模式会同时更新多个变化。

注意
  • 这是跟只支持延迟模式的 Rebol/View 引擎的一个很大的区别。

10. 双向绑定

元件对象依靠 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]
]

11. 事件

11.1. 事件名称

名称 输入类型 原因

down

鼠标

鼠标左键被按了。

up

鼠标

鼠标左键被释放。

mid-down

鼠标

鼠标中键被按了。

mid-up

鼠标

鼠标中键被释放。

alt-down

鼠标

鼠标右键被按了。

alt-up

鼠标

鼠标右键被释放。

aux-down

鼠标

鼠标辅助键被按了。

aux-up

鼠标

鼠标辅助间被释放。

drag-start

鼠标

开始拖拽元件。

drag

鼠标

元件正在被拖拽。

drop

鼠标

拖拽的元件被放下。

click

鼠标

鼠标左键单击(仅限按钮部件)。

dbl-click

鼠标

鼠标左键双击。

over

鼠标

鼠标指针经过元件。该事件会在鼠标移进元件和移出元件的时刻发生。如果 flags 特征包含 all-over 标记,则产生所有中间事件。

move

鼠标

窗口被移动了。

resize

鼠标

窗口大小被调整了。

moving

鼠标

窗口正被移动。

resizing

鼠标

窗口大小正被调整。

wheel

鼠标

鼠标滚轮正在移动。

zoom

触摸

缩放手势(捏)被识别。

pan

触摸

拖动手势(扫)被识别。

rotate

触摸

旋转手势被识别。

two-tap

触摸

双击手势被识别。

press-tap

触摸

按住轻敲手势被识别。

key-down

键盘

一个键被按下。

key

键盘

输入了一个文字或一个特殊键被按了(除了 control, shift 和菜单键)。

key-up

键盘

一个按下的键被释放。

enter

键盘

回车键被按了。

focus

任意

元件刚获得焦点。

unfocus

任意

元件刚失去焦点。

select

任意

在具有多项选择的元件中做了一个选择。

change

任意

接收到用户输入,元件发生了改变(文本输入或列表的选择)。

menu

任意

一个菜单项被选择。

close

任意

窗口正要关闭。

`time*

计时器

元件的 rate 所设的延时过期了。

注意
  • 触摸事件不适用于 Windows XP。

  • 一个或多个 moving 事件总会发生在 move 之前。

  • 一个或多个 resize 事件总会发生在 resize 之前。

11.2. event! 数据类型

event 值是一个不透明的对象,它保存有关给定事件的所有信息。你可以使用路径记号访问 event 字段。

字段 返回值

type

事件类型(word!)。

face

发生该事件的元件对象(object!)。

window

发生该事件的窗口元件(object!)。

offset

当该事件发生时鼠标指针相对于该元件对象的偏移量(pair!)。对于手势事件,返回中点的坐标。

key

按的键(char! word!)。

picked

在元件中选择的新项目(integer! percent!)。对于 wheel 事件,它返回滚动的步数。整数表示滚轮向前滚,朝远离用户的方向;负数表示滚轮向后滚,朝着用户的方向。对于 menu 事件,它返回对应的菜单 ID(word!)。对于缩放手势,它返回百分数值,表示相对增加量/减少量。对于其他手势,它的值当前是依赖于系统的(Windows:ullArguments,来自 GESTUREINFO 的字段).

flags

返回内含一个或多个标记的列表(参照下面的清单)(block!)。

away?

如果鼠标指针移出该元件的边界,则返回 truelogic!)。只当 over 事件激活的时候生效。

down?

如果鼠标左键是按下的,则返回 truelogic!)。

mid-down?

如果鼠标中键是按下的,则返回 truelogic!)。

alt-down?

如果鼠标右键是按下的,则返回 truelogic!)。

ctrl?

如果 CTRL 键是按下的,则返回 truelogic!)。

shift?

如果 SHIFT 左键是按下的,则返回 truelogic!)。

这是可能在 event/flags 中出现的 flags 的清单:

  • away

  • down

  • mid-down

  • alt-down

  • aux-down

  • control

  • shift

注意
  • 所有字段(type 除外)都是只读的,对 type 值的设置只在 View 引擎内部发生。

这里是由 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-downkey-up 的信息被 event/key 返回:

  • left-control

  • right-control

  • left-shift

  • right-shift

  • left-menu

  • right-menu

11.3. 动作器

动作器是 View 事件的处理器函数,它们由 actors 特征引用的自由格式的对象(不提供原型)定义。所有动作器都具有相同的规格区块。

语法

on-<event>: func [face [object!] event [event!]]

<event> : 任何有效的事件名(上面的表中的)。
face    : 接收该事件的元件对象。
event   : 事件值。

除了 GUI 事件,还可以定义 on-create 动作器,它在第一次显示元件时被调用,刚好就在系统资源被分配给它之前。与其他动作器不同,on-create 只有一个参数 face

返回值

'stop : 退出事件循环。
'done : 阻止该事件流动到下一个元件。

其他的返回值不会有作用。

11.4. 事件流

事件通常在特定的屏幕位置被生成,分配给最接近的、在前方的元件。不过,事件会在元件的祖先层级中以两种方向在游历过一个又一个的元件,这俗称为:

  • 事件捕获:事件从窗口元件向下传递到在前方的、作为该事件起源的元件。对每个元件生成一个 detect 事件,如果提供了相应的处理器,则会调用它。

  • 事件冒泡:事件从元件向着父窗口传递。对于每个元件,调用局部的事件处理器。

Event flow

典型的事件流路径:

  1. 按钮生成一个单击事件,执行全局处理器(参照下一个小节)。

  2. 事件捕获阶段开始:

    1. 首先窗口获得该事件,调用它的 on-detect 处理器。

    2. 接着面板获得该事件,调用面板的 on-detect 处理器。

    3. 最后按钮获得该事件,调用按钮的 on-detect 处理器。

  3. 事件冒泡阶段开始:

    1. 首先按钮获得该事件,调用它的的 on-click 处理器。

    2. 接着面板获得该事件,调用面板的 on-click 处理器。

    3. 最后窗口获得该事件,调用它的 on-click 处理器。

注意
  • 可以从任何事件处理器返回 done 来取消事件。

  • 由于性能原因,默认未启用事件捕获。可以设置 system/view/capture?: yes 来启用它。

11.5. 全局事件处理器

在进入事件流路径之前,可以使用所谓的"`全局事件处理器`"来进行特定的预处理。有提供以下的 API 用于添加和删除它们。

11.5.1. insert-event-func

语法

insert-event-func <handler>

<handler> : 用来预处理事件(可多个)的处理器函数或代码区块。

处理器的函数规格 : func [face [object!] event [event!]]

返回值

新添加的处理器函数(`function!`)。

描述

安装一个全局处理函数,它可以在事件到达元件的处理器之前进行预处理。每一次事件发生,所有的全局处理器都会被调用,因此处理器主体代码需要为速度和内存占用进行优化。如果提供区块作为参数,它会被用 function 构造函数转换成函数。

处理器函数的返回值:

  • none :该事件可以被其他处理器处理(none!)。

  • 'done :其他全局处理器将被跳过,但事件会向子元件传播(word!)。

  • 'stop :退出事件循环(word!)。

返回对处理器函数的引用,如果之后需要删除则应该保存它。

11.5.2. remove-event-func

语法

remove-event-func <handler>

<handler> : 先前安装过的事件处理器函数。

描述

通过从内部的列表中删除先前安装过的全局事件处理器来禁用它。

12. system/view 对象

单词 描述

screens

内含代表连接到的显示器的屏幕元件的列表。

event-port

保留以供将来使用

metrics

保留以供将来使用

platform

View 引擎的底层平台的代码(包含后端代码)。

VID

处理 VID 的代码。

handlers

内含全局事件处理器的列表。

reactors

内部的关联表,用于响应式元件和它们的动作器区块。

evt-names

内部的表,用于事件到动作器名称的转换。

init

View 引擎初始化函数,如果需要用户可以调用它。

awake

高级事件的主要入口函数。

capturing?

yes = 启用事件捕获阶段和 detect 事件的生成(默认设为 no)。

auto-sync?

yes = 实时更新元件(默认),no = 延迟更新元件。

debug?

yes = 输出 View 内部事件的详细日志(默认设为 no)。

silent?

yes = 不报告处理 VID 和 Draw 方言的错误(默认设为 no)。

13. 引入 View 组件

编译时默认情况下不包含 View 组件。要包括它,Red 主脚本必须在首部使用 Needs 字段来声明依赖。

Red [
    Needs: 'View
]
注意

在 View 组件可用的平台上,使用 red 二进制文件自动生成的控制台会包含 View 组件,因此在这种控制台里运行的用户脚本中不需要 Needs 首部字段。

14. 额外的函数

函数 描述

view

用元件树或 VID 代码区块在屏幕上渲染一个窗口,除非用 了 no-wait 修饰词,它会进入事件循环。

unview

销毁一个或多个窗口。

layout

把 VID 代码区块转换成元件树。

center-face

使元件相对于其父元件居中。

dump-face

输出对元件树的紧凑的描述(用于调试)。

do-actor

手动对元件的动作器进行求值。

do-events

发起事件循环(视需要可只处理一下挂起的事件然后返回)。

draw

把 Draw 方言区块渲染成图像。

to-image

把任何渲染过的元件转换为图像。

size-text

以像素为单位测量在元件中的文本(会把选择的字体考虑在内)。

待添加:

  • menu 特征的规范

  • image! 数据类型的描述