- 1. 概要
- 2. コード構造
- 3. コンテナ設定
- 4. レイアウト
- 5. 追加のスタイル
- 6. フェイスの定義
- 6.1. キーワード
- 6.1.1. left
- 6.1.2. center
- 6.1.3. right
- 6.1.4. top
- 6.1.5. middle
- 6.1.6. bottom
- 6.1.7. bold
- 6.1.8. italic
- 6.1.9. underline
- 6.1.10. extra
- 6.1.11. data
- 6.1.12. draw
- 6.1.13. font
- 6.1.14. para
- 6.1.15. wrap
- 6.1.16. no-wrap
- 6.1.17. font-size
- 6.1.18. font-color
- 6.1.19. font-name
- 6.1.20. react
- 6.1.21. loose
- 6.1.22. all-over
- 6.1.23. hidden
- 6.1.24. disabled
- 6.1.25. select
- 6.1.26. focus
- 6.1.27. hint
- 6.1.28. rate
- 6.1.29. default
- 6.2. データ型
- 6.3. アクター
- 6.1. キーワード
- 7. パネル
- 8. スタイリング
VIDはVisual Interface Dialectの略です。VIDはRedの ビュー エンジンのトッププレイヤーに位置する、グラフィックユーザーインターフェイスを構築するためのシンプルなダイアレクト（DSL）です。
VIDでは表示するそれぞれのグラフィックコンポーネントについて、以下のような方法を選択することができます。
-
水平方向・垂直方向のフロー配置
-
グリッドによる位置指定
-
絶対座標による位置指定
VIDは自動的にコンテナフェイスを作成し、指定されたフェイスを格納します。デフォルトでは、コンテナフェイスのタイプは window です。
VIDコードは layout 関数により処理されます（layoutは内部的には view 関数を呼び出します）。VIDコードはその後、直接表示するのに適したフェイスのツリーにコンパイルされます。
|
Note
|
VIDブロックをどう処理するかを確認するには、Redのコンソールで help view と help layout を実行してください。
|
典型的なVIDのコードブロックは以下の構造になります。
[
<コンテナ設定>
<レイアウト指定>
]
-
コンテナ設定: コンテナオブジェクト（パネルまたはウィンドウ）に影響する設定
-
レイアウト指定: レイアウト配置コマンド、スタイル定義およびフェイスの指定
|
Note
|
全てのセクションはオプショナルです。VIDブロックに必須となるコンテンツはありません。 |
|
Note
|
react キーワードはコンテナ設定レベルでもフェイスオプションレベルでも使用できます。reactの説明については こちら を参照してください。
|
size <value> <value> : ピクセル単位の幅と高さ（pair!）
説明
コンテナフェイスの高さをセットします。サイズが明示的に指定されていない場合、コンテナサイズはコンテンツによって自動計算されます。
デフォルトでは、VIDはコンテナ内のフェイスを以下のシンプルなルールに従って配置します。
-
方向は水平または垂直になります
-
フェイスは現在の方向、スペースの設定に従って順番に配置されます
デフォルト値は以下です。
-
開始位置：
10x10 -
スペース：
10x10 -
方向：
across -
アラインメント：
top
方向が across モードの場合、フェイスは以下のように配置されます。
方向が below モード（かつデフォルトの left アラインメントを使用）の場合、フェイスは以下のように配置されます。
across <alignment> <alignment> : （省略可能）使用可能な値： top | middle | bottom
説明
レイアウト方向を左から右の水平方向へセットします。1行の中でのフェイスのアラインメントをデフォルト（top）から変更するため、alignment修飾子を指定することもできます。
below <alignment> <alignment> : （省略可能）使用可能な値： left | center | right
説明
レイアウト方向を上から下の垂直方向にセットします。1列の中でのフェイスのアラインメントをデフォルト（left）から変更するため、alignment修飾子を指定することもできます。
return <alignment> <alignment> : （省略可能）使用可能な値： left | center | right | top | middle | bottom
説明
レイアウト方向の指定に従い、現在位置をフェイスの次の行または列に移動します。現在のフェイスのアラインメントを変更するためにalignment修飾子を指定することもできます。
space <offset> <offset> : 新しいスペース量の値（pair!）
説明
新しいスペース量のオフセット値をセットします。以降のフェイスの配置時に、指定の量のスペースが開けられます。
origin <offset> <offset> : 新しい開始位置の値（pair!）
説明
新しい開始位置の値をセットします。これはコンテナフェイスからの相対位置になります。
at <offset> <offset> : 次のフェイスの位置（pair!）
説明
次のフェイスの位置を絶対座標で指定します。配置モードは次のフェイスにだけ影響し、レイアウトフローの位置は変更しません。そのため、後続2つ目以降のフェイスは、レイアウトフローの1つ前のフェイスに続いて配置されていきます。
pad <offset> <offset> : 相対オフセット（pair!）
説明
相対指定のオフセットによって現在位置を変更します。後続の同じ行（または列）の全てのフェイスが影響を受けます。
ビューエンジンは多くのビルトインウィジェットを提供していますが、VIDダイアレクトは関連付けられたキーワードによって、ウィジェットのよく使われるスタイルを拡張しています。それらは対応するフェイスタイプと同じオプションで使用できます。また、 style コマンドを使って自由に再定義することも可能です。
フェイスは存在しているフェイスタイプの名前または使用可能なスタイル名を使用して、レイアウト中の現在位置に挿入することができます。
<name>: <type> <options> <name> : （省略可能）新しいコンポーネントの名称（set-word!） <type> : 有効なフェイスタイプまたはスタイル名（word!） <options> : （省略可能）オプションのリスト
もしnameが指定された場合、そのフェイス定義でVIDによって作成された face! オブジェクトをそのwordで参照可能になります。
それぞれのフェイス、スタイルに対してデフォルト値が提供されます。そのため新しいフェイスはオプションの指定なしでも使用できます。オプションが必要になる場合、以下のセクションで説明している異なる型や使用可能なオプションを使用します。
-
キーワード
-
データ型
-
アクター
全てのオプションはフェイスまたはスタイルの名称の後に、任意の順番で指定することができます。新しいフェイスまたはレイアウトキーワードは与えられたフェイスのオプションリストの終わりを示します。
|
Note
|
window はフェイスタイプとして使うことはできません。
|
data <list> <list> : アイテムのリスト（block!）
説明
フェイスの data ファセットに値のリストをセットします。リストのフォーマットはフェイスのタイプにより異なります。
draw <commands> <commands> : コマンドのリスト（block!）
説明
フェイスの draw ファセットにDrawダイアレクトコマンドのリストをセットします。有効なコマンドについては Drawダイアレクト ドキュメントを参照してください。
font <spec> <spec> : 有効なフォント指定（block! object! word!）
説明
フェイスの font ファセットに新しい font! オブジェクトをセットします。font!オブジェクトは こちら で説明しています。
|
Note
|
他のフォントに関する設定に対して font を使用することが可能です。VIDはそれらをマージし、最後に指定されたものを優先して使用します。
|
para <spec> <spec> : 有効なparaの指定（block! object! word!）
説明
フェイスの para ファセットに新しい para! オブジェクトをセットします。para!オブジェクトは こちら で説明しています。
|
Note
|
他のparaに関する設定に対して para を使用することが可能です。VIDはそれらをマージし、最後に指定されたものを優先して使用します。
|
font-size <pt> <pt> : フォントサイズ（ポイント単位）（integer! word!）
説明
フェイスのテキストの現在のフォントサイズをセットします。
font-color <value> <value> : フォントの色（tuple! word! issue!）
説明
フェイスのテキストの現在の色をセットします。
font-name <name> <name> : 利用可能なフォントの有効な名称（string! word!）
説明
フェイスのテキストの現在のフォント名をセットします。
このキーワードはフェイスのオプションとしてもグローバルコンテキストのキーワードとしても使用できます。任意の数の react インスタンスを使用できます。
react [<body>] react later [<body>] <body> : 通常のRedのコード（block!）
説明
ボディブロックから新しいリアクターを生成します。 react がフェイスオプションとして使われた場合、ボディブロックにおいて face というwordを使うことで現在のフェイスを参照できます。 react がグローバルコンテキストで使用された場合、対象のフェイスは名前を使ってアクセスする必要があります。オプションの later キーワードを使用すると、 body ブロックが処理された直後の最初のリアクションの発生をスキップできます。
NOTE:
リアクターはViewの中でリアクティブプログラミングをサポートする仕組みの一部ですが、ドキュメントはペンディングされています。一言で言えば、ボディブロックはパスを使用して、フェイスのプロパティ間に１つ以上のリレーションを表現します。フェイスのプロパティに対するset-pathはリアクターの ターゲット（アップデートされるフェイス）として処理され、フェイスプロパティにアクセスするパスはリアクターの ソース （ソースに対する変更はリアクターのコードのリフレッシュを発生させます）として処理されます。
6.1.23. hidden
hidden
説明
デフォルトでは、フェイスを非表示にします。
select <index> <index> : 選択されたアイテムのインデックス（integer!）
説明
現在のフェイスの 選択された ファセットをセットします。主にリストにおいてどのアイテムが最初に選択されているかを指定するために使われます。
focus
説明
ウィンドウが最初に表示された時に現在のフェイスにフォーカスさせます。フォーカスを持てるのは１つのフェイスだけです。もし focus オプションが異なるフェイスに複数回指定されている場合、最後のフェイスがフォーカスを取ります。
hint <message> <message> : hint text (string!).
説明
field フェイスの中身が空の場合のヒントメッセージを提供します。新しいコンテンツが指定された場合ユーザーアクションによってか、 face/text ファセットを設定した場合）、ヒントメッセージは表示されなくなります。
rate <value> rate <value> now <value>: 遅延時間または頻度（integer! time!）
説明
遅延時間（time!）または頻度（integer!）を指定することでタイマーをセットします。タイマーが進むたび、そのフェイスの time イベントが発生します。もし now オプションが使用された場合、初回のtimeイベントが即座に発生します。
キーワードに加え、以下のデータ型のリテラル値をフェイスの設定値として渡すことができます。
| データ型 | 目的 |
|---|---|
integer! |
フェイスの幅の指定。パネルの場合、現在の方向に応じて、レイアウトする行または列の数を示します。 |
pair! |
フェイスの幅と高さを指定します。 |
tuple! |
フェイスの背景色（利用可能な場合）を指定します。 |
issue! |
16進数記法を用いてフェイスの背景色を指定します（#rgb, #rrggbb, #rrggbbaa） |
string! |
フェイスに表示するテキストを指定します。 |
percent! |
|
logic! |
|
image! |
フェイスの背景に表示されるイメージ（利用可能な場合）を指定します |
url! |
URLで指定されたリソースをロードし、ロードされた型に応じてリソースを処理します。 |
block! |
フェイスのデフォルトイベントに対するアクションをセットします。パネルの場合、中身の指定になります。 |
get-word! |
アクターとして存在している関数を使用します。 |
char! |
（将来のために予約されています） |
アクターはリテラルブロック値かブロック値によって結び付けられるアクターの名前を元にフェイスの変更をフックすることができます。
<actor> on-<event> <actor> <actor> : アクターのボディブロックまたはアクターの参照（block! get-word!） <event> : 有効なイベント名（word!）
説明
アクターのボティブロックだけを提供することで、スペックブロックを暗黙的に取扱、アクターを指定するという簡潔な方法もあります。アクター関数はフェイスの actor ファセットに追加されます。この方法で複数のアクターを指定することもできます。
生成されたアクター関数の完全なスペックは以下のようになります。
func [face [object!] event [event! none!]][...body...]
イベント名の有効なリストは こちら で見つかります。
アクター名の指定がなくブロックやget-wordが渡された場合、そのフェイスタイプのデフォルトのアクターが こちら の定義に従って生成されます。
フェイスをグルーピングしてスタイルをまとめて適用するために、子パネルを定義することが可能です。新しいパネルのサイズは、明示的に指定されていない場合、中身に合うように自動計算されます。
Viewのパネルクラスフェイス型は以下に記載のシンタックスでVIDにおいてもサポートされます。
panel <options> [<content>] <options> : パネルのオプション設定のリスト <content> : パネルの中身となるVID記載（block!）
説明
現在のコンテナ内に子パネルを構築します。中身はVIDブロックの内容になります。フェイスオプションの他に、整数値のディバイダーオプションを指定できます。これはグリッドモードのレイアウトを以下のように設定します。
-
方向がacrossの場合、ディバイダーは列数を表します。
-
方向がbelowの場合、ディバイダーは行数を表します。
group-box <divider> <options> [<body>] <divider> : オプションの行または列数（integer!） <options> : パネルのオプション設定のリスト <body> : パネルの中身となるVIDの記載（block!）
説明
現在のコンテナ内に子グループボックスパネルを生成します。中身はVIDブロックの内容になります。ディバイダー引数も指定でき、グリッドモードのレイアウトを以下のように設定します。
-
方向がacrossの場合、ディバイダーは列数を表します。
-
方向がbelowの場合、ディバイダーは行数を表します。
|
Note
|
オプションとしてstring!値を渡すと、グループボックスのタイトルテキストにセットされます。 |
style <new> <old> <options> <new> : 新しいスタイルの名前（set-word!） <old> : 古いスタイルの名前（word!） <options> : 新しいスタイルに対するオプションの設定リスト
説明
現在のパネル内の新しいスタイルをセットします。新しいスタイルはすでに存在するフェイスか他のスタイルをもとに生成されます。新しいスタイルは現在のパネルと子パネルの中でのみ有効です。
スタイルは親パネルから子パネルに伝播します。したがって同じ名前のスタイルが定義されると、親パネルの定義には影響せずに子パネル上においてのみ上書きまたは拡張されます。