GUI部品について思うことをメモ形式で述べたいと思います。

• リストとコンボとリストから選択
  
• メモとエディタとラベル
• GUI部品をきれいにならべたい。
• GUI部品をきれいにならべたい。2
• GUI部品をきれいにならべたい。3
• イベントを呼ばれるタイミングと部品=XXで設定できる項目
  
  
  
• リストとコンボとリストから選択
  
  この三つって使うタイミングが良く似てますよね。
  どう使い分けているかというと、
  
  • ダイアログを出したいときは、リストから選択。
    
  • 選ぶ項目がものすごく多いとき、また、プログラム利用者が項目数を変化させられるときにはリスト。
    
  • スペースがたりなかったり、選択する項目が増える可能性のないときにはコンボ。
    
  こう並べていくと、リストは選択ダイアログで言うところの「どれか選択」に似ていてコンボはリストから選択に似ているのかも。
  なんだか変な感じ。
  リストよりコンボのほうがスマートかなって思っちゃうのは自分が素人だからなんでしょうなぁ。
  
  
  
• メモとエディタとラベル
  
  私の中でこれらはひとつのものとして扱われています。
  水と氷と水蒸気のように、あるいは出世魚のように状況によって名前が変わったものである、という認識です。
  この場合の状況とは何かと申しますと、ずばり、自由度です。
  メモ＞エディタ＞ラベルの順で自由度が高いんですね。
  
  • メモはほとんどなんでもあり。
    
  • エディタは改行ができないけど、それ以外の入力はできる。
    
  • ラベルは表示のみ。改行はできる。
    
  と、すると「その、変更は、オフ。」なエディタやメモの存在意義がないように思われますがその二つにもちゃんとあるんです。
  エディタで実験してみましょう。
  

  母艦の、幅は、200。
  母艦の、高さは、200。
  母艦を、中央に移動。
  表示ラベルを、ラベルとして、作成。
  表示エディタを、エディタとして、作成。
  実験ボタンを、ボタンとして、作成。
  その、イベントは、(
  「表示させたい文を書いてね。」と、尋ねる。
  表示ラベルは、それ。
  表示エディタは、それ。)
  待機。

  早速実験ボタンを押して文を入力しましょう。
  何でも良いので、まず3文字。
  どちらも大して変わりません。
  こんどはIMEをオンにして、15文字。
  何を言わんとしているか、わかっていただけたと思います。
  わからなかった人はソースのコメントを見てね。
  
  
  
• GUI部品をきれいにならべたい。
  
  GUI部品をきれいにならべるには部品の幅、高さを熟知してなくてはなりません。
  ver.1.33から、右側、下側という因数を使えるようになりましたが、これを使うと見た目があまりよろしくありません。
  なぜなら、部品の画像に微妙な影や白い隙間(?)があるからです。
  と、言うわけで、メモしておきます。
  
  

  部品名	幅	高さ	コメント
  母艦	可	可	母艦の位置はデスクトップの左上を原点(0,0)として指定します。
  ボタン	可	可	フォントの高さよりもボタンの高さが低いとはみ出してしまうので注意。
  エディタ	可	可	改行できないのであまり高くしすぎるとみっともないです。フォントの高さよりもボタンの高さが低いとはみ出してしまうので注意。
  イメージ	可	可	画像などを指定しないと、どこにあるのか見えません。
  バー	可	可	あまり細くすると使いづらいです。せめて、4以上に。
  コンボ	可	不可	高さはフォントサイズによります。幅が狭いとアイテム名が読めないので注意。
  リスト	可	可	あまり幅が狭いとアイテム名が読めなくなるので注意。
  メモ	可	可	スクロールバーは、縦。で、右端で折り返す仕様になります。
  グリッド	可	可
  ラベル	不可	不可	幅、高さはテキストによります。指定するならテキストを設定した後に。
  チェック	可	可	背景色を指定すると高さがわかります。しかし改行できないので、フォントサイズにあわせるのがベター。
  トラック	可	可
  アニメ	可	可
  メニュー	不可	不可	メニュー作成をすると母艦の高さが19低くなります。
  ブラウザ	可	可	まだ設定項目が少ないです。
  パネル	可	可	パネルの上に「乗った」部品の状態をまとめて管理できます。ver.1.40〜
  フォーム	可	可	いわゆる窓。母艦と同じく位置の指定はデスクトップの左上が原点です。ver.1.40〜
  Tエディタ	可	可	メモのいろいろ設定できる版。htmlのタグの色を変えて表示したい場合などに使えます。ver.1.40〜

  
  また、基本的に、部品は(10,10)から配置されるので、デフォルトの状態で、

  メモ帳を、メモとして、作成。
  その、幅は、母艦の、幅。
  その、高さは、母艦の、高さ。

  とやってしまうと美しくないです。母艦いっぱいに部品をおきたいときは、必ず
  

  (0,0)に、移動。
  メモ帳を、メモとして、作成。
  その、幅は、母艦の、幅。
  その、高さは、母艦の、高さ。

  と、しましょう。
  
  
  
