| 要約： | - テキストをグラフィック階層内に表示するのに使用します。
- グラフィカル コンテナに追加される、書式設定されたまたは設定されていないテキストを自動的に収めるボックスとしてよく作成されます。
|
TextFlowBox を使用して、グラフィック階層内にテキストを表示します。グラフィカル コンテナに追加される、書式設定されたあるいは設定されていないテキストを自動的に収めるボックスとしてよく作成されます。各種サブクラス間の相違点を考慮せずに
TextFlowBox クラスを直接使用することもできます。ただし、使用目的に応じて次のサブクラスのいずれかを直接使用することができます。
TextFlowBox および
BasicTextFlowBox クラスは抽象クラスなので、オブジェクトをこれらのタイプで作成することはできません。ただし、次のような表現を使用できます。
{TextFlowBox "some text or other"}
これにより、サブタイプが
DefaultTextFlowBox である
TextFlowBox が作成され、全般的な目的で使用されます。Inspector で結果として生成されたグラフィック階層を表示する場合にのみ、特定のクラス名を参照できます。Inspector の使用方法については、IDEドキュメンテーションを参照してください。
サブクラス
CastTextFlowBox は、名前を呼び出さずに頻繁に使用する
TextFlowBox の別の種類です。このクラスは、低いオーバーヘッドの単純な
TextFlowBox を作成するために設計されており、オブジェクトは通常自動的に作成されます。次のセクション「
TextFlowBox への自動変換」で説明するように、文字列または
text 式を非テキスト タイプのグラフィカル コンテナに追加するたびにこのオブジェクトが作成されてテキストを保持します。
テキスト特有の関連オプションが多数あります。文字や段落に設定する各種オプションの一覧および説明については、「
テキストの書式設定」の章を参照してください。次に、もう 1 つの重要なオプションを示します。
次の例では、2 つの
TextFlowBox を
HBox 内に配置しています。margin オプションの設定で起こる外観上の相違を示しています。いずれの
TextFlowBox にも
width オプションのみ設定されています。高さは、ボックス内のテキストの量と指定された上下のマージンによって決定されます。
| 例:
TextFlowBox の使用 |
 |
{spaced-hbox
|| This TextFlowBox does not have margin settings
{TextFlowBox background={Color.from-string "#9099ff"},
width=2in,
{text First text fragment.},
{paragraph
Second text fragment. Quite a bit
longer than the first. May wrap.},
"Text in quotes. Here, text is expressed " &
"as two concatenated Strings."
},
|| This TextFlowBox has margin settings
{TextFlowBox background={Color.from-string "#9099ff"},
width=2in,
|| Make the text unselectable
text-selectable?=false,
|| Margin settings
text-top-margin=0.25in,
text-left-margin=0.25in,
text-right-margin=0.25in,
text-bottom-margin=0.25in,
{paragraph First text fragment.},
{paragraph
Second text fragment. Quite bit
longer than the first. May wrap.},
"Text in quotes. Here, text is expressed " &
"as two concatenated Strings."
}
}
| |
この例では、テキスト書式を設定して作成したテキスト オブジェクトは
TextFlowBox のグラフィカル コンテナの子として暗黙的に追加されています。これは非グラフィカル オブジェクトをグラフィック階層に追加する方法の 1 つです。このような特別の場合については次のセクションで説明します。
グラフィック階層にオブジェクトを追加するときに、追加するオブジェクトの親オブジェクトが選択されます。親オブジェクトのタイプにより、追加されるオブジェクトのタイプが決定します。グラフィカルな親の場合、最小の必要条件として、追加するオブジェクトもグラフィカル オブジェクトである必要があります。
ただし、非
Graphic オブジェクトがグラフィック階層に追加される前に自動的にタイプ変換を実行して、
Graphic オブジェクトに追加できる場合があります。
| 例:
TextFlowBox への自動変換 |
 |
{HBox background="pink",
height=1.5cm,
{RectangleGraphic width=1cm,
height=1cm,
fill-color="green"},
{text Text in an HBox}
}
| |
Inspector を使用して次のようにグラフィック階層内のオブジェクトを調べることもできます。
- CTRL キーを押したままピンク色の HBox の “HBox のテキスト” を右クリックし、コンテキストメニューからグラフィック階層を選んでください。
- グラフィック階層ウィンドウで、親アイコンを選択します。
前述の例では、グラフィカル コンテナ内の各子は、変数名が子または親に使用されるかどうかにかかわらず、コンテナを初期化する式内に直接リストされています。
次の例のように
Visual.add メソッドを使用して、コンテナを作成した後に子をコンテナに追加することもできます。
たとえば、次の例で示すいずれかのテクニックを使用して、
HBox を
VBox に追加できます。
| 例:
Visual.add メソッドの使用 |
 |
{let v:VBox={VBox width=3cm,
height=2cm,
background="yellow"},
h:HBox={HBox width=2cm,
height=1cm,
background="purple"}}
{spaced-hbox
|| This expression mirrors the graphic hierarchy:
{VBox width=3cm,
height=2cm,
background="yellow",
{HBox width=2cm,
height=1cm,
background="purple"}
},
|| Use variables and invoke add on VBox
|| to produce the same layout.
{value
{v.add h}
v
}
}
| |
add メソッドを暗黙的に呼び出して右側の柴色の
HBox を黄色の
VBox に挿入します。
add メソッドは、抽象クラス
Visual から継承されており、各サブクラスはそれを独自の方法で実装しています。コンテナではないグラフィカル クラスは、それ自体にオブジェクトを追加しません。各グラフィカル コンテナは、それ自体に追加できるオブジェクトのタイプを定義します。追加するオブジェクトが適切なタイプでなく、適切なタイプにキャストされる場合は、グラフィック階層に追加される前に適切なタイプに自動的にキャストされます。
前述したように、
Visual.add メソッドではグラフィカル オブジェクトを追加する必要があります。書式設定された、または設定されていないテキストなどの非グラフィカル オブジェクトを
Canvas などのクラスに追加する場合は、
Canvas.add メソッドはこの非グラフィカル オブジェクトを グラフィック階層に追加する前に
Graphic に強制変換します。
add メソッドは、変換前 (変換が行われる場合) のオブジェクトではなく、追加したオブジェクトを返します。ここで、グラフィック階層に追加されたオブジェクトは、
add メソッドの引数として指定されたオブジェクトではないことに留意してください。セクション「
その他のシーケンス ボックス」に例示しているように、後でグラフィック階層のオブジェクトにアクセスする必要があるからです。
次の例で、オブジェクトは
Canvas.add を呼び出して
Canvas に追加されます。特定のスタックの順序を指定するのに引数は一切使用されていません。したがって、追加する最初のオブジェクトはスタックの下部に配置されます。スタックの機能の詳細については、「
その他のシーケンスボックス」のセクションを参照してください。次に、追加されるオブジェクトを表示順に示します。
- text ：対応する値は、Words です。
- text ：対応する値は、Big Words です。
- CommandButton ：ラベルは "Press Me!" です。
- VBox ：コンテンツには、"abcdefg" および "ABCDEFG" が含まれます。
| 例:
Canvas にオブジェクトを追加 |
 |
{value
let c:Canvas =
{Canvas background="lime",
width=10cm,
height=5cm}
{c.add {text font-weight="bold",
Words},
x=1.5cm, y=2cm}
{c.add {text font-weight="bold",
font-size=48pt,
color="blue",
Big Words},
x=2cm, y=2.5cm}
{c.add {CommandButton label="Press me!"},
x=6.5cm, y=1.75cm}
{c.add {VBox background="yellow",
"abcdefg",
"ABCDEFG"},
x=5cm, y=2cm}
c
}
| |
Copyright © 1998-2023 SCSK Corporation.
All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation.
that are registered in the United States. Surge
Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE)
logo are trademarks of SCSK Corporation.