グラフィカル コンテナ

要約：
  • Box クラスは、他のグラフィカル オブジェクトを含むことができるグラフィカル オブジェクトを表します。
  • Box の 3 つの主なサブクラスは SequenceBox、TextFlowBox および Frame です。
  • Box サブクラスには、他に OverlayBox、Canvas および Table があります。
ユーザー インターフェイスの作成時には通常は複数のオブジェクトが使用されます。オブジェクトによっては別のオブジェクト内に配置されているものもあります。例えば、ダイアログ ボックス内にチェック ボックスおよびテキスト フィールドを配置する場合が挙げられます。Curl® 言語では、コンテナが Box のサブクラスの場合にのみ他のオブジェクト内にグラフィカル オブジェクトを配置することができます。
Box クラスは、他のグラフィカル オブジェクトを含むことができるグラフィカル オブジェクトを表します。そのため Box オブジェクトは、グラフィカル コンテナと呼ばれます。グラフィック階層では、オブジェクトのグラフィカルな親はオブジェクトのコンテナになります。
Box は抽象基本クラスで、Graphic クラスを継承します。この章では、主な Box サブクラスおよびサブクラス間の基本的な相違点について説明します。さらに、ボックスの外側起点または側面を使用したグラフィカルな子の配置方法について説明します。
次の Box サブクラスをこの章で説明します。

Box クラスの概要

次に Scrollbar クラスとともに Box サブクラスのクラス階層を一部示します。Box は、Graphic のサブクラスであることに注意してください。
Graphic
∟ Box
∟ GetBoundsBox*
∟ BasicBox*
∟ SequenceBox
∟ OverlayBox
∟ HVBox*
∟ HBox
∟ VBox
∟ RasterBox
∟ Grid
∟ Table
∟ Canvas
∟ TextFlowBox
∟ BasicTextFlowBox*
∟ CastTextFlowBox*
∟ DefaultTextFlowBox
∟ BaseFrame*
∟ Frame
∟ ViewportBox
∟ ScrollBox
∟ Dialog
∟ RootFrame
∟ View
* のマークが付いたクラスは、通常直接には使用されません。ただし、『API リファレンス』の基本クラスおよび Curl デバッガの使用時にそれらのクラスを確認することができます。
Box の 3 つの主なサブクラスは SequenceBox、TextFlowBox および Frame です。 TextFlowBox には、テキスト処理用のグラフィック クラスが含まれます。SequenceBox のサブクラスに属するボックスは、他の任意数のグラフィカル オブジェクトを収めることができ、オブジェクトのグループのレイアウトを管理します。Frame で作成されたボックスおよびそのサブクラスは、単一のオブジェクトのみを含むことができ、グループのレイアウト以外の特別な目的に対応します。Frame タイプのオブジェクトにグラフィカル オブジェクトのグループを表示する必要がある場合は、最初にグループ内のオブジェクトを SequenceBox タイプの親に直属の子として追加すると、グループが子として表示されるようになります。
各種の Box サブクラスは、アプリケーションのさまざまな要求に答えます。たとえば、Table オブジェクトを選択してオブジェクトを表形式で配置したり、Canvas を選択して各種オブジェクトを任意の位置に表示できます。
Box サブクラスは、すべて適正な既定のレイアウトでグラフィカル オブジェクトを表示するように設計されています。特定の Box および他のグラフィカル オブジェクトの組み合わせを指定して、ボックス内やその周囲にグラフィカル オブジェクトを思い通りに配置することができます。ただし、グラフィカル オブジェクトの配置を調整するには、グラフィカル オブジェクト、特に Box の基本コンポーネントを理解する必要があります。詳細については、次のセクションで説明します。

オブジェクトの外側起点

「グラフィカル ユーザー インターフェイス」の章で説明したように、可視オブジェクトのすべてには表示属性を指定するためのオプションがあります。ただし、特にサイズを指定するオプションなどではオプション バインディングはあくまでもユーザー設定であり、そのため Curl 言語で実際にオブジェクトの表示に使用される値であるとは限りません。その理由は、グラフィック階層ごとにネゴシエーションが行なわれ、たとえばコンテナで設定された寸法が中のオブジェクトより小さいというようなオプション設定の競合が解消されるからです。
コンテナ内の兄弟オブジェクトの配置は次の要因に依存します。
多くのコンテナは、オブジェクトの外側起点を使用して子を配置し、相対的に子を並べます。外側起点は、グラフィカルな親が配列に使用する各グラフィカル オブジェクト上の一定の点です。グラフィカル オブジェクトの外側起点の相対的な位置、たとえば左上隅、中心などを指定することができます。
グラフィカル オブジェクトの各クラスには内側起点 (以下で説明) と呼ばれる特別な点もあります。これは、グラフィカルな親の操作時ではなく、オブジェクト自体が実行する動作に使用されます。これらの既定の起点は、クラスごとに異なります。オブジェクトの外側起点の既定位置にもなります。
外側起点と呼ばれるのは、外部での目的に使用される起点であるためです。すなわち、オブジェクトのグラフィカルな親が使用します。外側起点のみを使用して、コンテナ内のオブジェクトを配置することができます。

外側起点の指定

全グラフィカル オブジェクトの外側起点は、horigin および vorigin プロパティで定義されます。horigin は水平座標を表し、vorigin は垂直座標を表します。
オブジェクトに既定の外側起点を設定しない場合は、horigin および vorigin の値を "left" と "bottom" または "center" などの値の組み合わせで設定し、オブジェクトの境界ボックス、つまり表示範囲が収まる最小の長方形 (画面と整列) の隅や中心点などの位置を指定することができます。
horigin および vorigin を [0.0, 1.0] の範囲内の値に設定し、オブジェクト上の正確な点を設定できます。
オプション有効値説明
Graphic.horigin"origin"オブジェクトの内側起点は外側起点の水平座標に使用されます。
"left"オブジェクトの左端。
"center"オブジェクトの中心。
"right"オブジェクトの右端。
[0.0, 1.0] の範囲内の値オブジェクトの幅の一部として表されるオブジェクトの境界ボックスの左端からの距離。
Graphic.vorigin"origin"オブジェクトの内側起点は、外側起点の垂直座標に使用されます。
"top"オブジェクトの上端。
"center"オブジェクトの中心。
"bottom"オブジェクトの下部。
[0.0, 1.0] の範囲内の値オブジェクトの高さの一部として表されるオブジェクトの境界ボックスの上端からの距離。
次の図に、オブジェクトの境界ボックスの隅および中心点に、オブジェクトの外側起点のさまざまな位置を示します。
外側起点の位置を指定する数値のある網掛け領域をポインタで移動してみてください。
Outside origin location:
horigin="left", vorigin="top"
horigin="left", vorigin="center"
horigin="left", vorigin="bottom"
horigin="center", vorigin="top"
horigin="center", vorigin="center"
horigin="center", vorigin="bottom"
horigin="right", vorigin="top"
horigin="right", vorigin="center"
horigin="right", vorigin="bottom"

オブジェクトの内側起点

各グラフィカル オブジェクトには、内部の目的に使用される内側起点もあります。内側起点は、ほとんどのコンテナ オブジェクトにおける特別な役割として、グラフィカルな子の配置や配列で使用する対象点になります。
内側起点は、開発者が指定しない場合の外側起点の既定位置にもなります。オブジェクトの horigin または vorigin プロパティを値 "origin" に設定すると、内側起点の水平または垂直座標が外側起点の該当する座標に使用されます。

ボーダーとマージンの指定

各グラフィカル オブジェクトには、ボーダーおよびマージンがあります。コンテナのボーダーおよびマージンは、グラフィカルな子が表示される際にそのサイズや位置に反映されます。
horigin="left", vorigin="top" などのオブジェクトの端にある外側起点は、オブジェクトのボーダーの内端に配置されます。
次の例で、VBox を 2 つ示します。いずれもボーダーが 0.5cm で、グラフィカルな子としてテキストを持ちます。左側の VBox のマージンは 1cm です。

例: ボーダーとマージン
{VBox background={Color.from-string "#3377aa"},
    border-color="purple",
    border-width=0.5cm,
    margin=1.0cm,
    "VBox with border and margin"}
{VBox background={Color.from-string "#3377aa"},
    border-color="purple",
    border-width=0.5cm,
    "VBox with border and no margin"}
