SHOEISHA iD

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

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

Curl GUI入門(PR)

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

第1回

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

テキストと非テキストの動作

 整列を考える場合、テキストと非テキストとは動作が異なります。テキストが表示される場合、そのテキストは「TextFlowBox」の内部にラップされて配置されます。

 TextFlowBoxは、オブジェクトを垂直方向に伸長または圧縮することはありませんが、常にテキストをコンテナの境界に合わせて伸長しますので、テキストが自動改行される場合があります。HBox-EX1.curlの実行結果で、文字列が改行されているのが、その例です。

 TextFlowBoxのcompress-orderは、他のほとんどのグラフィカルオブジェクトよりも高いので、幅に制限があるときにminimum-sizeに圧縮されるオブジェクトになります。非テキストの場合は、グラフィカルオブジェクトそのものや、そのオブジェクトを入れるコンテナの設定に依存します。

 それでは、text-width-displayというヘルパープロシージャを使って簡単な例を作って、比較してみましょう。text-width-displayは、ページが表示されるときに、パラメータで渡されたテキストのレイアウトに使用された幅を基準とし、Graphicを伸長または配置するためのプロシージャです。

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

|| Window幅がめいっぱい使われます
{text-width-display
    {HBox background={LinearGradientFillPattern
                         {Fraction2d 0.0, 0.0},
                         {Fraction2d 1.0, 0.0},
                         {Spectrum.from-endpoints
                             "#346E50",
                             "white"
                         }
                     },
        {bold color="white", Thank you for using Curl},
        {Fill},  || Windowの幅になるように伸張
        {link href={url "http://www.q-tec.com/"}, QaliTech, Inc.}
    }
}
Fill-EX2.curl
Fill-EX2.curl
Fill-EX2.curl
{curl 5.0, 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}

||  VBoxの影響を受けて、ここのtext-width-displayは効力を発揮しない。
|| text-width-displayを取ってしまっても同じです。
{text-width-display
  {VBox
    {HBox background={LinearGradientFillPattern
                         {Fraction2d 0.0, 0.0},
                         {Fraction2d 1.0, 0.0},
                         {Spectrum.from-endpoints
                             "#346E50",
                             "white"
                         }
                     },
        {bold color="white", Thank you for using Curl},
        {Fill},  || VBoxの幅が未指定なので、その幅が最小になるように縮まる
        {link href={url "http://www.q-tec.com/"}, QaliTech, Inc.}
    },
    {CommandButton label="Push me!"}
  }
}
Fill-EX3-1.curl
Fill-EX3-1.curl
Fill-EX3-1.curl
{curl 5.0, 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}

{text-width-display
  {VBox
    {HBox background={LinearGradientFillPattern
                         {Fraction2d 0.0, 0.0},
                         {Fraction2d 1.0, 0.0},
                         {Spectrum.from-endpoints
                             "#346E50",
                             "white"
                         }
                     },
        {bold color="white", Thank you for using Curl},
        {Fill} ,   || 下の(1)で決定された幅に合わせて伸張
        {link href={url "http://www.q-tec.com/"}, QaliTech, Inc.}
    },
    || VBoxの幅は未指定であので、Windowの幅まで伸張---(1)
    {CommandButton width={add-stretch}, label="Push me!"}
  }
}

|| CommandButton ではなく、一番外側のVBox に width={add-stretch}, を
|| 指定した場合との違いを見てみましょう。
Fill-EX3-2.curl:CommandButtonのラベルの表示位置が異なる
Fill-EX3-2.curl:CommandButtonのラベルの表示位置が異なる
Fill-EX3-2.curl
{curl 5.0, 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}

{text-width-display
  {VBox hstretch?=true,
    {HBox background={LinearGradientFillPattern
                         {Fraction2d 0.0, 0.0},
                         {Fraction2d 1.0, 0.0},
                         {Spectrum.from-endpoints
                             "#346E50",
                             "white"
                         }
                     },
        {bold color="white", Thank you for using Curl},
        {Fill} ,
        {link href={url "http://www.q-tec.com/"}, QaliTech, Inc.}
    },
    {CommandButton label="Push me!"}
  }
}

次のページ
ストレッチですっきり

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

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

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング