OpenLaszlo のコードを眺め、編集してみる
昨日 OpenLazlo 10 Minutes を試しました。
（実は OpenLazlo 10 Minutes を試した後、なかなか時間が割けなくて、数日経っています。）
とりあえず特徴を掴みたいので、今日はコードを眺め、少し編集していきたいと思います。
目的
まず、目的をはっきりさせます。
目的は、アプリケーション開発者の立場で OpenLaszlo を評価することです。
何といっても魅力があることは必要で、その上で習熟していないメンバーが数人集まって短期間でバグの少ないアプリケーションが作成できることが必要ですね。
魅力
開発しやすい？
- プロトタイピングしやすい？
- 生産性はよいの？
- 学習しやすいの？初学者が「今自分が何をしているのか」理解しながらすすめられるか
- 設計レベルのアーキテクチャを押さえ易いの？
- 今月の２時間で学ぶ Java Hot Topic (11月特別号)の資料の８から１４ページが分かり易いと思います。
- 何をどんな順番で作ればよいか分かり易いの？
- 学習教材：Laszlo in 10 minutes でステップ・バイ・ステップ学習できる
- 何を作るのかざっくり示した資料は見つけられなかった
- 設計レベルのアーキテクチャを押さえ易いの？
- 情報は充実しているの？
ソースを眺める
ファイルの拡張子
ファイルの拡張子は、lzxです。
canvasの上にコンポーネントを置きます
lzxファイル上では、<canvas> の間にいろいろなコンポーネントを置くようです。例えば、<text> とか、<button> タグなどです。
<canvas> ここにコンポーネントを置きます。 </canvas>
コンポーネントの位置を指定します
◇canvas左上からの座標を指定します。
<text> タグを複数置くと、canvas の左上に重なって表示されます。
<text>hello</text>
<text>good morning</text>→
個別に座標を指定します。
<text y="10">hello</text>
<text y="30">good morning</text>→
◇レイアウトマネージャもあります
<simpleLayout> など、レイアウトマネージャもあり、個々のコンポーネントに座標指定しない方法もあるようです。
<simplelayout/>
<text>hello</text>
<text>good morning</text>→
ほか
<view> タグや <window> タグの上に様々なコンポーネントを置くこともできるようです。
lazlo 10 分学習や、OpenLaszlo Japan（日本語）のチュートリアルに詳しく書かれてましいたね。
NetBeans 上で編集してみる
新しいlzxファイルを作成する
新しいlzxファイルを作成する際は、 /Web/OpenLaszlo/ 以下のいずれかのファイルを指定するようです。
- LzxCanvasTemplate.lzx
- LzxLibraryTemplate.lzx
- LzxViewTemplate.lzx
LzxCanvasTemplate.lzx を選ぶと、こんなコードが生成されました。
<!--=======================================================================--> <!-- --> <!-- LZX File Comments --> <!-- --> <!--=======================================================================--> <!DOCTYPE canvas PUBLIC "LZX" "http://www.openlaszlo.org/lps/tools/lzx.dtd" > <canvas> </canvas>
NetBeans のコード補完機能が利用できます
< と入力すると、タグの候補がドリルダウンされます。
<inputtext と入力してスペースを入れると、属性の候補がドリルダウンされます。
APIドキュメントは表示されません。
タグの誤りなどは、NetBeansが警告します
◇存在しないタグを入力したり、開始タグと終了タグが対応していない場合などは、NetBeansのコード補完機能で文字が赤く着色され、誤りを発見できます。
◇フォーカスを外すとエラー表示は消えてしまうので、「実行」-「XMLの妥当性検証」で検証することができます。以下は、エラーがある状態の妥当性検証の出力です。「XML検査」ウィンドウに表示されます。
XML 妥当性検査を開始しました。
file:/D:/reiko/NetBeans/projects6.5/OpenLaszloApp/web/newLzxCanvasTemplate.lzx を検査中...
"http://www.openlaszlo.org/lps/tools/lzx.dtd" での参照エンティティー。
The element type "label" must be terminated by the matching end-tag "". [24]
XML 妥当性検査が終了しました。
◇「構築」しても妥当性検証は行われず、「構築成功 (合計時間: 1 分 3 秒)」してしまいました。
◇エラーがある状態で実行することもでき、該当画面を開いた際に以下のエラーが表示されます。
構築か実行前に妥当性検証が行われるといいですね。
実行する
開始ページは、index.html 固定みたいです。指定する個所はみつかりませんでした。
index.html を編集し、先ほどのファイルを実行してみます。
デモの index.html を参考に、Flash 形式と DHTML 形式の両方で動かすことにします。lzx= の後に実行形式を指定するんですね。
<ul>
<li> newLzxCanvasTemplate
<ul>
<li> <a href="./newLzxCanvasTemplate.lzx?lzr=swf8">newLzxCanvasTemplate(Flash)</a> </li>
<li> <a href="./newLzxCanvasTemplate.lzx?lzr=dhtml">newLzxCanvasTemplate(DHTML)</a> </li>
</ul>
</li>
</ul>
デバッグする
プロジェクトの右クリックで「デバッグ」を選ぶと、以下のダイアログがでました。
IE か Firefox ですね。私の PC は chrome がデフォルトですので、FireFox に変更しておきます。「ツール」-「オプション」-「一般」-「Webブラウザ」で変更できます。
プラグインをインストールするようです。FireFox 落とすの？やだな。
NetBeans FireFox Extension というプラグインがインストールされました。ふーん、こんなのがあるんですね。
NetBeans を見ると、実行したソースから生成されたファイルが開いてました。
以下は、lzxファイルを実行した結果のサンプルです。（適当に改行をいれてます。）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico">
<link rel="stylesheet" href="/OpenLaszlo411App/lps/includes/console.css" type="text/css">
<title>OpenLaszlo Application</title>
<script src="/OpenLaszlo411App/lps/includes/embed-compressed.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
lz.embed.swf({url: 'newLzxCanvasTemplate.lzx?lzt=swf&lzr=swf8', bgcolor: '#ffffff', width: '100%', height: '100%', id: 'lzapp', accessible: 'false'});
</script>
<noscript>
アプリケーションを利用するにはJavaScriptを有効にする必要があります。
</noscript>
<div id="footer" style="position: relative">
<div id="console">
<iframe id="dhtml-application" src="/OpenLaszlo411App/lps/admin/dev-console.html?lzappuid=newLzxCanvasTemplate.lzx&;appinfo=%3Cdata%3E%3Crequest+lps%3D%22%2FOpenLaszlo411App%22+url%3D%22newLzxCanvasTemplate.lzx%22+relurl%3D%22newLzxCanvasTemplate.lzx%22+fullpath%3D%22%2FOpenLaszlo411App%2FnewLzxCanvasTemplate.lzx%22+opt-url%3D%22newLzxCanvasTemplate.lzo%22+unopt-url%3D%22newLzxCanvasTemplate.lzx%22+query_args%3D%22%26amp%3Blzr%3Dswf8%22+pocketpc%3D%22false%22+console-remote-debug%3D%22null%22+console-floating-window%3D%22null%22+appuid%3D%221230299332937%22+windows%3D%22true%22+opt-exists%3D%22false%22+%3E%0A%3Cparam+name%3D%22lzr%22+value%3D%22swf8%22%2F%3E%0A%3C%2Frequest%3E%3Cinfo+size%3D%22147451%22+debug%3D%22false%22+encoding%3D%22null%22+debug-exists%3D%22false%22+debug-up-to-date%3D%22false%22+nondebug-exists%3D%22true%22+nondebug-up-to-date%3D%22true%22+runtime%3D%22swf8%22+gzsize%3D%22147514%22+lfcsize%3D%22285463%22+gzlfcsize%3D%2292524%22+%2F%3E%3C%2Fdata%3E" style="width: 100%; height: 70px" width="100%" height="70">
</iframe>
</div>
<div class="info">
<b>ターゲットランタイム: </b>
swf8
<br>
<b>アプリケーションサイズ: </b>
144K(147,451 bytes)
<a target="_blank" href="newLzxCanvasTemplate.lzx?lzt=info&;lzr=swf8">サイズ情報</a>
<br>
<a href="newLzxCanvasTemplate.lzx?lzt=html&;lzr=swf8">Show application only</a>
</div>
</div>
</body>
</html>ちなみに、実行画面で「view source」してみると、記述したソースそのままが表示されました。
デバッグを終了すると、「デバッグ」ウィンドウにこんな表示がでました。もう一度デバッグセッションを終了すると消えました。見方はわかりません。
テスト
コード補完されたタグに Test で始まるものがいくつかありました。Testing Framework があるみたいですね。
