Hello World webOS

http://developer.palm.com/index.php?option=com_content&view=article&id=1758

↑webOSでHello World。ここにやり方載ってるんでやってみました。

1.とりあえず

EclipseだのSDKだのは前回を参考にして準備しとく。

2.プロジェクト作る

Eclipseのメニューから作れます。

ファイル > 新規 > Mojo Application

プロジェクトの構成要素は、

・app　-　Assistants, models, viewsを含む。これらはアプリケーションの構成要素。この中のディレクトリ内にファイルを追加していく。

・appinfo.json　-　アプリケーションインフォメーションファイル。

・icon.png　-　ラウンチャー上に表示されるアプリケーションアイコン。

・images　-　その他利用する画像ファイル。

・index.html　-　アプリケーション表示のメインステージ（ステージってなんだい？）

・sources.json　-　それぞれのsceneのソースファイルのリスト。

3.アプリケーションインフォメーション

appinfo.jsonみとけー。中身は見れば大体わかる。

4.ステージの設定

ステージとは：アプリケーションUIのプラットフォーム。画面に相当するものという認識で大体あっているのかな。シンプルなアプリケーションは画面を1つだけ持っていて、それが、index.htmlである、とのこと。index.htmlはxhtmlで記述される。

5.エミュレータを開始

前回参照。

6.とりあえず起動

「This text verifies your application is running.」どうのこうのと表示される。

index.htmlをエディタで開いてみるとこれと同じ文言が見える。

どうやら正しく起動できたらしい。

7.sceneを作る

Sceneとは：フォーマットされた情報をユーザーに見える形にすること、もしくはユーザに対するタスク（なんのこっちゃ？）。それぞれのSceneはviewとassistantを持っている。

viewとは：シーンのレイアウトと見え方を決定する。→Webページでいうところのhtmlか。

assistantとは：挙動を決定する。→WebページでいうところのJavaScriptか。

このあたりがwebOSのwebOSたる所以というところか。

modelとは：それぞれのsceneが持つもの。データを提供する。

手順：

ファイル > 新規 > Mojo Scene

プロジェクトを指定する。

Scene名（ここでは）「first」を入力して終了。

/app/first/first-scene.html

/app/assistants/first-assistant.js

が作成され、

sources.jsonに新しく作成したsceneの情報が追加される。

first-scene.htmlを編集して以下の内容に書き換える。

 class="palm-hasheader">

    >Header
     class="palm-body-text">0
     name="MyButton1" x-mojo-element="Button">
※↑オトナの事情によりd iv はdivに読み替えてください。


8.ステージアシスタント（stage assistant）

ステージはViewの他にAssistantを持つ。今回のようなシンプルなアプリケーションの場合、Assistantの仕事はSceneを表示可能にするために「push」することだけ。ステージ Assistantはstage-assistant.jsというファイル。これを編集する。

// コンストラクタ

function StageAssistant () {

}

//ステージが起動されるときにコールされる。ここでは「first」sceneをプッシュする。

StageAssistant.prototype.setup = function() {

this.controller.pushScene('first');



}

9.スクリプトの記述

最後にアプリケーションに命を吹き込むためにfirst sceneのassistantにコードを追加する。sceneのボタンを有効にするために、アプリケーションはボタンハンドラを必要とする。この関数はボタンがタップされるたびにテキストを更新する。以下の関数をfirst-assistant.js二追加する。

FirstAssistant.prototype.handleButtonPress = function(event){

// increment the total and update the display

    this.total++;

this.controller.get('count').update(this.total);

}

ボタンのタップイベントにハンドラを登録すると、フレームワークはボタンがタップされるたびにハンドラをコールするようになる。ハンドラはscene assistantに存在する必要がある。フレームワークがハンドラをコールするとき、フレームワークはsceneとDOMにアクセスする。一方、ハンドラはデフォルトで呼び出しているオブジェクトにバインドされる。これでは不便なので、この例では以下のステップを踏む。

・bind(this)を使用して、scene assistantスコープにハンドラをバインドする。

・Mojo.Event.listen()を使用して、ハンドラをリスナに登録する。

FirstAssistant.prototype.setup = function() {



// totalの初期値を設定して表示する。(set the initial total and display it)

    this.total=0;

 this.controller.get('count').update(this.total);

// ボタン属性のローカルオブジェクト(a local object for button attributes)

    this.buttonAttributes = {};



// ボタンモデルのローカルオブジェクト(a local object for button model)

    this.buttonModel = {

   buttonLabel : 'TAP HERE',

   buttonClass : '',

   disabled : false

   };



// ボタンの構築(set up the button)

    this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);

// ハンドラにボタンをバインドする(bind the button to its handler)

    Mojo.Event.listen(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));

}

10.実行！

ほうら動いた。

「TAP HERE」を押すと数字がインクリメントします。