• GUI部品をきれいにならべたい。2
  
  まだ実験中ですが、裏技の計算式を載せちゃいます。
  実験中なので、わかると言うか、私がよく使う物だけ公開。
  目の良い方は部品をよ〜〜〜〜く見るとわかると思いますが、部品の影や光っているように見える部分は基本的にはウインドウ色や、非アクティブ色などの線なんです。(win98)
  で、この線一本の幅は1ピクセル。
  つまり何本線があるかによって、幅、高さが変わります。
  ところで、きれいに並べる基本はなんと言ってもラベルとエディタ。
  この二つを並べる機会って多いと思うのですがいかが？
  あーっっと、「表示」命令で文字を表示した隣にエディタを置く、と言った方がいいかな。
  この二つを頭の中の計算だけできれいに並べられるようになったらフォームデザイナはもういりません。
  …暴言でした。
  
  さて、早速並べてみましょう。
  

  ラベル一を、ラベルとして、作成。
  (ラベル一の、右側)に、エディタ一を、エディタとして、作成。
  

  先程も述べたとおり、美しくないですね。
  なんだかずれている気がします。
  これは文字が横に並んでないので違和感を感じるのだと思います。
  と言うわけでエディタを観察しましょう。
  線の数は…3つ。さらに上マージン?で2ピクセル使っています。
  3+2=5ピクセルあげるか下げるかすればいいわけです。
  さて、この場合どちらを基準にするかで少し悩むと思いますが、基準にするのは最初に作った部品にしましょう。その方が楽です。
  

  ラベル一を、ラベルとして、作成。
  (ラベル一の、右側)に、エディタ一を、エディタとして、作成。
  その、Yは、((ラベル一の、Y)-5)。

  いかがですか？
  だいぶきれいに並んだでしょう。
  
  ところで、ラベルってテキストによってサイズが変わる仕様なんですよね。
  いくつも縦に並べたときにXがまちまちなのでは格好悪いです。
  ここは思い切って「右側」を使用せずに「位置」を使用してみましょう。
  しかし一つ問題が。
  Xをいくつに設定したらよいのでしょうか。
  ここでようやく式の登場です。
  

  (基準部品のX)+(部品の幅)+(部品配置間隔)=部品の右側
  ラベルの幅=(フォントサイズ(ポイント×4/3)×バイト数(半角で何文字か))
  

  だいたいこんな感じの式でXを決めます。
  では、Yはどうなっているかというと、Xと同じく、
  

  (基準部品のY)+(部品の高さ)+(部品配置間隔)=部品の下側

  です。
  早速作成してみましょう。
  

  あを、ラベルとして、作成。
  ああを、ラベルとして、作成。
  あああを、ラベルとして、作成。
  あエディタを、エディタとして、作成。
  その、位置は、(70,((あの、Y)-5))※10*6+10=70
  ああエディタを、エディタとして、作成。
  その、位置は、(70,((ああの、Y)-5))
  あああエディタを、エディタとして、作成。
  その、位置は、(70,((あああの、Y)-5))
  

  …なんかキツキツです。
  これはラベルとエディタの幅が違うために起こる問題で部品配置間隔を多めにとることで解決します。
  再び式。
  

  高さの違う部品の部品配置間隔=高さの差+部品配置間隔

  高さの差は、たいてい、最初に調べた線の数*2です。
  これを利用すると以下のようになります。

  部品配置間隔は、20。
  あを、ラベルとして、作成。
  ああを、ラベルとして、作成。
  あああを、ラベルとして、作成。
  あエディタを、エディタとして、作成。
  その、位置は、(70,((あの、Y)-5))※10*6+10=70
  ああエディタを、エディタとして、作成。
  その、位置は、(70,((ああの、Y)-5))
  あああエディタを、エディタとして、作成。
  その、位置は、(70,((あああの、Y)-5))
  

  いかがですか？ちょっとした計算をするだけで部品をきれいに並べられることがわかっていただけたでしょうか。
  
  
  
