View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide

funfunfun31

PREV ------ ● TOP ● ------ NEXTUploaded Image: fmrph.jpg


レイアウトはどうよ?

モーフはレイアウト機能ってのが使えまする。モーフの中にサブモーフを配置するときに
レイアウトのルールを設定すると自動的にサブモーフを整列してくれるってわけさ。
では早速それを実験してみましょうかいなっと。

(赤ハロメニューのレイアウトでも設定できるよん)

■作業はワークスペースちゃんで

これまではブラウザ上でクラスを作りまくってきたんだけど、
今回はクラスは作らずにWorkSpaceを使っていくつかレイアウトの仕方を
試してみようとおもうです。
ってことで「Tools」フラップから「WorkSpace」をだしまする。

Uploaded Image: image.jpg


■オーナーでござる。

土台となる黄色の四角形のモーフ(オーナー)を出してみます。
「WorkSpace」には以下のソースコードを入力するです。

--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm openInWorld
--------------------------------------------
コードを全て選択してドゥ〜イット!!します。
Alt + d ( Cmd + d )

Uploaded Image: image1.jpg


まあ、こんなかんじでインスタンスが出てきます。

Uploaded Image: image2.jpg



このオーナーの中に小さな白い四角形のサブモーフを20個入れます。
順番とがわかりやすいように各サブモーフにはナンバーをふります。
(「StringMorph」を各白い四角形のサブモーフにしてます)
コードを追加しまする。

Uploaded Image: image3.jpg


--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------

コードを全て選択してドゥ〜イット!しまする。
Alt + d ( Cmd + d )

Uploaded Image: image4.jpg


「1」のサブモーフが1つしかないように見えまするが他のサブモーフは
同じ位置に重なって配置されているので見えないだけだよん。

Uploaded Image: image5.jpg



■レイアウトしましょう。

さて実際にここでレイアウト機能を使ってみることにするです。
コードを追加します。レイアウトを使うよって事ですな。
--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm layoutPolicy: TableLayout new.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image6.jpg


ほ〜い!重なってたサブモーフがでてきましたね。
これがデフォルトのレイアウトってことかにゃ?

Uploaded Image: image7.jpg



■向きの設定

まずは配置する方向の設定をしてみるです。
「並べる方向」は左から右へ、「折り返す方向」は上から下へ
ってかんじで設定しまする。
--------------------------------------------
rm _ RectangleMorph new.
rm extent: 200@100.
rm color: Color yellow.
rm borderWidth: 1.
rm layoutPolicy: TableLayout new.
rm listDirection: #leftToRight.
rm wrapDirection: #topToBottom.
i _ 20.
20 timesRepeat: [ r _ RectangleMorph new.
		r color: Color white.
		r extent: 20@15.
		r borderWidth: 1.
		r borderColor: Color red.
		s _ StringMorph new. 
		s contents: i asString.
		i _ i  - 1.
		r addMorph: s.
		rm addMorph: r ].
rm openInWorld
--------------------------------------------
Alt + d ( Cmd + d )

Uploaded Image: image8.jpg


まあ、これがいっちばん良く使うタイプだすな。

Uploaded Image: image9.jpg



●いろいろ変えたものをみてみましょうか。

「並べる方向」 ⇒ 右から左へ、「折り返す方向」 ⇒ 上から下へ。
--------------------------------------------
rm listDirection: #rightToLeft.
rm wrapDirection: #topToBottom.
--------------------------------------------

Uploaded Image: image10.jpg


「並べる方向」 ⇒ 左から右へ、「折り返す方向」 ⇒ 下から上へ。
--------------------------------------------
rm listDirection: #leftToRight.
rm wrapDirection: #bottomToTop.
--------------------------------------------

Uploaded Image: image11.jpg


「並べる方向」 ⇒ 右から左へ、「折り返す方向」 ⇒ 下から上へ。
--------------------------------------------
rm listDirection: #rightToLeft.
rm wrapDirection: #bottomToTop.
--------------------------------------------

Uploaded Image: image12.jpg


「並べる方向」 ⇒ 上から下へ、「折り返す方向」 ⇒ 左から右へ。
--------------------------------------------
rm listDirection: #topToBottom.
rm wrapDirection: #leftToRight.
--------------------------------------------

Uploaded Image: imagea1.jpg


「並べる方向」 ⇒ 下から上へ、「折り返す方向」 ⇒ 左から右へ。
--------------------------------------------
rm listDirection: #bottomToTop.
rm wrapDirection: #leftToRight.
--------------------------------------------

Uploaded Image: imagea2.jpg


「並べる方向」 ⇒ 上から下へ、「折り返す方向」 ⇒ 右から左へ。
--------------------------------------------
rm listDirection: #topToBottom.
rm wrapDirection: #rightToLeft.
--------------------------------------------

Uploaded Image: imagea3.jpg


「並べる方向」 ⇒ 下から上へ、「「折り返す方向」 ⇒ 右から左へ。
--------------------------------------------
rm listDirection: #bottomToTop.
rm wrapDirection: #rightToLeft.
--------------------------------------------

Uploaded Image: imagea4.jpg



PREV ------ ● TOP ● ------ NEXT







■ MEMO ■

Sunday, 14 March 2004, 5:06:19 pm
「並べる方向」と「折り返す方向」がけっこうこんがらがっちゃうんだよね。--thoru

Links to this Page