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

{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

{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

{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

{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!"}
  }
}