SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Curl GUI入門(AD)

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

第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ストレッチですっきり

柔軟体操

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

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

VBox-EX2.curl
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
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
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オブジェクトを格納して周囲にスクロールバーを表示する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

藤原 誠(フジワラ マコト)

生まれ:1955年生まれ(未年) 。ソフトウエア業界にかれこれ30年以上在籍しております。  プラント等の制御系ソフトウェアからコンパイラの開発、Webアプリケーションまで、かなり色々やってきました。趣味:休日は、映画鑑賞、ゴルフ、日曜大工、バイクで近所を乗り回す事をしています。 映画は、夫婦共に好...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3201 2008/11/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング