ビジュアルインターフェイスダイアレクト(VID)

1. 概要

VIDはVisual Interface Dialectの略です。VIDはRedの ビュー エンジンのトッププレイヤーに位置する、グラフィックユーザーインターフェイスを構築するためのシンプルなダイアレクト(DSL)です。

VIDでは表示するそれぞれのグラフィックコンポーネントについて、以下のような方法を選択することができます。

  • 水平方向・垂直方向のフロー配置

  • グリッドによる位置指定

  • 絶対座標による位置指定

VIDは自動的にコンテナフェイスを作成し、指定されたフェイスを格納します。デフォルトでは、コンテナフェイスのタイプは window です。

VIDコードは layout 関数により処理されます(layoutは内部的には view 関数を呼び出します)。VIDコードはその後、直接表示するのに適したフェイスのツリーにコンパイルされます。

Note
VIDブロックをどう処理するかを確認するには、Redのコンソールで help viewhelp layout を実行してください。

2. コード構造

典型的なVIDのコードブロックは以下の構造になります。

[
    <コンテナ設定>
    <レイアウト指定>
]
  • コンテナ設定: コンテナオブジェクト(パネルまたはウィンドウ)に影響する設定

  • レイアウト指定: レイアウト配置コマンド、スタイル定義およびフェイスの指定

Note
全てのセクションはオプショナルです。VIDブロックに必須となるコンテンツはありません。

3. コンテナ設定

Note
react キーワードはコンテナ設定レベルでもフェイスオプションレベルでも使用できます。reactの説明については こちら を参照してください。

3.1. title

構文
title <text>

<text> : タイトルのテキスト(string!)

説明

コンテナフェイスのタイトルのテキストをセットします。

3.2. size

構文
size <value>

<value> : ピクセル単位の幅と高さ(pair!)

説明

コンテナフェイスの高さをセットします。サイズが明示的に指定されていない場合、コンテナサイズはコンテンツによって自動計算されます。

3.3. backdrop

構文
backdrop <color>

<color> : colorの名称または値(word! tuple! issue!)

説明

コンテナフェイスのバックグラウンドカラーをセットします。

4. レイアウト

デフォルトでは、VIDはコンテナ内のフェイスを以下のシンプルなルールに従って配置します。

  • 方向は水平または垂直になります

  • フェイスは現在の方向、スペースの設定に従って順番に配置されます

デフォルト値は以下です。

  • 開始位置: 10x10

  • スペース: 10x10

  • 方向: across

  • アラインメント: top

方向が across モードの場合、フェイスは以下のように配置されます。

across

方向が below モード(かつデフォルトの left アラインメントを使用)の場合、フェイスは以下のように配置されます。

below

4.1. across

構文
across <alignment>

<alignment> : (省略可能)使用可能な値: top | middle | bottom

説明

レイアウト方向を左から右の水平方向へセットします。1行の中でのフェイスのアラインメントをデフォルト(top)から変更するため、alignment修飾子を指定することもできます。

4.2. below

構文
below <alignment>

<alignment> : (省略可能)使用可能な値: left | center | right

説明

レイアウト方向を上から下の垂直方向にセットします。1列の中でのフェイスのアラインメントをデフォルト(left)から変更するため、alignment修飾子を指定することもできます。

4.3. return

構文
return <alignment>

<alignment> : (省略可能)使用可能な値: left | center | right | top | middle | bottom

説明

レイアウト方向の指定に従い、現在位置をフェイスの次の行または列に移動します。現在のフェイスのアラインメントを変更するためにalignment修飾子を指定することもできます。

4.4. space

構文
space <offset>

<offset> : 新しいスペース量の値(pair!)

説明

新しいスペース量のオフセット値をセットします。以降のフェイスの配置時に、指定の量のスペースが開けられます。

4.5. origin

構文
origin <offset>

<offset> : 新しい開始位置の値(pair!)

説明

新しい開始位置の値をセットします。これはコンテナフェイスからの相対位置になります。

4.6. at

構文
at <offset>

<offset> : 次のフェイスの位置(pair!)

説明

次のフェイスの位置を絶対座標で指定します。配置モードは次のフェイスにだけ影響し、レイアウトフローの位置は変更しません。そのため、後続2つ目以降のフェイスは、レイアウトフローの1つ前のフェイスに続いて配置されていきます。

4.7. pad

構文
pad <offset>

<offset> : 相対オフセット(pair!)

説明

相対指定のオフセットによって現在位置を変更します。後続の同じ行(または列)の全てのフェイスが影響を受けます。

4.8. do

構文
do <body>

<body> : code to evaluate (block!).

説明

通常のRedのコードブロックを評価します。評価は初期化処理の最後に行われます。コンテナフェイス(ウィンドウまたはパネル)を参照するための 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 スタイルはデフォルトサイズ 100x100の base です。image! オプションを受け取ることができ、noneを指定された場合、背景色が白、フェイスと同じサイズの空のイメージが生成されます。

6. フェイスの定義

フェイスは存在しているフェイスタイプの名前または使用可能なスタイル名を使用して、レイアウト中の現在位置に挿入することができます。

構文
<name>: <type> <options>

<name>    : (省略可能)新しいコンポーネントの名称(set-word!)
<type>    : 有効なフェイスタイプまたはスタイル名(word!)
<options> : (省略可能)オプションのリスト

