Curlでグラフィック　まずは基本の箱詰めから

第1回

ストレッチですっきり

柔軟体操

　私たち人間も十分にストレッチをすることで柔軟な動きが可能となるように、Curlでもストレッチは箱を並べてVisualオブジェクトを柔軟に整列させるために非常に大切です。画面デザイン上の凸凹をすっきりそろえるためにも、ストレッチは必要になります。それでは、VBox-EX1の凸凹をすっきりさせてみましょう。

　すでに、「テキストと非テキストの動作」の例題に載っているので閃いた方もいらっしゃると思いますが、　VBox-EX1のCommandButtonとCheckButtonに「width=[add-stretch}」を追加してみます。

VBox-EX2.curl

VBox-EX2.curl

{curl 5.0, 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
{value
    {VBox
        {CommandButton label="----- CommandButton1 -----", width={add-stretch}},
        {text color="blue", textは文字の表示のプロシージャです。簡単に文字を表示できます。},
        {CheckButton label="Check1", width={add-stretch}}
    }
}

　1番長いオブジェクトであったテキスト文字列の長さに、別な2つのオブジェクトの長さがそろいました。見た目もすっきりしました。　と言っても、CheckButtonの方は、伸張された結果が目で見て分かりません。ラベルの延長線上をクリックして、チェックマークが付くかで判断してください（次の例では、分かりやすい様に色を付けてみます）。

　add-stretchプロシージャは、width（heightに指定することもできます）に伸張性を追加するプロシージャで、Elasticのサブクラスのオブジェクトを返します。

　実は、add-stretchと同じような動きを、VBox側のオプションを指定することで実現することも可能です。それが、hstretch?オプションで「VBox-EX3」のように指定します。ここで「同じような動き」と言ったのは、CommandButtonのlabelの位置が変化するからです。

　hstretch?=trueと同じlabel位置にするには、VBox-EX2のwidthを「width={add-stretch before?=true, after?=false}」とする必要があります。before?、after?オプションについては、Curlのヘルプに詳しく載っていますので見てください。

　この他にElasticオブジェクトを明示的に指定することで、サイズの調整をコードによって制御することが可能となります。Elasticオブジェクトは、make-elasticプロシージャを呼び出して作成します。make-elasticプロシージャに関しても、Curlのヘルプを参考にしてください。

VBox-EX3.curl

VBox-EX3.curl

{curl 5.0, 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
{value
    {VBox   hstretch?=true,  ||hstretch?オプション
        {CommandButton label="----- CommandButton1 -----"},
        {text color="blue", textは文字の表示のプロシージャです。簡単に文字を表示できます。},
        {CheckButton label="Check1", background="cyan"}
    }
}

圧縮と伸張

　アプレットを作成する際、一般に入れ子になったグラフィカルオブジェクトを使います。ほとんどの場合、GUI Toolkitでは適切なレイアウト処理が自動実行されます。つまり、グラフィカルオブジェクトはその親オブジェクトおよび兄弟オブジェクトを基準にして、適切に伸長または圧縮されます。

　伸長や圧縮が適切でない場合、子オブジェクトが切り詰められ、スクロールバーが表示されることがあります。既に説明しましたが、TextFlowBoxの場合は、テキストが自動改行される場合があります。

　VBox-EX3の画面の右下端をつかんで、縮めてみましょう。ボタンのオブジェクトの幅は縮小され、真ん中の文字列は自動的に改行されます。

HBoxの変形のRasterBox

　HBoxがGraphicオブジェクトの集合を水平方向の1行に配置するのに対して、Graphicオブジェクトの集合を水平方向に配置し、必要に応じて行の折り返しを行うのがRasterBoxです。

　RasterBox-EX1のRasterBoxをHBoxに変更してみて、動きの違いを見てください。

RasterBox-EX1.curl

RasterBox-EX1.curl

{curl 5.0, 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
{RasterBox width=3.5cm, background="lightgray",
    "ここはRasterBoxの中です。",
    {RegularPolygonGraphic sides=3, width = 1cm, height = 1cm},
    {RegularPolygonGraphic sides=4, width = 2cm, height = 1cm},
    {RegularPolygonGraphic sides=6, width = 1cm, height = 1cm}
}

おまけ

　あまりに地味すぎて、おもしろみがなかったと思われる方が多いかもしれませんので、ちょっとだけ動きがあるコンテンツの例を載せます。変数VBにVBoxのオブジェクト（インスタンス）を入れておき、そのVBoxの高さをCommandButton2を押下したときに変化させることで、VBox（とその中のオブジェクト）を表示したり消したりするものです。 何かのヒントになれば幸いです。

Omake-EX1.curl

{curl 5.0, 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}

{let VB:VBox = 
        {VBox   height=3cm, border-width=2pt, hstretch?=true, 
            {CommandButton label="----- CommandButton1 -----"},
            {text color="blue", textは文字の表示のプロシージャです。簡単に文字を表示できます。},
            {CheckButton label="Check1", background="cyan"}
        }
}
{value
    {VBox
        VB,
        {CommandButton label= "CommandButton2", 
            {on Action do
                {if VB.height == 0cm then
                    set VB.height = 3cm
                 else
                    set VB.height = 0cm
                }
            }
        }
    }
}

おわりに

　今回はこれで終わりですが、そのほかの代表的なコンテナとしては下記のものがあります。ぜひ利用してみてください。

• OverlayBox…Graphicオブジェクトの集合を相互に重ね合わせて配置する
• Grid…指定された揃え方でGraphicオブジェクトを配置する
• Table…Graphicオブジェクトの集合を行と列に整理して配置する
• View…Curlのグラフィックコンテンツを含むウインドウ
• ScrollBox…Graphicオブジェクトを格納して周囲にスクロールバーを表示する