Hello, Ample SDK! - XUL on IE6

ここでの動作環境は次のとおり。

  • Mac OS X 10.5.6 / Firefox 3.5 Preview
  • Windows XP SP3 / Internet Explorer 6

アーキテクチャで触れられているとおり、Ample SDKではアプリケーションのスタイルをCSS、ロジックをJavaScript、そしてレイアウトをXMLで定義・実装する。サンプルとして、レイアウトをXULベースで記述したものを動作させてみよう。

HTMLファイル - hello_amplesdk.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Hello, Ample SDK! - XUL listbox</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/ample+css" href="./ample/languages/xul/themes/default/xul.css" rel="stylesheet" />
<script type="text/javascript" src="./ample/runtime.js"></script>
<script type="text/javascript" src="./ample/languages/xul/xul.js"></script>
</head>
<body>

<h1>Hello, Ample SDK! - XUL listbox</h1>

<script type="application/ample+xml"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <xul:listbox type="checkbox" height="130">
    <xul:listhead>
      <xul:listheader minwidth="30" width="30" label="No"/>
      <xul:listheader minwidth="200" label="Name"/>
      <xul:listheader minwidth="200" label="Version"/>
      <xul:listheader minwidth="350" width="350" label="URI"/>
    </xul:listhead>
    <xul:listbody id="listbody">
      <xul:listitem>
        <xul:listcell label="1"></xul:listcell>
        <xul:listcell label="jQuery"/>
        <xul:listcell label="1.3.2"/>
        <xul:listcell label="http://jquery.com/"/>
      </xul:listitem>
      <xul:listitem>
        <xul:listcell label="2"></xul:listcell>
        <xul:listcell label="Yahoo UI"/>
        <xul:listcell label="2.7.0"/>
        <xul:listcell label="http://developer.yahoo.com/yui/"/>
      </xul:listitem>
      <xul:listitem>
        <xul:listcell label="3"></xul:listcell>
        <xul:listcell label="ExtJS"/>
        <xul:listcell label="3.0"/>
        <xul:listcell label="http://extjs.com/"/>
      </xul:listitem>
      <xul:listitem>
        <xul:listcell label="4"></xul:listcell>
        <xul:listcell label="Dojo"/>
        <xul:listcell label="1.3.1"/>
        <xul:listcell label="http://www.dojotoolkit.org/"/>
      </xul:listitem>
      <xul:listitem>
        <xul:listcell label="5"></xul:listcell>
        <xul:listcell label="Ample SDK"/>
        <xul:listcell label="0.8.6"/>
        <xul:listcell label="http://www.amplesdk.com/"/>
      </xul:listitem>
    </xul:listbody>
  </xul:listbox>
</script>

</body>

</html>

CSSとAmple SDKライブラリ本体をロードした上で、XUL listboxベースによるレイアウトの実装をおこなった。これをFirefoxとIE6でそれぞれ動作を確認する。

それぞれのWebブラウザにおいて、XULで定義したUIが表示できた。表示だけではなく、各種ソートやカラムの表示切替といった動作もおこなえる

XULで記述したユーザインタフェースが両Webブラウザで動作することが確認できた。ここではXULのlistboxにてレイアウトを定義したが、Ample SDKではこのほかにもXULをはじめとしてAML(Abstract UI] Markup Language)やXHTML、SMIL(Synchronized Multimedia Integration Language)といった多くの記法をサポートしている。サポートされている記法については、[各種サンプルのほかにリファレンスのRuntime、UI languagesの項に詳しい内容が記載されているので、興味がある方はこれを参考にしながら試してみてほしい。

Ample SDK 今後のロードマップ

本稿ではXULによるサンプルのみの紹介だったが、このほかにもAmple SDKは現段階でSVG表示のサポートやUI ManagersとしてDrag&Drop managerやLazy Loader managerといったさまざまな興味深い機能を提供している。Ample SDKの今後のロードマップとして、HTML5の一部のモジュール、Firebug用のデバッグツールなどを開発していくとのこと。いままでのAjaxライブラリとはまったく違う角度からアプローチを試みたAmple SDK、これからの動向に注目したい。