ボックスの幅または高さを指定しない場合は、ボックスはその中のオブジェクトが収まるように自動的にサイズ変更されます。ボーダーまたはマージンを追加すると、余地がある限り必要に応じて自動的に拡大されます。拡大する余地がない場合は、幅または高さに固定サイズを割り当てると、マージンおよびボーダーはボックス内のオブジェクトを強制的に圧縮またはクリップします。
実際の動作はコンテナのタイプおよびそのオブジェクト タイプに依存します。各オブジェクトのサイズはそれぞれ Elastic として表され、オブジェクトの許容できる最大および最小限度、さらに各サイズの相対的な伸長度、圧縮度を指定するオブジェクトのクラスです。これらの仕様は比較され、レイアウト ネゴシエーションと呼ばれるプロセスでコンテナおよびグラフィカルな子の最良のレイアウトが表示されます。レイアウト ネゴシエーションについては、エラスティックスとページ レイアウト の章の「レイアウト ネゴシエーション」で説明します。
次の例で、レイアウト ネゴシエーションで実現したバランスを図示します。これらの例では、コンテナは Table です。Table クラスでは、テーブル セルにその子が含まれます。各セルはオプション cell-margin で指定する距離により隣接セルから区切られます。既定で 1mm の値を取ります。

例: レイアウト ネゴシエーション
{spaced-hbox
    {Table columns=3, width=4cm, height=4cm, background="wheat",
        || ボーダーもマージンもない Table
        margin=0,
        {RectangleGraphic fill-color="purple"},
        {RectangleGraphic fill-color="green"},
        {RectangleGraphic fill-color="yellow"},
        {RectangleGraphic fill-color="blue"},
        {RectangleGraphic fill-color="orange"},
        {RectangleGraphic fill-color="cyan"},
        {RectangleGraphic fill-color="red"},
        {RectangleGraphic fill-color="beige"},
        {RectangleGraphic fill-color="pink"}
    },

    {Table columns=3, width=4cm, height=4cm, background="wheat",
        || ボーダーを持ち、マージンのない Table
        margin=0, border-color="black", border-width=0.5cm,
        {RectangleGraphic fill-color="purple"},
        {RectangleGraphic fill-color="green"},
        {RectangleGraphic fill-color="yellow"},
        {RectangleGraphic fill-color="blue"},
        {RectangleGraphic fill-color="orange"},
        {RectangleGraphic fill-color="cyan"},
        {RectangleGraphic fill-color="red"},
        {RectangleGraphic fill-color="beige"},
        {RectangleGraphic fill-color="pink"}
    },

    {Table columns=3, width=4cm, height=4cm, background="wheat",
        || ボーダーとマージンを持つ Table
        margin=0.25cm, border-color="black", border-width=0.5cm,
        || cell-margin の既定である 1mm を削除しています
        cell-margin=0mm,
        {RectangleGraphic fill-color="purple"},
        {RectangleGraphic fill-color="green"},
        {RectangleGraphic fill-color="yellow"},
        {RectangleGraphic fill-color="blue"},
        {RectangleGraphic fill-color="orange"},
        {RectangleGraphic fill-color="cyan"},
        {RectangleGraphic fill-color="red"},
        {RectangleGraphic fill-color="beige"},
        {RectangleGraphic fill-color="pink"}
    }
} ||HBox
Table のクラスの詳細については「テーブル」のセクションを参照してください。

ボーダーの指定

Graphic.border-width および Graphic.margin オプションでは、 四角形オブジェクトの全側面のボーダーとマージンの幅を同一に設定することができます。 Graphic.border-spec オプションでは、 BorderSpec を使って、各側面のボーダーとマージンに異なる幅を設定することができます。 BorderSpec で設定されない値は Graphic で設定される border-width と margin が使用されます。これは、別々のグラフィックスを使用すると、同一の BorderSpec から異なる結果が生成されることを意味します。
以下の例では、 bspec と呼ばれる BorderSpec を定義し、 それを二つの異なる Frame グラフィックスで使用します。 BorderSpec は上端および右端のボーダーそして左端と下端のマージンを設定します。 Frame f1 は、 border-width と margin の値を指定しないため、 bspec は規定値 0pt を使用します。 Frame f2 は、bspec が使用できるよう border-width と margin を 0.25cm に設定します。

例: BorderSpec の使用
{let bspec:BorderSpec = 
    {BorderSpec
        top-border-width = 0.5cm,
        right-border-width = 0.5cm,
        left-margin = 0.5cm,
        bottom-margin = 0.5cm
    }
}
{let f1:Frame = 
    {Frame
        border-color = "red",
        border-spec = bspec,
        {Frame 
            width = 1cm, 
            height = 1cm,
            background = "orange"
        }
    }
}
{let f2:Frame = 
    {Frame
        border-color = "red",
        border-width = 0.25cm,
        margin = 0.25cm,
        border-spec = bspec,
        {Frame 
            width = 1cm, 
            height = 1cm,
            background = "orange"
        }
    }
}
{spaced-hbox
    background = "wheat",
    f1,
    f2
}

