はじめに
本連載では、FlashやDHTMLによるリッチクライアントアプリケーションを作成できるOpenLaszloについて説明していきます。今回は、OpenLaszloによるDHTML(Ajax)コンテンツについて簡単なサンプルプログラムを通して説明していきます。
これまでの記事
- 第1回 OpenLaszloのインストールと開発環境構築
- 第2回 OpenLaszloのプログラミングと標準コントロール
- 第3回 OpenLaszloとサーバーサイド連携
- 第4回 OpenLaszloでGoogleマップを使う
- 第5回 OpenLaszloでmixiアプリの開発
対象読者
- HTML、JavaScriptを使用した開発を行ったことがある方
- Flashを使用した開発を行ったことがある方
- OpenLaszloについて興味がある方
DHTMLでコンパイル
OpenLaszloは、1つのソースコードからFlashコンテンツとDHTML(Ajax)コンテンツを出力できるマルチランタイムプラットフォームです。DHTMLの場合は、FlashPlayerプラグインを必要とせずAjaxに対応したブラウザであれば表示できます。swfでコンパイルしたものとDHTMLでコンパイルしたものは、見た目はほぼ同じ画面が生成されます。
コンパイルオプションの切り替え
OpenLaszloの実行画面は、アプリケーションの実行結果とコンパイル方法を制御する管理者コンソールで構成されています。管理者コンソールは普段は画面下に隠れているので、スクロールして表示してください。
管理者コンソールのDHTMLにチェックをつけて[Compile]ボタンを押すとDHTMLでコンパイルできます。
![実行画面](http://cz-cdn.shoeisha.jp/static/images/article/4849/01.png)
![コンパイルオプションをDHTMLに切り替え](http://cz-cdn.shoeisha.jp/static/images/article/4849/02.png)
<?xml version="1.0" encoding="UTF-8"?> <canvas> <text x ="10" font ="MS UI Gothic" fontsize="15">Hello World</text> <edittext x ="10" y ="40" width="200">Hello World</edittext> <button x ="10" y ="80" font ="MS UI Gothic" fontsize="15">Hello World</button> <combobox x ="10" y ="140" width="130"> <textlistitem text="テスト1" value="1"/> <textlistitem text="テスト2" value="2"/> <textlistitem text="テスト3" value="3"/> </combobox> <window x ="10" y ="190" width ="200" height ="150" title ="TEST" resizable="true" closeable="true"> <text>Hello World</text> </window> </canvas>
![サンプルソースを実行した結果(DHTMLでコンパイル)](http://cz-cdn.shoeisha.jp/static/images/article/4849/03.png)
![サンプルソースを実行した結果(swf9でコンパイル)](http://cz-cdn.shoeisha.jp/static/images/article/4849/04.png)