今回はMorphicの大きな特徴ともいえるサブモーフについて学ぶ。
サブモーフとは、モーフの中に別のモーフを埋め込むことで、これにより様々なモーフを関連づけてリッチな表現を生み出すことが可能になる。
ここでは2つのモーフa,bを例にとって説明する。
モーフaは青色で横200px、縦100pxの長方形のモーフ、モーフbは赤色で縦横20pxの正方形のモーフとすると、以下のようなコードで表現できる。
a := Morph new color: Color blue; extent: 200@100. b := Morph new color: Color red; extent: 20@20.
以下のコードで、この2つのモーフを画面に表示する。
a openInWorld. b openInWorld.
この2つのモーフをクリックするとマウスにくっついて動くが、それぞれは独立していて互いに何の関連もない。
この状態で以下のコードをDo itする。
コードを選択して右クリック後にDo itを選ぶことを、今後は単に「Do itする」と表現する。メニューから選ぶ代わりにCommand-D(Alt-D)を押しても同じである。
a addMorphBack: b.
上記のようにすると青色の長方形モーフaと赤色の正方形モーフbが一緒に動くようになる。これは、モーフaにモーフbが埋め込まれた状態で、いわばモーフaとモーフbが親子関係になったと言える。このとき、モーフbをモーフaのサブモーフと呼ぶ。
興味深いのは、コードをDo itした時点で埋め込まれたモーフbと外側のモーフaとに、レイアウト上何の変化も生じず、それまでの位置状態を保ったままだったことである。Morphicでは特に指定しない限りレイアウトのない状態となっている。
モーフbがモーフaのサブモーフである状態で、モーフbの位置を変えることができる。
b center: a center.
上記のコードはモーフbの中心を、モーフaの中心にあわせる。この後でモーフaを移動させると、モーフbはモーフaの中心に位置したまま一緒に移動する。
今度はモーフaの位置を変えてみる。
a topLeft: 20@20.
上記のコードは、左上端が(20,20)という座標になるようにモーフaを移動する。この場合もモーフbはモーフaの中心に位置したまま一緒に移動する。
サブモーフになったモーフは親のモーフと一心同体となる。つまり、親のモーフを削除するとそのサブモーフも自動的に削除される。
モーフは他のモーフを何個でもサブモーフにすることができる。さらにサブモーフも別のモーフをサブモーフにすることができる。
ただし、サイクリックなサブモーフ化はできない。例えば以下のコードをDo itすると(しないほうがいいが)一瞬でハングする。
b addMorphBack: a. "注意:Do itするとハングする"
モーフ側で何のチェックも行われないので、サイクリックなサブモーフ化には気をつけるほうがいいだろう。
(第8回おわり)
【追記】
サブモーフの配置はMorphicで最も頭を悩ませるものの一つである。これに関しては以前にまとめた記事があるので参照してほしい。
Morphの設定