動くアプリを作る

次に、クリックしたらHello, world!が表示されるアプリケーションを作ります。default.htmlの内容を以下のようにしてみます。

<a class=”kit-button” id=”sample-hello”>Click Me!</a>

要素にkit-buttonクラスを要素に付与することで標準スタイルのボタンを配置することができます。
ボタンのサンプル
次に、この要素にsample-helloというIDを付与しました。他のアプリケーションと競合しないために、sampleアプリケーションのhelloオブジェクトであるという意味で名前をつけます。
このボタンをクリックしたらHello, world!というアラートが表示されるようにします。define.jsonで指定したスクリプトファイル(sample.js)ファイルを用意します。

app_sample(pid);

function app_sample(_pid){
$(“#winc” + _pid + ” #sample-hello”).click( function(){
System.alert(“Hello, world!”,”最初のHello, world!アプリケーションです。”)
});
}

ふつうはそのプロセスID(アプリケーションのプロセス一つ一つに振られるID)を引数に取るapp_(アプリケーション名)という関数を定義し、それを1度実行する構造を取ります。
関数内で、同プロセスID内の#sample-helloという要素のクリック時の挙動を設定します。Systemクラスのalertメソッドで、タイトルとテキストを引数に指定してアラートを表示させることができます。
アラートのサンプル
なお、ボタンにonclick属性を付与してスクリプトを記述すれば、sample.jsを用いずにアラートを表示することも可能です。