• GUI部品をきれいにならべたい。3
  
  GUIをたくさん作るのはかなり面倒です。
  そこで反復命令で一気に部品を作ってみましょう。
  一気に部品を作る時は部品の名前を少し工夫して、「XXラベル」の様にするといろいろと楽です。
  反復命令は面倒くさがりな人には必要な命令。
  是非、マスターしましょう。

  「あ\nああ\nあああ」を、反復(
  「{それ}ラベルを、ラベルとして、作成。
  {それ}エディタを、エディタとして、作成。
  その、位置は、(70,(({それ}ラベルの、Y)-5))」を、ひまわりする。※10*6+10=70
  )

  すかすかだー。
  原因は分かりますか？
  「移動」命令で移動しないと部品は一つ前に作った部品の下側に配置されます。
  ラベルの下側に作ったエディタを作った後、指定した位置にエディタの見た目を移動します。
  移動しているのは見た目だけでおそらく内部では移動する前のエディタの位置の下側に次のラベルを作成しているのでこんなに間があくのです。多分。
  と、言うことはラベルにもYを指定すれば良いということです。
  では先ほどあげた部品の下側を求める式でラベルのYも指定してあげましょう。
  

  「あ\nああ\nあああ」を、反復(
  「{それ}ラベルを、ラベルとして、作成。
  その、Yは、(10+20*(回数-1)+10)※回数は1から始まるので1を引いて0から始まるようにする。
  {それ}エディタを、エディタとして、作成。
  その、位置は、(70,(({それ}ラベルの、Y)-5))」を、ひまわりする。※10*6+10=70
  )

  …なんかキツキツです。
  先ほどは部品配置間隔をいじることで解決しましたが、今回は手動で位置を決めているので使えません。
  部品の高さの差を、今度は部品の高さに足しましょう。
  つまり、(10+(20+10)*(回数-1)+10)とすればよいわけです。
  

  「あ\nああ\nあああ」を、反復(
  「{それ}ラベルを、ラベルとして、作成。
  その、Yは、(10+30*(回数-1)+10)※回数は1から始まるので1を引いて0から始まるようにする。
  {それ}エディタを、エディタとして、作成。
  その、位置は、(70,(({それ}ラベルの、Y)-5))」を、ひまわりする。※10*6+10=70
  )

  だいぶきれいになりました。
  しかし、この作り方では一つだけ、大きなミスがあります。
  それは、基準部品のY座標が間違っていると言うところ。
  この問題を回避するには分離するしかないのかなぁ。
  つまり、

  部品配置間隔は、20。
  「あ\nああ\nあああ」を、反復(「{それ}ラベルを、ラベルとして、作成。」を、ひまわりする。)
  「あ\nああ\nあああ」を、反復(
  「{それ}エディタを、エディタとして、作成。
  その、位置は、(75,(({それ}ラベルの、Y)-5))」を、ひまわりする。※10*6+10=70
  )

  とするしかないのかなぁ。
  もう少し考えておきます。
  
  
  
• イベントを呼ばれるタイミングと部品=XXで設定できる項目
  
  何をしたときにイベントが呼ばれるか、部品=XXで設定できる項目は何か、書いておきます。
  
  

  部品名	イベントを呼ばれるタイミング	部品=XX
  母艦	クリックした時	タイトル
  ボタン	クリックした時	テキスト
  エディタ	変更(編集)した時	テキスト
  イメージ	クリックした時	テキスト
  バー	バーの値が変わった時	値
  コンボ	アイテムを選択した時	値
  リスト	アイテムを選択した時	値
  メモ	不明	テキスト
  グリッド	不明	不明
  ラベル	クリックした時	テキスト
  チェック	チェックボックスまたはチェック項目をクリックした時	テキスト
  トラック	変更(移動またはサイズを変更)した時	不明
  アニメ	クリックした時	不明
  メニュー	クリックした時	テキスト
  ブラウザ	リンクをクリックした時	不明
  パネル	クリックした時	テキスト
  フォーム	不明	タイトル
  Tエディタ	変更(編集)した時	不明

  
  不明が多いですが、少しはお役に立ちますかしら。