外側マージンの指定

Graphic.margin または Graphic.border-spec のマージン コンポーネントによって指定されたマージンは、オブジェクトの境界ボックス内部のスペースを埋めます。Graphic.outside-margin オプションを OffsetSpec に設定して、オブジェクトの境界ボックスの外側マージンを指定することができます。外側マージンで、レイアウト内のオブジェクト間の間隔を制御できます。四角形の各辺に異なる幅の外側マージンを指定することが可能です。
次の例では、外側マージンを使用して、VBox にコマンド ボタンを配置します。この方法は単にボックスにスペースを追加するだけでは不可能です。

例: コマンド ボタンのグループ化
{let oms-top:OffsetSpec =
    {OffsetSpec 
        left = 10px, right = 10px, 
        top = 10px, bottom = 1px
    }
}
{let oms-bottom:OffsetSpec =
    {OffsetSpec 
        left = 10px, right = 10px, 
        top = 1px, bottom = 10px
    }
}
{VBox
    border-width = 1px,
    {CommandButton
        outside-margin = oms-top
    },
    {CommandButton
        outside-margin = oms-bottom
    },    
    {CommandButton
        outside-margin = oms-top
    },
    {CommandButton
        outside-margin = oms-bottom
    }
}

ドロップ シャドウの指定

ローカル オプションの Graphic.shadow-spec で、ドロップ シャドウを指定することができます。shadow-spec の値は ShadowSpec でなければなりません。既定の ShadowSpec は、次の例で示されるような、標準的なドロップ シャドウを定義します。

例: ドロップ シャドウの既定の外観
{Frame
    height = 2cm, width = 3cm,
    {CommandButton
        shadow-spec = {ShadowSpec}
    }
}
ドロップ シャドウは、半透明性のレンダリングを使い、その独特で滑らかなエッジを実現しているので、ドロップ シャドウを効果的に表示するには高品質のレンダリングを使用しなければなりません。高品質のレンダリングの詳細については、「グラフィック オブジェクトのレンダリング」を参照してください。今お読みになっているこのドキュメントのビューアは高品質のレンダリングを使用して実行されている Curl のアプレットなので、ドロップ シャドウを使用しているすべての例題は正しくレンダリングされています。
次に示す ShadowSpec のプロパティは影の位置と外観を制御します。
次の例では、これらのプロパティの値を変更した結果を示します。Graphic.shadow-spec のための API ドキュメントで提供されている例で、これらのプロパティの効果を動的に調べることができます。

例: ドロップ シャドウ プロパティの変更
{Frame
    height = 2cm, width = 3cm,
    {CommandButton
        shadow-spec = 
            {ShadowSpec
                offset = 12px,
                angle = 315deg,
                corner-radius = 0,
                falloff = 1
            }
    }
}
非ローカルオプションの shadow-color も、影に影響を与えます。既定の色は、不透明性の値が 0.23 の黒です。次の例では、影を付けたオブジェクトを含む Frame に shadow-color を設定した結果を示しています。

例: 影の色の変更
{Frame
    height = 2cm, width = 3cm,
    shadow-color = {FillPattern.from-rgb .7, 0, 0, opacity = 0.175},
    {CommandButton
        shadow-spec = {ShadowSpec offset = 12px}
    }
}
Graphic.clip-child-shadows? プロパティは、コンテナが子オブジェクトの影がその境界ボックスの外側でレンダリングすることを許可するかどうかを決定します。Canvas のようないくつかのクラスは、このプロパティを true に設定して、影をコンテナの外側に付けないようにします。Box のような他のクラスは false に設定して影をコンテナの外側につけるようにします。getter Graphic.clip-child-shadows? で、コンテナが子の影をクリップするかどうかをプログラムによって決定することができます。
例のコードの出力の表示に割り当てられた領域は、次の例で示すように、この影をクリップしているコンテナです。

