Red/Viewグラフィックエンジン

1. デザインゴール

Red/View(または単にView)コンポーネントはプログラミング言語Redのグラフィックシステムです。そのデザインゴールは以下の通りです。

  • データ指向のミニマルなAPI

  • プログラミングインターフェイスとしての仮想的なオブジェクトツリー

  • 仮想ツリーとディスプレイシステムの間のリアルタイムまたは遅延型の同期

  • 双方向バインディングのサポートを用意にする

  • プラットフォームを横断して異なるバックエンドを提供する

  • OS、サードパーティ、カスタムのウィジェットセットをサポート

  • パフォーマンスのオーバーヘッドが少ない

仮想ツリーはフェイスオブジェクトを使って構築されます。各フェイスオブジェクトは双方向バインディングでディスプレイ上のグラフィックコンポーネントにマップされます。

2. フェイスオブジェクト

フェイスオブジェクトは face! テンプレートオブジェクトのクローンです。フェイスオブジェクトのフィールドは ファセット(facet) と呼ばれます。

使用可能なファセットのリスト:

ファセット データ型 必須 適用対象 説明

type

word!

はい

全て

グラフィックコンポーネントのタイプ (以下も参照)

offset

pair!

はい

全て

親の左上オリジンのオフセット位置

size

pair!

はい

全て

フェイスのサイズ

text

string!

いいえ

全て

フェイスに表示されるラベルテキスト

image

image!

いいえ

一部

フェイスのバックグラウンドに表示されるイメージ

color

tuple!

いいえ

一部

R.G.BまたはR.G.B.Aフォーマットのフェイスのバックグラウンドカラー

menu

block!

いいえ

全て

メニューバーまたはコンテキストメニュー

data

any-type!

いいえ

全て

フェイスのコンテンツデータ

enable?

logic!

はい

全て

フェイスの入力イベントの有効/無効

visible?

logic!

はい

全て

フェイスの表示/ 非表示

selected

integer!

いいえ

一部

リストタイプにおける選択要素のインデックス

flags

block!, word!

いいえ

一部

フェイスの表示や振る舞いを変更するための特別なキーワードのリスト

options

block!

いいえ

一部

[name: value]の形式で指定する追加のフェイスプロパティ

parent

object!

いいえ

全て

親のフェイス(存在する場合)へのバックリファレンス

pane

block!

いいえ

一部

フェイスの中に表示されている子フェイスのリスト

state

block

いいえ

全て

フェイスの内部的な状態 (ビューエンジンによってのみ使用されます)

rate

integer!, time!

いいえ

全て

フェイスのタイマー。integer値をセットすると頻度、time値をセットすると遅延時間になり、noneを指定すると停止します

edge

object!

いいえ

全て

(将来のために予約されています)

para

object!

いいえ

全て

テキストの位置のためのParaオブジェクトの参照

font

object!

いいえ

全て

テキストファセットのフォントプロパティをセットするためのフォントオブジェクトの参照

actors

object!

いいえ

全て

ユーザーが提供したイベントハンドラ

extra

any-type!

いいえ

全て

フェイスに関連付けされた任意のユーザーデータ(ユーザーが自由に使うことができます)

draw

block!

いいえ

全て

フェイスに描画されるDrawコマンドのリスト

flags ファセットに使用できるフラグのリスト:

フラグ 説明

all-over

全ての over イベントをフェイスに送ります。

その他のフェイスの種類ごとのフラグはそれぞれのセクションに記載されています。

Notes:

  • 必須ではないファセットには none をセットできます。

  • offsetsize はスクリーンのピクセルで指定します。

  • offsetsize は表示される前に時々 none になることがあります。(タブパネルの中のパネルのような場合) 値はビューエンジンによって設定されます。

  • 表示順は後ろから前の順で color、image、text、draw です。

新しいフェイスの生成はface!オブジェクトのクローンによって行われ、 少なくとも 有効な type 名を与える必要があります。

