スマートフォン向け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も書くことなく、
こういったアプリを作れてしまうのは魅力的ですね。
まだまだ発展途上な感じはありますが今後とも注目していきたいです。
以下ソースになります。
ソースは下記3ファイルだけです。
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"