もしnameが指定された場合、そのフェイス定義でVIDによって作成された face! オブジェクトをそのwordで参照可能になります。

それぞれのフェイス、スタイルに対してデフォルト値が提供されます。そのため新しいフェイスはオプションの指定なしでも使用できます。オプションが必要になる場合、以下のセクションで説明している異なる型や使用可能なオプションを使用します。

  • キーワード

  • データ型

  • アクター

全てのオプションはフェイスまたはスタイルの名称の後に、任意の順番で指定することができます。新しいフェイスまたはレイアウトキーワードは与えられたフェイスのオプションリストの終わりを示します。

Note
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 <value>

<value> : 任意の値(any-type!)

説明

フェイスの extra ファセットに新しい値をセットします。

6.1.11. data

構文
data <list>

<list> : アイテムのリスト(block!)

説明

フェイスの data ファセットに値のリストをセットします。リストのフォーマットはフェイスのタイプにより異なります。

6.1.12. draw

構文
draw <commands>

<commands> : コマンドのリスト(block!)

説明

フェイスの draw ファセットにDrawダイアレクトコマンドのリストをセットします。有効なコマンドについては Drawダイアレクト ドキュメントを参照してください。

6.1.13. font

構文
font <spec>

<spec> : 有効なフォント指定(block! object! word!)

説明

フェイスの font ファセットに新しい font! オブジェクトをセットします。font!オブジェクトは こちら で説明しています。

Note
他のフォントに関する設定に対して font を使用することが可能です。VIDはそれらをマージし、最後に指定されたものを優先して使用します。

6.1.14. para

構文
para <spec>

<spec> : 有効なparaの指定(block! object! word!)

説明

フェイスの para ファセットに新しい para! オブジェクトをセットします。para!オブジェクトは こちら で説明しています。

Note
他の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!)

説明

ボディブロックから新しいリアクターを生成します。 react がフェイスオプションとして使われた場合、ボディブロックにおいて face というwordを使うことで現在のフェイスを参照できます。 react がグローバルコンテキストで使用された場合、対象のフェイスは名前を使ってアクセスする必要があります。オプションの later キーワードを使用すると、 body ブロックが処理された直後の最初のリアクションの発生をスキップできます。

NOTE:

リアクターはViewの中でリアクティブプログラミングをサポートする仕組みの一部ですが、ドキュメントはペンディングされています。一言で言えば、ボディブロックはパスを使用して、フェイスのプロパティ間に1つ以上のリレーションを表現します。フェイスのプロパティに対するset-pathはリアクターの ターゲット(アップデートされるフェイス)として処理され、フェイスプロパティにアクセスするパスはリアクターの ソース (ソースに対する変更はリアクターのコードのリフレッシュを発生させます)として処理されます。

6.1.21. loose

構文
loose

説明

マウスの左ボタンを使ったフェイスのドラッグを可能にします。

6.1.22. all-over

構文
all-over

説明

フェイスの all-over フラグをセットし、全てのマウスオーバーイベントが受け取れるようにします。

6.1.23. hidden

構文
hidden

説明

デフォルトでは、フェイスを非表示にします。

6.1.24. disabled

構文
disabled

説明

デフォルトでは、フェイスを無効にします(フェイスは有効化されるまであらゆるイベントを処理しません)。

6.1.25. select

構文
select <index>

<index> : 選択されたアイテムのインデックス(integer!)

説明

現在のフェイスの 選択された ファセットをセットします。主にリストにおいてどのアイテムが最初に選択されているかを指定するために使われます。

6.1.26. focus

構文
focus

説明

ウィンドウが最初に表示された時に現在のフェイスにフォーカスさせます。フォーカスを持てるのは1つのフェイスだけです。もし focus オプションが異なるフェイスに複数回指定されている場合、最後のフェイスがフォーカスを取ります。

6.1.27. hint

構文
hint <message>

<message> : hint text (string!).

説明

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 ファセットが none を返す場合の data ファセットのデフォルト値を定義します。デフォルト値は options ファセット内にキーと値のペアとして保持されます。

Note
現在のところ textfield フェイスでのみ使用されています。

6.2. データ型

キーワードに加え、以下のデータ型のリテラル値をフェイスの設定値として渡すことができます。

データ型 目的

integer!

フェイスの幅の指定。パネルの場合、現在の方向に応じて、レイアウトする行または列の数を示します。

pair!

フェイスの幅と高さを指定します。

tuple!

フェイスの背景色(利用可能な場合)を指定します。

issue!

16進数記法を用いてフェイスの背景色を指定します(#rgb, #rrggbb, #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...]

イベント名の有効なリストは こちら で見つかります。

アクター名の指定がなくブロックやget-wordが渡された場合、そのフェイスタイプのデフォルトのアクターが こちら の定義に従って生成されます。

7. パネル

フェイスをグルーピングしてスタイルをまとめて適用するために、子パネルを定義することが可能です。新しいパネルのサイズは、明示的に指定されていない場合、中身に合うように自動計算されます。

Viewのパネルクラスフェイス型は以下に記載のシンタックスでVIDにおいてもサポートされます。

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の場合、ディバイダーは行数を表します。

Note
オプションとして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 ""