auge流OpenLaszloの作り方
auge流OpenLaszloの作り方
これは、あくまでも私の作り方（考え方）です。
OpenLaszloの準備
開発準備については基本的にここを参照
http://www.openlaszlo-ason.com/doku.php/install
しかし、簡易的な環境で良いので
私はラズロ丸ごとパックを使用。
この場合ファイルをアップロードする場所は
Cにインストールしたとして
C:Program FilesOpenLaszlo Server 4.3.0Serverlps-4.3.0my-apps
ためしにサンプルを動かせば分かりやすいです。
インストールしたら、ディスクトップにストップアイコンの
ショートカットを作っておくと便利。
スタートさせるとトムキャット経由でブラウザが立ち上がるので
my-appsへのリンクを追加。
サンプルを動かしてみて問題なければ準備ＯＫ
（8080ポートを使うので注意）
OpenLaszloの制作の流れ：GLTロゴ編
まずはどうしたいかを日本語で書く、今回は
300pxX60pxのサイズの中で、
画像を使ったリンクを表示して、
その上に泣いたGeek君の付いた背景と同じ画像を表示し
左から300pxスライドさせて先のリンクを表示する。
これをそのままラズロで書くと。
（画像は同一フォルダの中）
300pxX60pxのサイズの中で、
<view resource="gltrogo.png" onclick="lz.Browser.loadURL('http://gltmatrix.com/', '_self')" >
画像を使ったリンクを表示して、
<view resource="overbg1.png">
その上に泣いたGeek君の付いた背景と同じ画像を表示し
<animator attribute="x" to="300" duration="3000"/>
左から３秒でスライドさせて先のリンクを表示する。
</view>
</view>
</canvas>
ちなみにこれを実行すると
左端にGeek君が表示されてしまう・・・これは面白くない。
なので上にかぶせる画像を300pxプラスＧｅｅｋ君分として考える。
ラズロは指定しなければ必ず左上基点となる
じゃあ、左にＧeek君分（１００ｐｘとして）ずらせばいいので
「その上に泣いたGeek君の付いた背景と同じ画像を表示し
左から300pxスライドさせて先のリンクを表示する。」
この日本語を
「その上に400pxの泣いたGeek君の付いた背景と同じ画像を
左に-100pxずらして表示し、
左から９秒かけて400pxスライドさせて先のリンクを表示する。」
に変更
すると書式は以下の通り
300pxX60pxのサイズの中で、
<view resource="gltrogo.png" onclick="lz.Browser.loadURL('http://gltmatrix.com/', '_self')" >
画像を使ったリンクを表示して、
<view resource="overbg1.png" x="-100">
その上に400pxの泣いたGeek君の付いた背景と同じ画像を
左に-100pxずらして表示し、
<animator attribute="x" to="400" duration="9000"/>
左から９秒かけて400pxスライドさせて先のリンクを表示する。
</view>
</view>
</canvas>
「プログラムは上から下へ実行され、見えてるものは
一区切りごと下から重なって見える」
これはズバリ！懐かしのミルフィーユ的思考！
ともかく、楽しんで勉強しています（＾＾