22
 ウィジェットの属性指定 




 
 
おおまかな手順
 
 

 たとえばラベルに文字を指定するのに「テキストを設定」を使ってきましたが、このほかにもウィジェットの属性を指定する多くの手段があります。それらすべて「○○を設定」という単語名になっています。

フォントの設定はここではなく、フォント をご参照ください。

■属性設定の典型的な手順
 たとえば以下のようなものです。
       プログラム例:
○○とは
        ラベル1は ID

    メインウィンドウで ラベルのIDを取得し ラベル1に 入れ

    「こんにちは。」を ラベル1に テキストを設定し   
    赤色を       ラベル1に 文字の色を設定し  属性設定
    ・・・を      ラベル1に ・・・・を設定し   

    ラベル1を 有効化する
 上記のように、いくつかの属性設定をおこない、最後に「有効化」(または「有効化して配置」)をおこないます。

■後から属性を変更する
 一方、既に描画されているウィジェットの属性を後から変更した場合、既に「有効化」は終っているので別の単語「変更を反映」を使って反映させます。

構文=
<ウィジェットID>を 変更を反映 → ・
 後からの属性変更はイベント処理の中でおこなうことが多いでしょう。以下のプログラム例を参考にしてください。

       プログラム例: (後から属性を変更)
    赤色を ラベル1に 文字の色を設定し
    ラベル1を 変更を反映する
       プログラム例: color-change.src のイベント処理部 (実際に実行してみてください)
ボタン1記憶は ID。

ボタン1押下処理とは (パラメータ、・・、パラメータ数 → ・)
    イベント引数を捨て
    赤色を ボタン1記憶に 文字色を設定し
    黄色を ボタン1記憶に 背景色を設定し
    ボタン1記憶を 変更を反映する


 
 
属性の設定
 
 

 すべてのウィジェットは、表示テキスト、文字の色、背景色、フォント、大きさ、位置など、多くの属性を設定できます。

■テキストを設定

構文=
<文字列>を <ウィジェットID>に テキストを設定
 ボタンやラベルなど、文字を表示できるすべてのウィジェットに適用でき、ウィジェットの内部に指定文字列を表示させることができます。
 ボタンやラベルなど、多くのウィジェットでは、複数行に渡る文字列を表示できます。それには文字列の中に改行記号を記入します。
       プログラム例: (文字列定数の継続表記を使う場合)
    「これは1行目です。&改行&」続
    「これは2行目です。」を ラベル1に テキストを設定し
 上記のように、&改行& の直後でいったん定数を切って「続」を付与し(文字列定数の継続表記)、次の行に2行目を書くと、ソースコードが視覚上も2行になり(しかしコンパイラは最終的に1行扱い)プログラムの意図を把握しやすくなります。
 文字列定数の継続表記を使った実例として、after.src があります。
   ラベル1の文言は 文字列定数
           「・・・・&改行&」続
           「・・・・&改行&」続
というソース個所がありますが、表示上5行にわたる文言(コンパイラ扱いとしては1行の文字列定数)を上記のように記述しています。
記:
ウィジェットに設定されたテキストに改行コードを含む場合、GUIエンジンが必要とする改行コードは LF の1文字ですが、本処理単語が介入し、ソースコードの CR,LF の2文字を LF に置換しています。

■テキストを参照

構文=
<ウィジェットID>の テキストを参照 → 文字列
       プログラム例:
ボタン1の テキストを参照し ・・・・し
       サンプルプログラム:
"cget-text.src" を参照してください
 既に有効化されているウィジェットに設定されているテキストを参照します。(「テキストを設定」した値を参照することになります)
 参照した文字列はライブラリ内部の文字列実体変数(長さ=8KB)に格納された後、そこを指す文字列情報をスタックに返します。そのため得られた文字列を直ちに消費しないまま再度呼び出すると上書きされてしまうため、ユーザが用意した文字列実体変数に退避するなど工夫してください。
ウィジェットに設定されたテキストに改行コードを含む場合、GUIエンジンの改行コードは LF の1文字ですが本処理単語が介入し、Windows標準の CR,LF の連続2文字として返します。
本単語とよく似た「指定範囲のテキストを参照」という語もあります。そちらはテキストウィジェット専用です。混同しないよう注意してください。

■テキスト表示の縦横比率

