Adobe AIR の SQL 機能を試してみるためにデモアプリを作ってみた

AIR には Flex(MXML/ActionScript) と Ajax(HTML/JavaScript) の二つの作成方法があるが、今回は後者を選んだ。

開発環境は Aptana Studio を使った。
デモアプリはテキストエリアに SQL 文を書いて実行すると、結果が表示されるというもの。SELECT であればテーブルに結果が表示される。テーブルの表示は、Adobe だけに Spry のデータセット機能を使ってみることにした。

Aptana Studio でプロジェクトを作成

File -> New.. -> Project -> Adobe AIR Project を選択する。
プロジェクトに「AirSQLiteTest」を設定する。
Import JavaScript Library までそのまま [Next] をクリック。
Adobe Spry 1.6 にチェックを入れて [Finish] をクリック。

ソースコード

AirSQLiteTest.html が AIR 本体を構成する。ソースコードは以下。

<html>
<head>
<title>AIR SQL Test</title>
<script  type="text/javascript"  src="lib/air/AIRAliases.js"></script>
<script  type="text/javascript"  src="lib/spry/includes/SpryData.js"></script>
<style  type="text/css">
div { margin:16px; }
#textSql {
width:100%;
height:120px;
}
#textResult {
width:100%;
height:60px;
}
p { margin:4px 0; }
table th,
table td { border:1px solid gray; }
th, td { padding:8px }
th { cursor: default; }
</style>
<script  type="text/javascript">
/**
 \* AIR SQL を操作する DBClient
 \* 
 \* @param {String} dbname データベース名
 \* @param {Function} closure クロージャ（省略可能）
 \*   指定された場合はクロージャ引数にこのオブジェクトが渡り、
 \*   処理終了とともに接続が閉じられる。
 */
function DBClient(dbname, closure){
  if  (closure)  {
  var dbc = new DBClient(dbname);
 closure(dbc);
 dbc.close();
  }  else  {
  this.open(dbname);
  }
}
DBClient.prototype = {
  /*
 \* データベースを開く
 \* 
 \* @param {String} dbname データベース名
 */
 open: function(dbname){
  try  {
  this.conn = new air.SQLConnection(); 
  var dbfile = null;
  if  (dbname)  {
 dbfile = air.File.applicationStorageDirectory.resolvePath(dbname + ".db");
  }
  this.conn.open(dbfile);
  }  catch  (error)  {
 statustext.innerText = "Error opening database";
 air.trace("error.message:", error.message);
 air.trace("error.details:", error.details);
  return;
  }
  },
  /*
 \* データベース接続を開じる
 */
 close: function(){
  if  (this.conn)  {
  this.conn.close();
  this.conn = null;
  }
  },
  /*
 \* SQL文を実行する
 \* 
 \* @param {String} sqltext SQL文
 \* @param {Function} cbsuccess クエリ成功時のコールバック関数
 \* @param {Function} cberror クエリ失敗時のコールバック関数
 */
 execute: function(sqltext, cbsuccess, cberror){
  try  {
  var stmt = new air.SQLStatement();
 stmt.sqlConnection = this.conn;
 stmt.text = sqltext; 
 stmt.execute();
 cbsuccess(stmt.getResult());
  return  true;
  }  catch  (error)  {
  if  (cberror)
 cberror(error);
  return  false;
  }
  }
}
</script>
</head>
<body>
<div>
<div>
<p>SQL Statement:</p>
<textarea  id="textSql">CREATE TABLE IF NOT EXISTS sample (
id INTEGER PRIMARY KEY AUTOINCREMENT,
content TEXT,
score INTEGER
)</textarea>
</div>
<div>
<button  id="buttonExecute">execute SQL</button>
</div>
<div>
<p>Query Result:</p>
<textarea  id="textResult"></textarea>
</div>
<div>
<table spry:region="Results">
<caption>Select Result</caption>
<thead>
<tr>
<th spry:sort="{ds_RowNumberPlus1}">#</th>
<th spry:sort="id">id</th>
<th spry:sort="content">content</th>
<th spry:sort="score">score</th>
</tr>
</thead>
<tbody spry:repeatchildren="Results">
<tr>
<td>{ds_RowNumberPlus1}</td><td>{id}</td><td>{content}</td><td>{score}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script  type="text/javascript"><!--
  function $(id)  {  return  document.getElementById(id)  };
  var Results = new Spry.Data.DataSet();
  
 $("buttonExecute").onclick = function(e){
  // SQLを実行する
 DBClient("sampledb", function(dbh){
 dbh.execute($("textSql").value, function(result){
  // 成功
 $("textResult").value = "QUERY OK, " \+ result.rowsAffected + " rows affected";
 Results.data = result.data ? result.data : {};
 Results.loadData();
  }, function(error){
  // 失敗
 $("textResult").value = error.message + "\\n" \+ error.detailID + ": " \+ error.details;
  });
  });
  };
//-->
</script>
</body>
</html>

試してみる

プロジェクトを選択した状態で、Run -> Run…
デフォルトで SQL 文には CREATE TABLE が入っている。

データをインサート。

SELECT でテーブルを表示。

SQL についての解説

AIR SQL では非同期処理も可能だが、SQL 操作をここでは同期処理している。
SQL 機能に用意された SQLConnection や SQLStatement をそのまま使ってもよいのだが、ラッパーを作った方が早かったので DBClient 定義した。
AIR SQL は SQLite3 がベースらしいのだが、CURRENT_TIMESTAMP は認識されないようだった。
参考）

Spry についての解説

今回使用した、Spry の動的な領域はまずデータセットを作成する。

var Results = new Spry.Data.DataSet();

それにマッピングするテーブルを HTML で定義しておく。spry:region にさきほどのオブジェクト名を入れる。この場合は書くテーブルの行となるのは、その Results の各配列要素のため繰り返し項目の親となる tbody にも spry:repeatchildren=”Results” を定義する。
あとは、各列名を {column} として定義しておけばいい。spry:sort を使うと列ソート機能を簡単に追加できる。

<table spry:region="Results">
<caption>Select Result</caption>
<thead>
<tr>
<th spry:sort="{ds_RowNumberPlus1}">#</th>
<th spry:sort="id">id</th>
<th spry:sort="content">content</th>
<th spry:sort="score">score</th>
</tr>
</thead>
<tbody spry:repeatchildren="Results">
<tr>
<td>{ds_RowNumberPlus1}</td><td>{id}</td><td>{content}</td><td>{score}</td>
</tr>
</tbody>
</table>

あとは、SQL の実行結果の data プロパティの値を Results.data にセットして、Results.loadData() を呼んでやれば自動的に table の内容が更新される。