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へのリンクを追加。

サンプルを動かしてみて問題なければ準備OK
(8080ポートを使うので注意)

OpenLaszloの制作の流れ:GLTロゴ編

まずはどうしたいかを日本語で書く、今回は
300pxX60pxのサイズの中で、
画像を使ったリンクを表示して、
その上に泣いたGeek君の付いた背景と同じ画像を表示し
左から300pxスライドさせて先のリンクを表示する。

これをそのままラズロで書くと。
(画像は同一フォルダの中)

<canvas proxied="false" width="300" height="60">
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"/>
左から3秒でスライドさせて先のリンクを表示する。
</view>
</view>
</canvas>


ちなみにこれを実行すると
左端にGeek君が表示されてしまう・・・これは面白くない。
なので上にかぶせる画像を300pxプラスGeek君分として考える。

ラズロは指定しなければ必ず左上基点となる
じゃあ、左にGeek君分(100pxとして)ずらせばいいので

「その上に泣いたGeek君の付いた背景と同じ画像を表示し
左から300pxスライドさせて先のリンクを表示する。」
この日本語を
「その上に400pxの泣いたGeek君の付いた背景と同じ画像を
左に-100pxずらして表示し、
左から9秒かけて400pxスライドさせて先のリンクを表示する。」
に変更

すると書式は以下の通り

<canvas proxied="false" width="300" height="60">
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"/>
左から9秒かけて400pxスライドさせて先のリンクを表示する。
</view>
</view>
</canvas>


「プログラムは上から下へ実行され、見えてるものは
一区切りごと下から重なって見える」
これはズバリ!懐かしのミルフィーユ的思考!

ともかく、楽しんで勉強しています(^^

記事のオプション

トラックバック

このエントリのトラックバックURL: http://gltmatrix.com/trackback.php/olstart

この記事にはトラックバック・コメントがありません。
Comments
auge流OpenLaszloの作り方 | 1 件のコメント | アカウント登録
コメントは投稿者の責任においてなされるものであり、サイト管理者は責任を負いません。
auge流OpenLaszloの作り方
投稿者: ゲストユーザ on 2009年7月 6日(月) 11:34 JST
連絡していただけますか。
neyna
[ # ]