スマートフォン向けHTML5生成プログラミング言語「mobl」使ってみた！

スマートフォン向けHTML5生成プログラミング言語の「mobl」を使ってみました。
これは凄いぞ！スマートフォン向けHTML5生成プログラミング言語「mobl」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

環境設定は最新のEclipseを落としてきて、Eclipseから「Install new software」するだけで始められます。

で、このマニュアルにあるTodoアプリを作ってみました。
Hydra - Job ‘mobl:master:manual’ build 882758
HTML5のローカルストレージにタスクを登録、編集、削除、検索が出来るアプリです。

こんな感じです。
ローカルデータベースにちゃんと値が入っているのも確認できると思います。

iPhoneで見るとこんな感じ。

ただiPhoneからだと何故か日本語が使えず、タスクを登録しても画面には表示されませんでした。
モバイル様開発環境なのに。。

まだちょろっとしか触れてませんがHTMLもCSSも書くことなく、
こういったアプリを作れてしまうのは魅力的ですね。
まだまだ発展途上な感じはありますが今後とも注目していきたいです。

以下ソースになります。
ソースは下記３ファイルだけです。
moblという独自言語なのですがコンパクトなので比較的わかりやすいと思います。

• todo.mobl：メイン処理
• model.mobl：エンティティ定義
• config.mobl：タイトル等の設定ファイル

todo.mobl

application todo

import mobl::ui::generic
import model

screen root() {
  header("Tasks") {
    button("Add", onclick={ addTask(); })
  }
  group {
    list( t in Task.all() order by date desc) {
      item { taskItem(t) }
    }
  }
  button("Search", onclick={ search(); })
}

control taskItem(t : Task) {
  checkBox(t.done, label=t.name)
  contextMenu {
    button("Delete", onclick={
      remove(t);
    })
    button("Edit", onclick={
      editTask(t);
    })
  }
}

screen addTask() {
  var newTask = Task()
  
  header("Add") {
    backButton()
    button("Add", onclick={
      newTask.date = now();
      add(newTask);
      screen return;
    })
  }
  group {
    item { textField(newTask.name, placeholder="Task name") }
  }
}

screen editTask(t : Task) {
  header("Edit") {
    button("Done", onclick={ screen return; })
  }
  group {
    item { textField(t.name, placeholder="Task name") }
    item { textField(t.description, placeholder="Task description") }
  }
}

screen search() {
  var phrase = ""
  
  header("Search") { backButton() }
  searchBox(phrase, placeholder="Search term")
  group {
    list(t in Task.searchPrefix(phrase)) {
      item { taskItem(t) }
    }
  }
}

mode.mobl

module model

entity Task {
  name        : String (searchable)
  description : String (searchable)
  done        : Bool
  date        : DateTime
}

config.mobl

configuration

debug
title "Todo"