構文=
<パーセント比率>を <ウィジェットID>に 縦横比率を設定 → ・
       プログラム例: message.src より抜粋(実際に起動してみてください)
    メインウィンドウで メッセージのIDを取得し メッセージ1に 入れ
    「これは長い長い長い長い長い長いテキストです」を
                     メッセージ1に テキストを設定し
    500%を メッセージ1に 縦横比率を設定し
       ↑%には意味が無い


 主にメッセージウィジェットで使う機能です。メッセージウィジェットは(ラベルウィジェットと違い)長いテキストを自動折り畳みして表示できます(意図的に改行することもできます)。折り畳み後にどのような縦横比率になるかの指定がこれになります。
 縦横比率は”縦に対する横の比率”であり、値が大きいほど横長になります。
 デフォルトの比率は150(%)ですが、200〜400ぐらいを指定すると横長の良い感じになるでしょう。
 ちなみに上のプログラム例にある「%」はMindコンパイラで無視されるのでプログラムとして意味はありません。「300%」と書いてもコンパイラは「300」として扱います。人が見て意味が分かりやすいので%を書くことをお勧めします。

■ウィジェット中の文字の揃え方

構文=
<揃え指定>を <ウィジェットID>に テキスト揃えを設定 → ・      揃え指定として以下のいずれかのシンボルを記述(文字列定数)         左揃え         中央揃え  (デフォルト)         右揃え
 次のいずれかでウィジェット内へのテキスト表示が複数行に渡ることがあります。
   ・ラベルウィジェットへの「テキストを設定」で改行コードを含む文字列を指定
   ・メッセージウィジェットへの「テキストを設定」で長い文字列を指定
   ・キャンバス中への「図形としてテキストのIDを取得」で長い文字列を指定
 いずれも長い文字列が折り畳まれて表示されますが、そのうち一番長い行よりも短い行を左右どちらに寄せるかを指定できます。デフォルトは「中央揃え」です。
       サンプルプログラム: label-justify


■ウィジェットに立体感を持たせる(立体感と縁(ふち)の幅の設定)

構文=
<立体感>を   <ウィジェットID>に 立体感を設定 → ・ <ピクセル数>を <ウィジェットID>に 縁の幅を設定 → ・      立体感として以下のいずれかのシンボルを記述(文字列定数)         平坦     (デフォルト)         出っ張り   (ボタンのデフォルト)         引っ込み         溝         土手         固形
 ウィジェットに立体感を付けます。デフォルトは「平坦」(立体感無し)ですが、ボタンに限りデフォルトが「出っ張り」です。
 「立体感を設定」だけでは立体感が弱い場合は「縁の幅を設定」も併用して縁を太くすると強調されます。
       サンプルプログラム: "button-relief" および "label-relief"


ボタンに各種立体感を
付けた例


ラベルに各種立体感を
付けた例


■ウィジェットのサイズの指定

構文=
<Xサイズ>と <Yサイズ>を        <ウィジェットID>に ウィジェットのサイズを設定 → ・ <Xサイズ>を        <ウィジェットID>に ウィジェットの幅を設定   → ・ <Yサイズ>を        <ウィジェットID>に ウィジェットの高さを設定  → ・     サイズの単位:       ラベル、メッセージなど文字を表示する目的のウィジェットは       文字数単位ですが、イメージを含む場合はピクセル単位です。       フレームもまたピクセル単位です。

       サンプルプログラム:
widgetsize.src
1つ目のラベルでは文字単位でサイズを指定していますが
2つ目のラベルはイメージを含むためピクセル数になります。
 ウィジェットの大きさは、そこに含む文字、イメージ、パディングなどを考慮してGUIライブラリが自動的に決定しますが、これらを使うと大きさを明示できます。
 ウィジェット内に表示する文字列が長い場合(特にラベルウィジェットで)指定したウィジェットサイズを超えた文字列が切れてしまうことに注意が必要です。

■ウィジェットの文字色と背景色