例: 子の影のクリップ
{CommandButton
    shadow-spec = {ShadowSpec offset = 12px}
}
Curl のオブジェクトの多く、特にコンテナは、既定の background が Background.transparent に設定されています。多くの場合、この設定は望ましいもので、コンテナがコンテンツを画像表示に追加することなく簡単に整理することができます。背景が透明なオブジェクトにドロップ シャドウを追加すると、意図した結果にならない場合があります。次の例では、背景が透明な Frame にドロップ シャドウを追加した結果を示します。例では Frame.border-width を 1 ピクセル に設定しているので、どこに影があるかを見ることができます。

例: 透明なオブジェクト上のドロップ シャドウ
{Frame
    height = 2cm, width = 3cm,
    {Frame
||--            background = "white",
        halign = "center", valign = "center",
        border-width = 1px,
        height = 1cm, width = 2cm,
        shadow-spec = {ShadowSpec offset = 12px}
    }
}
ドロップ シャドウのあるオブジェクトには不透明な背景を設定する必要があります。背景が不透明なフレームを見るには、この行からコメントをはずして例を実行してください。 
background = "white",
ドロップ シャドウに覆われる領域は、オブジェクトの境界ボックスによって決定されます。たとえば、これは RadioButtonは、境界ボックスの大きさと形の影を投げかけ、境界ボックスはボタンとそのラベルを格納し、任意の指定された高さと幅に影響を受けるということを意味しています。この領域のほとんどの背景は透明なので、ドロップ シャドウを使ってよりよい外観にするためには、ラジオ ボタンの背景を設定する必要があります。次の例では、ドロップ シャドウのある RadioFrame と RadioButton を示します。次のコードを使用して、Dialog の色を調和させるよう、影をつけたオブジェクトの背景を設定します。
background = {Dialog}.background

例: 
{let dialog:Dialog =
    {Dialog
        {RadioFrame
            outside-margin = {OffsetSpec 10px},
            width = 3cm,
            background = {Dialog}.background,
            shadow-spec = {ShadowSpec}, 
            {VBox
                {bold Select one:},
                {RadioButton
                    width = {make-elastic},
                    outside-margin = {OffsetSpec 10px},
                    background = {Dialog}.background,
                    shadow-spec = {ShadowSpec}, 
                    label =  "Sign me up"
                },
                {RadioButton
                    width = {make-elastic},
                    outside-margin = {OffsetSpec 10px},
                    background = {Dialog}.background,
                    shadow-spec = {ShadowSpec}, 
                    label = "No thanks", value = true
                }
            }
        }
    }
}
{CommandButton
    label = "open dialog",
    {on Action do
        {dialog.show}
    }
}

シーケンス ボックス

SequenceBox は、Box (TextFlowBox および Frame とともに) の 3 つの主なサブクラスのひとつです。SequenceBox を使用して、複数の子を収めることができる全ボックスの共通のメソッドを収集します。
SequenceBox タイプのオブジェクトは作成できません。そのサブクラスの HBox、VBox、OverlayBox、Canvas、Grid または Table などから 1 つのオブジェクトのみ作成することができます。
SequenceBox の全タイプには、任意数のグラフィック タイプの子を含むことができます。それぞれの SequenceBox ではグラフィカルな子の配置順序が記録されていますが、子の表示方法はボックスのタイプに依存します。HBox は、グラフィカルな子を左から右へ順に配置し、VBox は、グラフィカルな子を上から下へ順に配置します。OverlayBox, Canvas および Grid は、 最後に追加した子がその前に配置された子の全体または一部を非表示にするように子をスタックします。

水平ボックスと垂直ボックス

通常、最もよく使用される種類の SequenceBox は HBox と VBox の 2 つです。これらのクラスはコンテンツをそれぞれ水平または垂直に配置するコンテナの作成に使用されます。HBox は、子を最後に追加した兄弟の右側に配置して、1 つずつ追加します。VBox は、子を最後に追加した兄弟の下に配置して、1 つずつ追加します。
HBox および VBox では、兄弟間のオーバーラップが起こりません。単一の水平行または垂直列に収まるようにコンテナがコンテンツを圧縮する場合もあります。
ローカル オプションの spacing を HBox または VBox に使用して、ボックスのオブジェクト間の距離を指定することができます。既定値は 0 になります。

HBox

HBox のみに適用されるローカル オプションを次に示します。
次に、RectangleGraphic、EllipseGraphic およびグラフィカルな子としてテキストを含む HBox の例を示します。

