レイアウト2 (FormLayoutとtabLayout)

FormLayoutとtabLayout

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

FormLayoutとtabLayout の使用例

FormLayoutによって tabLayout の部分と Close ボタンの部分を配置し、tabLayout によって A・B ボタンのあるタブと C・D ボタンのあるタブを切替えることができるようにしてみよう。

  1. 以下のMELスクリプトをlayout5.melという名前で作る。
    string $windowName = `window -title "layout5"`;
    string $form = `formLayout`;
    string $closeButton = `button -label "Close" -command "deleteUI $windowName"`;
    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;
    
  2. このMELスクリプトを読み込んで実行すると以下のウインドウが表示される。
    (各ボタンにはコマンドを割り当てていないので押しても何も実行されない。)
    [layout5.melの実行結果] [layout5.melの実行結果]

スクリプトの解説

string $windowName = `window -title "layout5"`;
ウインドウをlayout5というタイトルで作る。
string $form = `formLayout`;
formLayoutを作る。
string $closeButton = `button -label "Close" -command "deleteUI $windowName"`;
ウインドウをクローズするためのボタンを作る。
tabLayoutの後で作るとタブのグループの一部になってしまうのでここで作っておく。
formLayout -edit
formLayout($form)をエディットモードによって編集する。
-editによってあらかじめ作っておいたformLayoutのパラメータを変更できる。
(-editは他の多くのコマンドでも使用できる)
-attachForm $closeButton "top" 130
ボタン($closeButton)の上辺はウインドウ上辺から130ピクセルの位置。
-attachForm $closeButton "left" 0
ボタン($closeButton)の左辺はウインドウ左辺から0ピクセルの位置。
-attachForm $closeButton "bottom" 0
ボタン($closeButton)の下辺はウインドウ下辺から0ピクセルの位置。
-attachForm $closeButton "right" 0
ボタン($closeButton)の右辺はウインドウ右辺から0ピクセルの位置。
$form;
formLayoutの名前の入った変数。
formLayout -edit コマンドはここまでで終り。
string $tabs = `tabLayout -innerMarginWidth 10 -innerMarginHeight 10`;
tabLayoutを作る。
-innerMarginWidth 10
タブの内部に配置される部品の左右に置かれるマージン(10ピクセル)
-innerMarginHeight 10
タブの内部に配置される部品の上下に置かれるマージン(10ピクセル)
formLayout -edit
formLayout($form)をエディットモードによって編集する。
-attachForm $tabs "top" 0
タブ($tabs)の上辺はウインドウ上辺から0ピクセルの位置。
-attachForm $tabs "left" 0
タブ($tabs)の左辺はウインドウ左辺から0ピクセルの位置。
-attachControl $tabs "bottom" 10 $closeButton
タブ($tabs)の下辺はボタン($closeButton)の上辺から10ピクセルの位置。
-attachForm $tabs "right" 0
タブ($tabs)の右辺はウインドウ右辺から0ピクセルの位置。
$form;
formLayout -edit コマンドはここで終り。
string $tab1 = `columnLayout`;
columnLayoutを作る。
ここからsetParent ..までが一つ目のタブグループになる。
button -label "A";
Aボタンを作る。
button -label "B";
Bボタンを作る。
setParent ..;
ここまでが一つ目のcolumnLayoutの範囲。
string $tab2 = `columnLayout`;
columnLayoutを作る。
ここからsetParent ..までが二つ目のタブグループになる。
button -label "C";
Cボタンを作る。
button -label "D";
Dボタンを作る。
setParent ..;
ここまでが二つ目のcolumnLayoutの範囲。
tabLayout -edit -tabLabel $tab1 "Tab1" -tabLabel $tab2 "Tab2" $tabs;
tabLayoutを編集モードにして一つ目のタブ($tab1)にTab1というラベルを、 二つ目のタブ($tab2)にTab2というラベルをつける。
showWindow;
ウインドウを表示する。

練習

まとめ

参考


Prev | Next
Home | Contents
abe@injapan.net