button: make face! [type: 'button]

一度フェイスが生成されると、 type フィールドは変更できません。

2.1. オプションファセット

オプションファセットは特定の振る舞いのために使われる任意のファセットです。

オプション 説明

drag‑on

次のいずれかになります: 'down'mid-downalt-down'aux-down。ドラッグ&ドロップの挙動を指定するために使われます

3. フォントオブジェクト

フォントオブジェクトは font! テンプレートオブジェクトのクローンです。1つのフォントオブジェクトは1つ以上のフェイスから参照されることが可能です。これにより、複数のフェイスのフォントプロパティを一ヶ所でコントロールすることが可能になります。

フィールド データ型 必須 説明

name

string!

いいえ

OSにインストールされた有効なフォント名

size

integer!

いいえ

フォントサイズ(ポイント単位)

style

word!, block!

いいえ

スタイリングモードまたはスタイリングモードのブロック

angle

integer!

はい

Tテキスト描画の角度(デフォルトは「0」)

color

tuple!

はい

R.G.BまたはR.G.B.Aフォーマットのフェイスのバックグラウンドカラー

anti-alias?

logic!, word!

いいえ

アンチエイリアスモード(有効/無効または特別なモード)

shadow

(reserved)

いいえ

(将来のために予約されています)

state

block!

いいえ

フェイスの内部的な状態 (ビューエンジンによってのみ使用されます)

parent

block!

いいえ

親のフェイスへの内部的なバックリファレンス (ビューエンジンによってのみ使用されます)

Notes:

  • 必須でないファセットには none をセットできます。

  • angle フィールドは現在のところ正しく動きません。

  • 全てのフィールドの値は将来的にはオプショナルになる予定です。

利用可能なフォントスタイル:

  • bold

  • italic

  • underline

  • strike

利用可能なアンチエイリアスモード:

  • 有効/無効 (anti-alias?: yes/no)

  • クリアタイプモード (anti-alias?: 'ClearType)

4. Para オブジェクト

Paraオブジェクトは para! テンプレートオブジェクトのクローンです。1つのparaオブジェクトは1つ以上のフェイスから参照されることが可能です。これにより複数のフェイスのparaプロパティを一ヶ所でコントロールすることが可能になります。

フィールド データ型 説明

origin

(予約)

(将来のために予約されています)

padding

(予約)

(将来のために予約されています)

scroll

(予約)

(将来のために予約されています)

align

word!

水平方向のテキストアラインメントをコントロールします: leftcenterright

v-align

(予約)

垂直方向のテキストアラインメントをコントロールします: topmiddlebottom

wrap?

logic!

フェイスのワードラップの有効/無効

parent

block!

親のフェイスへの内部的なバックリファレンス (ビューエンジンによってのみ使用されます)

Notes:

  • いずれのparaフィールドも none をセットすることができます。

5. フェイスツリー

フェイスはディスプレイ上の階層状のグラフィックコンポーネントにマップされたツリー構造で構成されます。ツリーの関係は以下の物で定義されます。

  • pane ファセット: ブロック内の1つ以上の子フェイスのリスト

  • parent ファセット: 親のフェイスへの参照

pane 内のフェイスオブジェクトの順番は重要です。グラフィックオブジェクトのZオーダーは順番どおりにマップされます。つまり、 pane の先頭のフェイスは他の全てのフェイスの後ろに表示され、末尾のフェイスは最前面に表示されます。

フェイスツリーのルートは screen フェイスです。 screen フェイスは自身の pane ブロック内の window フェイスのみ表示できます。

スクリーン上に全てのフェイスを表示するために、各フェイスは 直接的(windowフェイスの場合)または間接的(他の種類のフェイスの場合)に screen フェイスに接続される必要があります。

Face tree

6. フェイスのタイプ

6.1. Base

base 型は最もベーシックなフェイスのタイプであり、最も多目的なものでもあります。デフォルトでは、 base の背景色は基本的には 128.128.128 になります。

Facet 説明

type

'base

image

image!の値を指定できます。アルファチャンネルがサポートされます。

color

背景色を指定します。アルファチャンネルがサポートされます。

text

フェイスの中に表示されるオプションのテキスト

draw

Drawプリミティブは透過処理を完全にサポートします。

Notes:

  • 以下のファセットの全ての組み合わせがサポートされ、次の順番でレンダリングされます: colorimagetextdraw

  • colorimagetextdraw における透明度の指定は、色を示すtuple値: R.G.B.A のアルファチャンネルコンポーネントで指定します。 A = 0 では完全な不透明になり、 A = 255 は完全な透明になります。

このフェイスタイプは全てのカスタムグラフィックコンポーネントの実装で使用されるべきです。


6.2. Text

text 型はスタティックなラベルを表示します。

ファセット 説明

type

'text

text

ラベルのテキスト

data

テキストとして表示される値

options

サポートされるフィールド: default

data ファセットは以下の変換ルールに従って text フィールドとリアルタイムに同期します。

  • text が変更されると、 dataload された text の値、 none または `options/defaultで指定された値のいずれかになります。

  • data が変更されると textdataform した値になります。

options ファセットには以下のプロパティをセットできます。

  • default : 任意の値をセットできます。セットされた値は textnone を返す場合の data の値として使われます。これは text がロードできない値だった時などです。


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

このタイプはラジオボタンを表現します。オプションでラベルテキストを左右のどちらかに表示できます。1つのペイン上のラジオボタンは1つだけがチェック状態になれます。

Facet 説明

type

'radio

text

ラベルのテキスト

para

align フィールドはテキストが left (左側)に表示されるか right (右側)に表示されるかをコントロールします。

data

true: チェックあり false: チェックなし(デフォルト)

イベントタイプ ハンドラ 説明

change

on-change

ラジオボタンのチェック状態がユーザー操作により変更された場合に発生します。

6.6. Field

このタイプは1行の入力フィールドを表現します。

ファセット 説明

type

'field

text

入力テキスト。読み書きする値です。

data

表示するテキストの値

options

サポートされるフィールド: default

flags

いくつかの特別なフィールドの機能をオン/オフします(block!)

サポートされるフラグ:

  • no-border: 依存するGUIフレームワークによるエッジデコレーションを除去します。

data ファセットは以下の変換ルールに従って text フィールドとリアルタイムに同期します。

  • text が変更されると、 dataload された text の値、 none または `options/defaultで指定された値のいずれかになります。

  • data が変更されると textdataform した値になります。

options ファセットには以下のプロパティをセットできます。

  • default : 任意の値をセットできます。セットされた値は textnone を返す場合の data の値として使われます。これは text がロードできない値だった時などです。

NOTE:

  • selected が入力テキストの一部をハイライトするために将来使用される予定です。

イベントタイプ ハンドラ 説明

enter

on-enter

Enterキーがフィールド内で押されるたびに発生します。

change

on-change

フィールド内で入力が行われるたびに発生します。

key

on-key

フィールド内でキーが押されるたびに発生します。

6.7. Area

このタイプは複数行の入力フィールドを表現します。

Facet 説明

type

'area

text

入力テキスト。読み書きする値

flags

いくつかの特別なareaの機能をオン/オフします(block!)

サポートされるフラグ:

  • no-border: 依存するGUIフレームワークによるエッジデコレーションを除去します。

Notes:

  • selected が入力テキストの一部をハイライトするために将来使用される予定です。

  • A vertical scroll-bar can appear if all lines of text cannot be visible in the area (might be controlled by a flags option in the future).

  • area内の全てのテキストが表示できない場合、垂直方向のスクロールバーが自動的に表示されます(将来的には flag オプションでコントロール可能になる予定です)

イベントタイプ ハンドラ 説明

change

on-change

フィールド内で入力が行われるたびに発生します。

key

on-key

フィールド内でキーが押されるたびに発生します。


6.8. Text-list

このタイプは固定フレームのテキスト文字列の垂直方向のリストを表現します。コンテンツがフレームにフィットしない場合、垂直方向のスクロールバーが自動的に表示されます。

Facet 説明

type

'text-list

data

表示する文字列のリスト(block! hash!)

selected

選択された文字列のインデックス。選択値がない場合はnoneになります。読み取り、書き込み可能です

イベントタイプ ハンドラ 説明

select

on-select

リスト内のエントリが選択された時に発生します。 selected ファセットは 古い 選択エントリのインデックスを示します。

change

on-change

select イベントの後に発生します。 selected ファセットは 新しい 選択エントリのインデックスを示します。

Notes:

  • 表示されるアイテムの数は現在ユーザーによって指定することができません。

6.9. Drop-list

垂直方向のテキスト文字列のリストを表現します。折りたたみ可能なフレームで表示されます。コンテンツがフレームにフィットしない場合、垂直方向のスクロールバーが自動的に表示されます。

Facet 説明

type

'drop-list

data

表示する文字列のリスト(block! hash!)

selected

選択された文字列のインデックス。選択値がない場合はnoneになります。読み取り書き込みが可能です。

data ファセットは任意の値を受け取りますが、文字列値だけがリストに追加され表示されます。文字列以外の型の追加の値は文字列をキーとして関連付けされた配列を作ることで使うことができます。 selected ファセットは1始まりの整数のインデックスで、(data ファセット内ではなく)リスト内の選択された文字列の位置を示します。

イベントタイプ ハンドラ 説明

select

on-select

リスト内のエントリが選択された時に発生します。 selected ファセットは 古い 選択エントリのインデックスを示します。

change

on-change

select イベントの後に発生します。 selected ファセットは 新しい 選択エントリのインデックスを示します。

Notes:

  • 表示されるアイテムの数は現在のところユーザーが指定することはできません。

6.10. Drop-down

折りたたみ可能なフレーム内のテキスト文字列の垂直方向のリストのエディットを表現します。フレームにコンテンツがフィットしない場合、垂直方向のスクロールバーが自動的に表示されます。

Facet 説明

type

'drop-down

data

表示する文字列のリスト(block! hash!)

selected

選択された文字列のインデックス。選択値がない場合はnoneになります。読み取り書き込みが可能です。

data ファセットは任意の値を受け取りますが、文字列値だけがリストに追加され表示されます。文字列以外の型の追加の値は文字列をキーとして関連付けされた配列を作ることで使うことができます。 selected ファセットは1始まりの整数のインデックスで、(data ファセット内ではなく)リスト内の選択された文字列の位置を示します。

イベントタイプ ハンドラ 説明

select

on-select

リスト内のエントリが選択された時に発生します。 selected ファセットは 古い 選択エントリのインデックスを示します。

change

on-change

select イベントの後に発生します。 selected ファセットは 新しい 選択エントリのインデックスを示します。

Notes:

  • 表示されるアイテムの数は現在のところユーザーが指定することはできません。

6.11. Progress

水平方向または垂直方向のプログレスバーを表現します。

Facet 説明

type

'progress

data

進捗を表す値(percent!またはfloat!の値)

Notes:

  • float値が data として使われた場合、値は0.0から1.0の間である必要があります。

6.12. Slider

水平または垂直方向のスライダーを表現します。

Facet 説明

type

'slider

data

カーソル位置を示す値(percent!またはfloat!値)

Notes:

  • float値が data として使われた場合、値は0.0から1.0の間である必要があります。

6.13. Camera

ビデオカメラフィードを表示するために使われます。

Facet 説明

type

'camera

data

文字列のブロックによるカメラの名前のリスト

selected

data のリストの中から表示するために選択されたカメラ。整数のインデックスです。 none が設定されている場合、カメラフィードは無効化されます。

Notes:

  • data ファセットは最初は none が指定されています。カメラのリストはカメラフェイスの show が初めて呼ばれた時に取得されます。

  • カメラフェイスに対して to-image を使用することで、カメラのコンテンツを取得することができます。

6.14. Panel

パネルは他のフェイスのコンテナです。

Facet 説明

type

'panel

pane

子フェイスのブロック。ブロック内の順番は表示されるZオーダーとなります。

Notes:

  • 子フェイスの offset の座標は親パネルの左上のコーナーからの相対位置になります。

  • 子フェイスはパネルのフレームに合わせてクリッピングされます。


6.15. Tab-panel

タブパネルは常にいずれか一枚だけが表示されるパネルのリストです。パネルの名前のリストはタブ名として使われ、選択パネルを変更するために使われます。

Facet 説明

type

'tab-panel

data

タブ名のブロック(文字列の値)

pane

タブのリストに対応するパネルのリスト(block!)

selected

選択されているパネルのインデックスまたはnone。読み取り、書き込みが可能です(integer!)

イベントタイプ ハンドラ 説明

change

on-change

ユーザーが新しいタブを選択した時に発生します。 event/picked は新しく選択されたタブのインデックスを保持します。 selected プロパティはこのイベントの直後に更新されます。

Notes:

  • タブパネルを適切に表示するため、 datapane ファセットの両方が正しい順番で要素を持っている必要があります。

  • もし pane が指定されたタブよりも多くのパネルを持っていた場合、多い文は無視されます。

  • タブを追加/削除する場合、対応するパネルも pane リストから削除される必要があります。

6.16. Window

OSのデスクトップに表示されるウィンドウを表現します。

Facet 説明

type

'window

text

ウィンドウタイトル(string!)

offset

デスクトップスクリーン上の左上のコーナーからのオフセット。ウィンドウの外枠のデコレーションは含みません。(pair!)

size

ウィンドウサイズ。ウィンドウの外枠のデコレーションは含みません。(pair!)

flags

ウィンドウ独自の機能のオン/オフを行います(block!)

menu

ウィンドウのメニューバーを表示します。(block!)

pane

ウィンドウ内に表示するフェイスのリスト(block!)

selected

フォーカスがセットされるフェイスを選択します(object!)

サポートされるフラグ:

  • modal: ウィンドウをモーダルにし、前に開かれたウィンドウを無効化します。

  • resize: ウィンドウのリサイズを可能にします(デフォルトは固定サイズで、リサイズできません)

  • no-title: ウィンドウのタイトルテキストを非表示にします

  • no-border: ウィンドウの外枠の修飾を無効化します

  • no-min: ウィンドウのドラッグバー上の最小化ボタンを非表示にします

  • no-max: ウィンドウのドラッグバー上の最大化ボタンを非表示にします

  • no-buttons: ウィンドウのドラッグバー上の全てのボタンを非表示にします

  • popup: 外枠の修飾を小さいものに変更します(Windowsのみ対応)

Notes:

  • popup キーワードをメニューのスペックブロックで使った場合、デフォルトのメニューバーではなく、ウィンドウ内のコンテキストメニューに強制的に変更になります。

6.17. Screen

コンピュータに接続されたグラフィックディスプレイユニット(通常はモニタ)を表現します

Facet 説明

type

'screen

size

ピクセル単位のスクリーンサイズ。起動時にビューエンジンによってセットされます(pair!)

pane

スクリーンに表示されるウィンドウのリスト(block!)

全ての表示されているウィンドウフェイスはスクリーンフェイスの子どもである必要があります。

6.18. Group-box

グループボックスは他のフェイスのコンテナとなり、周囲を枠線で囲まれます。 これは一時的なスタイルであり、将来的に edge ファセットがサポートされたら削除されます。

Facet 説明

type

'group-box

pane

子フェイスのブロック。ブロック内の順序は表示されるZオーダーになります。

Notes:

  • 子フェイスの offset 座標はグループボックスの左上のコーナーからの相対位置になります。

  • 子フェイスはグループボックスのフレームに収まるようにクリッピングされます。

7. フェイスのライフサイクル

  1. face! のプロトタイプからフェイスオブジェクトが生成されます

  2. スクリーンフェイスに接続されているフェイスツリー内にフェイスオブジェクトを挿入します。

  3. show が使用されると、スクリーン上にフェイスオブジェクトがレンダリングされます。

    1. このタイミングでシステムリソースが確保されます。

    2. face/state ブロックがセットされます。

  4. ディスプレイから取り除くためにペインからフェイスを削除します。

  5. ガベージコレクタが参照されなくなったフェイスが保持しているシステムリソースの解放を行います。

Notes:

  • リソースを多く使うアプリケーションのため、システムリソースを手動で開放する free 関数が提供される予定です。

8. SHOW関数

構文
show <face>

<face>: face!オブジェクトのクローンまたはフェイスオブジェクトか名前(word!の値を使います)のブロック

説明

この関数はスクリーン上のフェイスやフェイスのリストを更新するために使われます。スクリーンフェイスに接続されたフェイスツリー内で参照されているフェイスだけが適切にレンダリングされます。初回呼び出し時にはシステムリソースが確保され、 state ファセットがセットされグラフィックコンポーネントがスクリーン上に表示されます。以降の呼び出しではフェイスオブジェクトに対する変更がスクリーンに反映されます。 pane ファセットが定義されていた場合、 show は子フェイスにも再帰的に適用されます。

stateファセット

以下の情報は参考のために記載されていますが、通常は state ファセットはユーザーによって使用されるべきではありません。しかしOSのAPIがユーザーによって直接的に呼び出しされたり、ビューエンジンの振る舞いが変更される必要がある場合はアクセスすることもあり得ます。

Position/Field 説明

1 (handle)

グラフィックオブジェクトに対するOS固有のハンドル(integer!)

2 (changes)

最後の show の実行以降に変更されたファセットをマークしているビットフラグの配列(integer!)

3 (deferred)

リアルタイムアップデートがオフにされている場合に、最後の show の実行以降に遅延されている変更のリスト(block! none!)

4 (drag-offset)

フェイスドラッギングモードに入った場合のマウスカーソルの開始オフセット位置を保持しています。(pair! none!)

Notes:

  • show を呼び出しした後、 changes フィールドは0にリセットされ deferred フィールドはクリアされます。

  • 将来のバージョンではOSハンドルにはhandle! 型が使用されます。

9. リアルタイム VS 遅延アップデート

ビューエンジンはフェイスツリーに変更が行われた場合に、表示をアップデートするモードを2つ持っています。

  • リアルタイムアップデート:フェイスに対するあらゆる変更は即座にスクリーンに反映します

  • 遅延アップデート:フェイスに対するいかなる変更も、フェイスまたは親フェイスの show が呼び出しされるまでスクリーンには反映しません。

この2つのモードの切り替えは system/view/auto-sync? wordによってコントロールされます。 yes がセットされている場合、リアルタイムアップデートモードになります(デフォルトのモードです)。 no がセットされている場合、ビューエンジンは全ての更新を遅延します。

リアルタイムアップデートがデフォルトであるのは以下の理由からです。

  • フェイスの変更のたびに show を呼び出す必要性をなくし、ソースコードをシンプル、簡潔にするため

  • 初心者の学習のオーバーヘッドを減らすため

  • シンプルなアプリケーションやプロトタイプアプリケーションにはリアルタイムアップデートで十分なため

  • コンソールからの試行錯誤を簡単にするため

遅延モードは何らかの問題を避けるためや、ベストパフォーマンスの追求がゴールとなる場合のため、スクリーン上に多くの変更を同時に行います。

Notes:

  • これは遅延モードしかサポートしていないRebol/Viewエンジンとの大きな違いになります。

10. 双方向バインディング

フェイスオブジェクトはファセットの中で使われているseriesとオブジェクトをバインドするRedのオーナーシップシステムに依拠しています。ファセットの変更(ネストしたファセットの変更であっても)はフェイスオブジェクトに検知され、現在の同期モード(リアルタイムまたは遅延)に従って処理されます。

一方で、レンダリングされたグラフィックオブジェクトへの変更は、対応するファセットに即座に反映されます。たとえば、 field フェイス内で入力を行うと、text ファセットの値にライブモードで反映されます。

この双方向バインディングにより、グラフィックオブジェクトとプログラマのやり取りには特別なAPIを使う必要がなく、シンプルになります。seriesアクションを使ってファセットを更新するだけで十分です。

例:

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

マウス

マウスカーソルがフェイス上を通過した。このイベントはマウスがフェイス上に入った場合と、出ていった場合の2回発生します。もし flags ファセットが all‑over フラグを持っている場合、全ての中間段階のイベントも発生します。

move

マウス

ウィンドウが移動された

resize

マウス

ウィンドウがリサイズされた

moving

マウス

ウィンドウが移動している

resizing

マウス

ウィンドウがリサイズされている

wheel

マウス

マウスホイールが移動している

zoom

タッチ

ズームジェスチャ(ピンチ)が認識された

pan

タッチ

パンジェスチャ(スイープ)が認識された

rotate

タッチ

回転ジェスチャが認識された

two‑tap

タッチ

ダブルタップジェスチャが認識された

press‑tap

タッチ

プレス&タップジェスチャが認識された

key‑down

キーボード

キーが押された

key

キーボード

文字が入力されたまたは特別なキーが押された(control、shift、munuキーを除く)

key‑up

キーボード

押されたキーが離された

enter

キーボード

Enterキーが押された

focus

全て

フェイスがフォーカスを取得した

unfocus

全て

フェイスがフォーカスを失った

select

全て

複数選択式のフェイスで選択が行われた

change

全て

ユーザーインプットによってフェイスの変更が起きた(テキスト入力またはリストの選択)

menu

全て

メニューエントリが選択された

close

全て

ウィンドウが閉じようとしている

time

タイマー

フェイスにセットされた rate ファセットの期限が来た

Notes:

  • タッチイベントはWindows XPでは発生しません。

  • 1つ以上の moving イベントが常に move の前に発生します。

  • 1つ以上の resizing イベントが resize の前に発生します。

11.2. Event! データ型

イベントの値は発生したイベントに対する全ての情報を保持する不明瞭なオブジェクトです。パス表記によりイベントのフィールドにアクセスすることができます。

フィールド 返り値

type

イベントタイプ (word!)

face

イベントが起きたフェイスオブジェクト(object!)

window

イベントが起きたウィンドウフェイス(object!)

offset

イベントが起きた時のフェイスオブジェクトとのマウスの相対位置のオフセット(pair!) ジェスチャイベントの場合、中心座標になります。

key

押されたキー(char! word!)

picked

フェイス内で新しく選択されたアイテム(integer! percent!)。「wheel」イベントの場合、回転ステップの数になります。正の数値の場合、マウスホイールが前方向(ユーザーから離れる方向)に回転したことを示し、負の数値の場合、マウスホイールが後ろ方向(ユーザーに近づく方向)に回転したことを示します。「menu」イベントの場合、対応するメニューID(word!)を返します。ズームジェスチャの場合、相対的な増減を表すパーセント値を返します。他のジェスチャでは、現在のところ値はシステムに依存します。(Windowsの場合: GESTUREINFO の「ullArguments」フィールドの内容になります。

flags

1つ以上のフラグのリストを返します(以下のリストも参照してください)(block!)

away?

マウスカーソルがフェイスの境界外にある場合は true を返します(logic!) over イベントがアクティブの場合のみ適用されます。

down?

マウスの左ボタンが押されている場合に true を返します(logic!)

mid-down?

マウスのミドルボタンが押されている場合に true を返します(logic!)

alt-down?

マウスの右ボタンが押されている場合に true を返します(logic!)

ctrl?

CTRLキーが押されている場合に true を返します(logic!)

shift?

SHIFTキーが押されている場合に true を返します(logic!)

event/flags のあり得るフラグのリスト:

  • away

  • down

  • mid-down

  • alt-down

  • aux-down

  • control

  • shift

Notes:

  • type 以外の全てのフィールドは読み取り専用です。type のセットはビューエンジンの内部でのみ行われます。

event/key によってwordとして返される特別なキーのリスト:

  • 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. Actors

アクターはビューのイベントのためのハンドラ関数です。actors ファセットによって参照されるフリーフォームオブジェクト(プロトタイプのないオブジェクト)によって定義されます。全てのアクターのは同じスペックブロックを持ちます。

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

<event> : 何らかの有効なイベント名(上記の表に記載のもの)
face    : イベントを受け取るフェイスオブジェクト
event   : イベントの値

GUIイベントに加え、フェイスが初めて表示される時に、システムリソースが確保される直前に呼ばれる、 on-create アクターを定義することも可能です。他のアクターと異なり、 on-create アクターの引数は1つだけで face を受け取ります。

返り値
'stop : イベントループを終了します。
'done : 次のフェイスにイベントが流れることを停止させます。

他の返り値には有意な効果はありません。

11.4. イベントフロー

イベントは通常スクリーン上の特定の位置で発生し、最も近い前面のフェイスに割り当てされます。しかし、イベントはそのフェイスから親フェイスへと階層的に移動していくこととなり、この時一般的に以下の2種類の方向性があります。

  • イベントキャプチャリング : イベントはウィンドウフェイスから イベントが元々発生した前面のフェイスへと降りていきます。対応するハンドラが設定されている場合、各フェイスで 検知(detect) イベントが発生します。

  • イベントバブリング : イベントは前面のフェイスから親のウィンドウフェイスへ移動します。ローカルのイベントハンドラが呼ばれます。

Event flow

典型的なイベントのフローパスは以下のようなものです:

  1. ボタンのクリックイベントが発生します。グローバルハンドラが処理されます(詳細は次のセクションを見てください)

  2. イベントキャプチャリングステージが開始します:

    1. 最初にウィンドウがイベントを取得し、ウィンドウの on-dectect ハンドラが呼ばれます。

    2. 次にパネルがイベントを取得します。パネルの on-detect ハンドラが呼ばれます。

    3. 最後にボタンがイベントを取得します。ボタンの on-detect ハンドラが呼ばれます。

  3. イベントバブリングステージが開始します:

    1. 最初にボタンがイベントを取得し、ボタンの on-click ハンドラが呼ばれます。

    2. 次にパネルがイベントを取得します。パネルのon-click ハンドラが呼ばれます

    3. 最後にウィンドウがイベントを取得します。ウィンドウの on-click ハンドラが呼ばれます。

Notes:

  • イベントのキャンセルはいずれかのイベントハンドラが 'done wordが返されることで行われます。

  • イベントキャプチャリングはパフォーマンス上の理由からデフォルトでは無効になっています。有効にしたい場合、 system/view/capturing?: 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 object

Word 説明

screens

接続されたディスプレイを表すスクリーンフェイスのリスト

event-port

将来のために予約されています

metrics

将来のために予約されています

platform

ビューエンジンのローレベルなプラットフォームコード(バックエンドコードも含みます)

VID

VIDとして処理しているコード

handlers

グローバルイベントハンドラのリスト

reactors

リアクティブフェイスと対応するアクションブロックの内部的な関連付けテーブル

evt-names

イベントとアクター名を変換する内部的なテーブル

init

ビューエンジンを初期化する関数。必要であればユーザーが呼び出すこともできます。

awake

メインのハイレベルイベントへのエントリポイント関数

capturing?

yes = イベントキャプチャリングステージと detect イベントの生成を有効化します(デフォルトは no です)

auto-sync?

yes = リアルタイムなフェイスの更新を有効にします(デフォルト)、 no = 遅延フェイスアップデートを有効にします。

debug?

yes = ビューの内部イベントの詳細ログを出力します。(デフォルトは no です)

silent?

yes = VIDとDrawダイアレクトの処理中のエラーを出力しません(デフォルトは no です)

13. Viewコンポーネントのインクルード

Viewコンポーネントは コンパイル時には デフォルトでは含まれません。含めるためには、メインのRedスクリプトでヘッダーで Needs フィールドを使用し、依存関係を宣言する必要があります。

Red [
    Needs: 'View
]

NOTE: red バイナリで自動生成されたコンソールを使う場合、プラットフォーム上のViewコンポーネントが使用可能であれば、スクリプトに Needs ヘッダーフィールドがなくても動作できます。

14. 追加の関数

Function 説明

view

フェイスツリーまたはVIDコードブロックからウィンドウをスクリーン上にレンダリングします。 /no-wait リファインメント が使われない限りはイベントループに入ります。

unview

1つ以上のウィンドウを破棄します。

layout

VIDコードブロックをフェイスツリーに変換します

center‑face

フェイスを親の中心に配置します

dump‑face

フェイスツリーのコンパクトな説明を出力します(デバッグ用)

do‑actor

フェイスのアクターを手動で評価します。

do‑events

イベントループを開始します(必要に応じて保留中のイベントを処理してリターンします)

draw

Drawダイアレクトブロックをimageにレンダリングします

to‑image

任意のレンダリング済みのフェイスをimageに変換します

size‑text

フェイスのテキストのピクセルサイズを測ります(選択されているフォントも計算に入れます)

追加される予定のもの:

  • メニューファセットの仕様

  • image!データ型の説明

results matching ""

    No results matching ""