構文=
<色指定>を <ウィジェットID>に 文字色を設定 → ・ <色指定>を <ウィジェットID>に 背景色を設定 → ・
 ウィジェット内に書かれる文字の色および背景色を指定します。
 <色指定>は文字列で、以下のいずれかの表記によります。
  1. 十六進文字列で指定
    "#c0a080" のようにRGBを十六進数で指定します。HTMLの色指定と同じです。透過指定はできません。

  2. 色シンボルで指定
    色を表す標準的なシンボルをMindの文字列として指定します。たとえば "red" あるいは「red」 で赤を示します。
    利用可能な全色のシンボルはTcl/Tkサイトの以下のURLでご確認ください。
    https://www.tcl.tk/man/tcl8.5/TkCmd/colors.html (別タブで開きます)

  3. Mind単語としての色シンボル
    よく使われる色については便宜のためMind単語としての色名を定義しています。ユーザ側プログラムででさらに日本語名を追加定義するのも良いでしょう。
         黒色は   文字列定数 「black」。      青色は   文字列定数 「blue」。      水色は   文字列定数 「LightBlue」。      濃い灰色は 文字列定数 「DarkGrey」。      灰色は   文字列定数 「gray」。      緑色は   文字列定数 「DarkGreen」。      薄い灰色は 文字列定数 「LightGray」。      紫色は   文字列定数 「Violet」。      赤紫色は  文字列定数 「VioletRed」。      赤色は   文字列定数 「red」。      白色は   文字列定数 「white」。      黄色は   文字列定数 「yellow」。      栗色は   文字列定数 「maroon」。   注:このままの単語名を記述します。     ”「黒色」を ・・”のような文字列表記にはしません
  色見本(色の見え方)として他社様のサイトではありますが、以下のWebページが参考になります。
     WEB色見本 原色大辞典 - HTMLカラーコード
     → https://www.colordic.org/ (別タブで開きます)

■イメージの埋め込み
下記で「イメージID」を扱っていますが、詳細は 「イメージ」−「イメージデータの生成」 にて改めて解説しますのでそちらを参照してください。

構文=
(ステップ1) <ファイル名>で イメージをロード → イメージID (ステップ2) <イメージID>を <ウィジェットID>に イメージを設定 → ・
       サンプルプログラム: image-photo.src
メインとは
        イメージファイル名は 文字列定数 "image\music-small.png"
        ラベル1は      ID

    メインウィンドウで ラベルのIDを取得し ラベル1に 入れ

    イメージファイル名を ラベル1に テキストを設定し

    イメージファイル名から イメージをロードし
               ラベル1に イメージを設定し

    左揃えで     ラベル1に 画像揃えを設定し
    10を      ラベル1に パディングの幅を設定し

    ラベル1を 有効化して配置する。
 ウィジェットにイメージを入れるには上記のように二段階の処理となります。
 最初に「イメージをロード」を実行するとイメージファイル内容がデコードされてメモリ内に格納され、IDが返されます。
 次に、そのイメージIDを使って「イメージを設定」とすることで、ウィジェットに対してイメージが埋め込まれます。


 イメージはラベルやボタンのほか、テキストウィジェットやキャンバスにも入れることができます。
 たとえばラベルに対して、イメージとテキストを合わせて入れることもできますが、イメージ単独であっても構いません。ボタンについても同様です。

       サンプルプログラム:
"image-photo.src" のソースを眺めたり実行してみてください

■イメージ埋め込みの位置揃え

構文=
<揃え指定>を <ウィジェットID>に 画像揃えを設定 → ・      揃え指定として以下のいずれかのシンボルを記述(文字列定数)         左揃え  (デフォルト)         中央揃え         右揃え
 たとえばラベルに文字とイメージ(またはビットマップ)を混ぜることができますがその際のイメージ配置を指定できます。デフォルトは左揃えなので、左側にイメージ、その右にテキストが入ります。

■ビットマップの埋め込み

構文=
<ビットマップ名>を <ウィジェットID>に ビットマップを設定 → ・
ビットマップ名は以下の文字列定数をお使いください。       ビットマップ・errorは    文字列定数 「error」。       ビットマップ・gray12は   文字列定数 「gray12」。 網掛け用       ビットマップ・gray25は   文字列定数 「gray25」。 網掛け用       ビットマップ・gray50は   文字列定数 「gray50」。 網掛け用       ビットマップ・gray75は   文字列定数 「gray75」。 網掛け用       ビットマップ・hourglassは  文字列定数 「hourglass」。       ビットマップ・infoは    文字列定数 「info」。       ビットマップ・questheadは  文字列定数 「questhead」。       ビットマップ・questionは  文字列定数 「question」。       ビットマップ・warningは   文字列定数 「warning」。
注:各ビットマップがどのような見え方になるかは、
  "image-bitmap-all.exe" を起動してご覧ください。
注:grayXX というビットマップは単独で使うのでなく
  テキストウィジェットなどで文字を網掛けにする目的で使われます。
 全てのビットマップ名をプログラムとして網羅したい場合は以下の配列をお使いください。
      ビットマップのシンボル配列は 文字列定数配列         「error」         「gray12」         「gray25」         「gray50」         「gray75」         「hourglass」         「info」         「questhead」         「question」         「warning」。
       プログラム例: image-bitmap.src
