- OpenLaszlo紹介
- プログラム構造関連
- スクリプト
- Javascript基礎
- 基礎知識
- ビュー<view>
- レイアウト
- 動かす
- 入力デバイス
- 文字
- 数値
- 日付
- オブジェクト指向
- 標準コンポーネント
- データの扱い
- データ操作(基礎)
- 応用編
–
レイアウトの基礎
デフォルトでは左上に配置される
画面上には ｘ座標 と ｙ座標 があり、ｘ、ｙの値で部品の表示位置を決めます。左上が（ｘ,ｙ）＝（０,０）になります。デフォルトでは（０,０）である左上にすべての部品が配置されます。
つまり、
<html> <h1>Hello World</h1> <h1>こんにちは</h1> </html>
のノリで、
<?xml version="1.0" encoding="UTF-8"?> <canvas proxied="false" bgcolor="0xeeeeee"> <text>Hello World</text> <text>こんにちは</text> </canvas>
と書くと、２つの<text>は改行もなく両方とも左上に配置され、
のように重なってしまいます。私が初めてOpenLaszloに触れたとき、これでハマりました(笑)。
良いか悪いかではなく、こういう性質があることに注意してください。
他にやり方はたくさんあるのですが、とりあえず下記のように書けば解決でした。
<?xml version="1.0" encoding="UTF-8"?> <canvas proxied="false" bgcolor="0xeeeeee"> <text>Hello World</text> <text y="15">こんにちは</text> </canvas>
ｘ、ｙで直接配置
ｘとｙを直接指定して、好きな位置に配置することができます。
ｘ座標の場合、正の値は右方向、負の値は左方向になります。ｙ座標の場合、正の値は下方向、負の値は上方向になります。
下記のコードと実行例をよく眺めてください。ｘ、ｙでの位置は、親タグが基準になります。灰色のほうの(e)と(f)はマイナス値なので<canvas>の外に出ています・・・つまり存在はしているのですが画面に表示されません。
背景色が灰色の文字列の位置は<canvas>が基準です。一方、背景色が緑色の文字列の位置はgreen_viewという名前の<view>が基準です。
<?xml version="1.0" encoding="UTF-8"?> <canvas proxied="false" bgcolor="0xeeeeee" width="500" height="200"> <text bgcolor="0xcccccc" >(a) デフォルト位置</text> <text bgcolor="0xcccccc" x="130" >(b) x=130</text> <text bgcolor="0xcccccc" y="50">(c) y=50</text> <text bgcolor="0xcccccc" x="100" y="50">(d) x=100,y=50</text> <text bgcolor="0xcccccc" x="-80" >(e) x=-80</text> <text bgcolor="0xcccccc" y="-50">(f) y=-50</text> <view name="green_view" x="300" y="100" width="200" height="100" bgcolor="0xccffcc"> <text bgcolor="0x00ff00" >(a) デフォルト位置</text> <text bgcolor="0x00ff00" x="130" >(b) x=130</text> <text bgcolor="0x00ff00" y="50">(c) y=50</text> <text bgcolor="0x00ff00" x="100" y="50">(d) x=100,y=50</text> <text bgcolor="0x00ff00" x="-80" >(e) x=-80</text> <text bgcolor="0x00ff00" y="-50">(f) y=-50</text> </view> </canvas>
