OpenLaszloでDHTML（Ajax）コンテンツの作成

　OpenLaszloはFlashやDHTMLアプリケーションを作成できるオープンソースです。1つのソースコードからFlash・DHTMLそれぞれで動作するアプリケーションを作成できます。今回はFlash未対応のiPhoneでDHTMLアプリケーションを動作させてみましょう。

はじめに

　本連載では、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でコンパイルできます。

実行画面

コンパイルオプションをDHTMLに切り替え

サンプルソース

<?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="テスト１" value="1"/>
    <textlistitem text="テスト２" value="2"/>
    <textlistitem text="テスト３" 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でコンパイル）

サンプルソースを実行した結果（swf9でコンパイル）