メインとは
        ラベル1は    ID

    メインウィンドウで ラベルのIDを取得し ラベル1に 入れ
    ビットマップ・infoを ラベル1に ビットマップを設定し
 「ビットマップ」と呼ばれるイメージ形式をイメージ埋め込みする場合は上記のようになります(注:通常のイメージとは扱いが異なります)。
 ビットマップは、小さなイメージを高速に扱うデータ形式です。小さいという意味ではWindowsでのアイコン形式と似ていますが、こちらはカラーは扱えずモノクロです。その代わり、ビットマップは背景が透明であるためビットマップを含むウィジェットに背景色を与えることでウィジェットになじみやすくなすます。
 ビットマップはラベルやボタンのほか、テキストウィジェットやキャンバスにも入れることができます。
 たとえばラベルに対して、ビットマップとテキストを合わせて入れることもできますが、ビットマップ単独であっても構いません。ボタンについても同様です。
 ビットマップ単独 (ダイアログでの利用例)
 (ビットマップとテキストは別のラベルを使っています)

 ビットマップ+テキスト
 (ビットマップとテキストは同じラベル内です)
 (両者に背景が入り込むので一体になって見えます)

 ビットマップをウィジェットに埋め込むサンプルとして "image-bitmap" を参考にしてください。実行すると分かりますが、ラベルの背景色がビットマップの背景に入り込むのでなじんでいます。(すべてのビットマップを一気に表示するサンプルは "image-bitmap-all.exe" です)
 ビットマップはモノクロ(背景色は可)で小さいという欠点はあるものの、標準ビットマップはライブラリ内蔵のデータなので別にファイルを用意しなくて良いほか、描画も速いという利点があります。本GUIライブラリのダイアログにおいてアンコン表示にビットマップを使っています。

■寄せを設定(文字の位置揃え)
 ウィジェットの中に描画する文字の位置を指定するものです。デフォルトでは上下左右の中央になっています。
配置でもこの処理単語が使えます。
配置の詳しい解説 参照

構文=
<寄せ指定>を <ウィジェットID>に 寄せを設定 → ・      寄せ指定:以下のいずれかの単語名を指定してください。         西寄せ         北西寄せ         北寄せ         北東寄せ         東寄せ         南東寄せ         南寄せ         南西寄せ         中央寄せ (デフォルトなので指定する必要はありません)

       プログラム例:
南西寄せを ラベル1に 寄せを設定する
       サンプルプログラム:
"anchor-widget.src" をご覧ください



■ウィジェットの有効/無効

構文=
<状態シンボル>を <ウィジェットID>に 状態を設定 → ・       状態シンボルは文字列のシンボルであり以下のいずれかを指定         通常状態    (文字列定数「normal」)         無効状態    (文字列定数「disabled」)
       プログラム例: disable-button.src より抜粋
    状態が 無効状態に 等しい文字列
        ならば 通常状態を
        さもなければ
            無効状態を
        つぎに
    ボタン2記憶に 状態を設定し
    ボタン2記憶を 変更を反映し


 たとえばボタンやメニューボタンなど操作すると何か動作が発生するものは、一時的に無効にできます。Mindの文字列定数のシンボル「無効状態」を指定すると無効となり、「通常状態」で元に戻ります。ウィジェットへの属性変更であるため引き続いて「変更を反映」を実行してください。

■ウィジェットの状態を参照

構文=
    <ウィジェットID>の 状態を参照 → 状態シンボル       状態シンボルは文字列のシンボルであり以下のいずれかが返される         通常状態    (文字列定数「normal」)         無効状態    (文字列定数「disabled」)
       サンプルプログラム:
"disable-button.src" を参照ください。
 前記「状態を設定」の関連語です。現在の状態を知ることができます。文字列が返されます。
 参照した文字列はライブラリ内部の文字列実体変数(長さ=20桁)に格納された後、そこを指す文字列情報をスタックに返します。もし得られた文字列をただちに消費しないまま再度呼び出すると上書きされてしまうため、ユーザが用意した文字列実体変数に退避するなど工夫してください。



以下の属性設定は 配置の詳しい解説 で解説します。
   パディング
   並べ方向を設定
   横に伸ばす
   縦に伸ばす
   縦横に伸ばす
   占有領域を拡張
   フレーム

フォント関連の属性設定は フォント で解説します。
ウィンドウ関連の属性設定は ウィンドウ操作 で解説します