例: コンテナとしての HBox
{HBox
    || valign の値を他の有効な値に変更します
    valign="center",
    || 子グラフィック間の spacing を変更します
    spacing=2pt,
    {RectangleGraphic width=2cm, height=1cm},
    {EllipseGraphic width=1cm, height=0.65cm, fill-color="green"},
    {text font-size=6pt, color="red", red dwarf}
}
次の例で、ショートカット プロシージャ spaced-hbox ({HBox spacing=3.5pt,...} と等しい) で作成される HBox 上の height および vstretch? オプションの使用方法を示します。

例: HBox の height および vstretch? オプション
{HBox
    spacing = 3.5pt,
    valign = "top",
    height=2.5cm,
    vstretch?=true,
    {RectangleGraphic width=2cm, height=1cm},
    {EllipseGraphic width=1cm, height=0.65cm, fill-color="green"},
    {text font-size=6pt, color="red", red dwarf}
}

VBox

VBox のみに適用されるオプションを次に示します。

例: VBox の halign および spacing オプション
{VBox
    || halign を他の有効な値に変更します
    halign="left",
    || 子グラフィック間の spacing を変更します
    spacing=2pt,
    {RectangleGraphic width=2cm, height=1cm},
    {EllipseGraphic width=1cm, height=0.65cm, fill-color="green"},
    {text font-size=6pt, color="red", red dwarf}
}

spaced-hbox および spaced-vbox

spacing を 3.5pt に設定して HBox および VBox を作成するショートカットプロシージャは次のとおりです。
次の例で、この 2 つのショートカットの使用方法を示します。 この例の黄色い 2 つのボックスは、spacing オプションのみが異なることに注意してください。

例: HBox, VBox およびそれらのプロシージャ
{spaced-hbox
    {VBox background="yellow",
        {EllipseGraphic height=1cm, width=1cm, fill-color="red"},
        {RectangleGraphic height=1cm, width=1cm, fill-color="green"},
        {text A first line of text.},
        {text A second line of text.}
    },
    {spaced-vbox background="yellow",
        {EllipseGraphic height=1cm, width=1cm, fill-color="red"},
        {RectangleGraphic height=1cm, width=1cm, fill-color="green"},
        {text A first line of text.},
        {text A second line of text.}
    }
}

ラスター ボックス

RasterBox はグラフィカルな子をオーバーラップせずに、左から右へ水平方向に配置する点で HBox とほぼ同じです。ただし、子が有効な幅の範囲に収まらない場合は、テキストを複数の行に折り返して表示するように、RasterBox は追加の行に子を折り返して配置します。HBox の場合は常に子を単一行に表示し、ユーザー設定のフォームに表示するための幅がない場合は子を圧縮します。
他のグラフィカル コンテナと同様に、RasterBox のグラフィカルな子の配列 (外側起点を使用) を好まない場合は、子の外側起点を変更することができます。すなわち、vorigin オプションを "bottom"、horigin を "left" のように、値にそれぞれ統一して設定します。
次の例で、幅が 5in のコンテナに配置されている HBox と RasterBox を示します。いずれのボックスにも同じコンテンツが含まれています。HBox にある配列と伸長のオプションが RasterBox にはないことに注意してください。

例: RasterBox の使用
{spaced-vbox
    width=5in,
    || HBox の子オブジェクトは圧縮されますが、次のラインをラップしません。
    {HBox
        background="wheat",
        {text color="red", Shorter},
        {EllipseGraphic fill-color="gray", width=2cm, height=0.5cm},
        {text This is a rather long text fragment.},
        {text color="cyan", Other text},
        {VBox width=1in,
            height=0.25in,
            background="blue"},
        "3",
        {RectangleGraphic fill-color="pink", width=0.5in, height=0.25in}
    },

    || RasterBox はその子オブジェクトを圧縮しません
    || しかし必要に応じて連続するラインを引き継ぎます
    {RasterBox
        background="wheat",
        {text color="red", Shorter},
        {EllipseGraphic fill-color="gray", width=2cm, height=0.5cm},
        {text This is a rather long text fragment.},
        {text color="cyan", Other text},
        {VBox width=1in,
            height=0.25in,
            background="blue"},
        "3",
        {RectangleGraphic fill-color="pink", width=0.5in, height=0.25in}
    }
}
Copyright © 1998-2008 Sumisho Computer Systems Corp. All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of Sumisho Computer Systems Corp. 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 Sumisho Computer Systems Corp.