日本でハリウッドVFXを制作! 「経産省アイディアボックス」 結果:  
●まとめエントリはこちら ●FAQ ●お問い合わせは左のメールフォームから

2010年1月5日火曜日

レイアウト・コマンド(1)

前回の「その他のコントロール(3):ラジオボタン(radioButton)」の中で9つのラジオボタンをもったウインドウを作りましたが、すべてのラジオボタンが縦一列に並んでいました。

それは「columnLayout」のみを使用しているからですが、もっと見やすく整理するには、「columnLayout」以外のレイアウト・コマンドを組み合わせて使う必要があります。


----------------------------------------
(1)rowLayout

まずラジオボタンを横に並べてみます。
rowLayout」コマンドは、コントロールを横一列に並べるレイアウトコマンドです。
{
window name;
columnLayout;

radioCollection;

rowLayout;

radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;

button -label "print";

showWindow;
}

しかし、これではエラーになります
// Error: Too many children in layout: rowLayout1 //

rowLayoutでは「-numberOfChildren」にて子供(コントロール)数を指定する必要があります。

-numberOfChildren」フラグ無しでは、コントロールが二つ以上あると上記のエラーになります。
(ちなみにradioCollectionはレイアウトがないとエラーになりますが、たとえばrowLayoutより下にあってもこの数には含まれないようです。グループの概念を扱う物で、GUIとして目に見えるコントロールではないためででしょう。)

さて、この場合「rowLayout」コマンドの後に続くコントロールの数はbuttonも含めて10です。
-numberOfColumns で10を設定してみます。
{
window name;
columnLayout;

radioCollection;

rowLayout -numberOfColumns 10;

radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;

button -label "print";

showWindow;
}

これですべてのコントロールが横一列に並びますが、ボタンも並んでしまっています。
これでは使いにくいのでボタンだけでも下に並べることにします。


----------------------------------------
(2)入れ子構造

レイアウトを複数組み合わせて使う場合、
各レイアウトコマンドの影響範囲を考える必要があります。
そのとき、「入れ子」構造について知っておく必要があります。

「入れ子」とは、「ネスティング(Wikipedia)」とも呼ばれ、
重箱や、マトリョーシカ人形など、「同様の形状の大きさの異なる容器などを順に中に入れたもの」のことです。
コンピュータ用語の「入れ子(Wikipedia)」は、そこからきており、
制御構造や関数、データ構造など何らかの構造が別の構造を取り囲むこと」を指します。
for文などを入れ子構造にすることもありますし、フォルダの構造も入れ子構造と言えます。

上記のスクリプトの例では、「columnLayout」の中に、「rowLayout」がありその中に「ラジオボタン」と「ボタン」いう部品が入っています。

文字で書くとわかりにくいのですが、構造図や実際のウインドウ表示を見ると一目瞭然です。
以下のホームページでは図入りで解説していますのでわかりやすいと思います。
ほへほへ2さんのHP「2:GUIの基本
DigitalMatrix「レイアウト1 ( rowLayout )
GUI Layouts in MEL
MEL UI Layouts


要点としては、以下の事に注意しておくべきかと思います。
●親は子グループの中身には影響しないが、子グループ自体には影響を与える。
(例)ウインドウのフォルダにおいて、あるフォルダ「A」(親)内のサブフォルダ(子グループ)を別のフォルダ「B」へ移動することはできるが、そのサブフォルダ(子グループ)内のファイルには影響しない。

●子グループの中身を変更しても、親グループには影響しない。
(例)上記のサブフォルダ内のファイルを削除したり追加したり、さらに別のサブフォルダを追加しても、親グループには影響がない。


上記のスクリプトでは、columnLayout(親)の中に、rowLayout(子グループ)が入っています。
columnLayout(親)はrowLayout(子グループ)に影響しますが、その中身(コントロールの配置)には影響しません。

「ラジオボタンだけを横に並べて、ボタンをその下に縦に並べる」ためには、最後の「ボタン」は「columnLayout」のレイアウト規則に従うようにするのが簡単です。

部品である「コントロール」は、「rowLayout」配下では、「columnLayout」の影響はうけません。
「rowLayout」構造の外にでて、親である「columnLayout」直下に入る必要があります。

これを実現するのが
setParentコマンドです。


----------------------------------------
(3)setParent
setParentは、現在の入れ子レベルから一つ上、もしくは最上階のレベルへ移動するときに使います。
レイアウトコマンドを複数使うと、
後に使われたレイアウトコマンドは、その前のレイアウトコマンドの子になります。
なので、子のレイアウトを抜け出すには、setParetnを使う必要があります。

setParent」を使うときは、以下のフラグを組み合わせて使います。
-upLevel(-u):一つ上の階層に移動。これは「..」でも代用できます。
-topLevel(-top):最上階のレベルへ移動。「/」でも代用できます
(ちなみに「..」、「/」はコマンドプロンプトやシェルのCDコマンドでも同様の働きをします)

主に使うのは-upLevelのほうだと思います。

上記のスクリプトでは、radioButtonコマンドの後、buttonコマンドの前に使う必要があります。
{
window name;
columnLayout;

radioCollection;

rowLayout -numberOfColumns 10;

radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;

setParent ..;
button -label "print";

showWindow;
}

これにより「rowLayout」コマンドに従うのは、
「rowLayout」から「setParent ..」までの間にあるコントロールだけです。
「rowLayout」は、その中身をグループとしてくくるので、
「rowLayout」と「button」は縦に並びます。
これで、ラジオボタンを横一列にして、ボタンをその下に持ってくることが出来ました。


----------------------------------------
(4)rowColumnLayout

このままでは、ラジオボタンが横一列に広がっているので、まだ使いにくいです。
ラジオボタンを2行とか3行にするとまとまるので、もっと使いやすくなるでしょう。
rowColumnLayout」コマンドは、コントロールを縦横に並べます。

ここで、使用するフラグは以下の二つのどちらかになります。
-numberOfColumns(-nc) :縦(列)の数 (横方向の項目の数を限定)
-numberOfRows(-nr) :横(行)数 (縦方向の項目の数を限定)

Columns数を限定すれば横方向へ広がるボタンの数を限定できます。
-numberOfColumns 2にすればボタンは二列に並び
-numberOfColumns 3にすればボタンは参列に並ぶといった具合です。

{
window name;
columnLayout;

radioCollection;

rowColumnLayout -numberOfColumns 2;

radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;
radioButton;

setParent ..;
button -label "print";

showWindow;
}


これで思ったようにラジオボタンを配置することが出来ました。

他にもレイアウトコマンドはたくさんありますが、今のところこれぐらいにしておきます。
 

0 件のコメント:

コメントを投稿