レイアウト2

frameLayoutとtabLayout

ここでは frameLayoutによる絶対位置による自由なレイアウトとtabLayoutを使ったタブによるGUIの切替えをやってみよう。
formLayoutはウインドウの上下左右からの絶対位置や、他の部品からの相対位置によって配置することができる。
tabLayoutを実行すると、それ以降の部品・レイアウトはタブの一つ(タブグループ)になってゆく。

レイアウトの例

以下のMELスクリプトをlayout4.melという名前で作る。

$winName = `window -title "layout4" -widthHeight 200 200`;
string $form = `formLayout`;
$closeButton = `button -label "Close" -command "deleteUI $winName"`;
formLayout -edit
	-attachForm $closeButton "top"    130
	-attachForm $closeButton "left"   0
	-attachForm $closeButton "bottom" 0
	-attachForm $closeButton "right"  0
	$form;
string $tabs = `tabLayout -innerMarginWidth 10 -innerMarginHeight 10`;
formLayout -edit
	-attachForm $tabs "top"    0
	-attachForm $tabs "left"   0
	-attachControl $tabs "bottom" 10 $closeButton
	-attachForm $tabs "right"  0
	$form;
string $tab1 = `columnLayout`;
	button -label "A";
	button -label "B";
setParent ..;
string $tab2 = `columnLayout`;
	button -label "C";
	button -label "D";
setParent ..;
tabLayout -edit -tabLabel $tab1 "Tab1" -tabLabel $tab2 "Tab2" $tabs;
showWindow;

このMELスクリプトを読み込んで実行すると以下のウインドウが表示される。
(各ボタンにはコマンドを割り当てていないので押しても何も実行されない。)

[image of layout4.mel] [image of layout4.mel]
  1. $winName = `window -title "layout4" -widthHeight 200 200`; ウインドウをlayout4というタイトルで、縦横200ピクセルの大きさで作る。
  2. string $form = `formLayout`; formLayoutを作る。
  3. $closeButton = `button -label "Close" -command "deleteUI $winName"`; ウインドウをクローズするためのボタンを作る。
    tabLayoutの後で作るとタブのグループの一部になってしまうのでここで作っておく。
  4. formLayout -edit formLayout($form)をエディットモードによって編集する。
    -editとによってあらかじめ作っておいたformLayoutのパラメータを変更できる。
    (-editは他の多くのコマンドでも使用できる)
  5. -attachForm $closeButton "top" 130 ボタン($closeButton)の上辺はウインドウ上辺から130ピクセルの位置。
  6. -attachForm $closeButton "left" 0 ボタン($closeButton)の左辺はウインドウ左辺から0ピクセルの位置。
  7. -attachForm $closeButton "bottom" 0 ボタン($closeButton)の下辺はウインドウ下辺から0ピクセルの位置。
  8. -attachForm $closeButton "right" 0 ボタン($closeButton)の右辺はウインドウ右辺から0ピクセルの位置。
  9. $form; formLayoutの名前の入った変数。 formLayout -edit コマンドがここで終り。
  10. string $tabs = `tabLayout -innerMarginWidth 10 -innerMarginHeight 10`; tabLayoutを作る。
    -innerMarginWidth 10
    タブの内部に配置される部品の左右に置かれるマージン(10ピクセル)
    -innerMarginHeight 10
    タブの内部に配置される部品の上下に置かれるマージン(10ピクセル)
  11. formLayout -edit formLayout($form)をエディットモードによって編集する。
  12. -attachForm $tabs "top" 0 タブ($tab)の上辺はウインドウ上辺から0ピクセルの位置。
  13. -attachForm $tabs "left" 0 タブ($tab)の左辺はウインドウ左辺から0ピクセルの位置。
  14. -attachControl $tabs "bottom" 10 $closeButton タブ($tab)の下辺はボタン($closeButton)の上辺から10ピクセルの位置。
  15. -attachForm $tabs "right" 0 タブ($tab)の右辺はウインドウ右辺から0ピクセルの位置。
  16. $form; formLayout -edit コマンドがここで終り。
  17. string $tab1 = `columnLayout`; columnLayoutを作る。
    ここからsetParent ..までが一つ目のタブグループになる。
  18. button -label "A"; Aボタンを作る。
  19. button -label "B"; Bボタンを作る。
  20. setParent ..; ここまでが一つ目のcolumnLayoutの範囲。
  21. string $tab2 = `columnLayout`; columnLayoutを作る。
    ここからsetParent ..までが二つ目のタブグループになる。
  22. button -label "C"; Cボタンを作る。
  23. button -label "D"; Dボタンを作る。
  24. setParent ..; ここまでが二つ目のcolumnLayoutの範囲。
  25. tabLayout -edit -tabLabel $tab1 "Tab1" -tabLabel $tab2 "Tab2" $tabs; tabLayoutを編集モードにして一つ目のタブ($tab1)にTab1というラベルを、 二つ目のタブ($tab2)にTab2というラベルをつける。
  26. showWindow; windowを表示する。

練習

まとめ

参考


Prev | Next
Home | Contents
abe@injapan.net