Jaxerアプリケーションの作成

前回は，Jaxerの環境構築，およびサンプルアプリの解説をしました。今回から，いよいよJaxerアプリケーションのプログラミングに取り掛かります。

今回作成するサンプルアプリケーションは，タスク管理アプリです。画面イメージは以下のようになります。

実装する機能は，次のものになります。

• テキスト入力欄にタスクを入力し，Enterキーを押すと，タスクが登録できる。
• 登録したタスクは，即時画面上に反映される。
• 既存のタスクをクリックすると，テキスト入力欄になり，タスクの内容を編集できる。
• ×をクリックすると，タスクを削除できる。

それでは，前回インストールしているAptana Studioを起動しましょう。

起動後，以下の手順で，まずは「task」プロジェクトを作成します。

1. project viewで右クリック→New→Projectを選択する。

2. New Projcetウィンドウで，「⁠Aptana Projects⁠」⁠→「⁠Default Web Project」を選択し「Next」をクリックする。

3. Project name欄に，今回作成するアプリのフォルダ名を入力する。今回はサンプルアプリとして，タスク管理アプリを作成するので，"task"と入力して，「⁠Next」をクリックする。

4. 続いて利用するJavaScript Libraryを選択する。今回は，jQueryを利用するので，jQueryのチェックボックスにチェックをつけて，「⁠Next」をクリックする。

5. 「Include Jaxer sample in project」以外にチェックをつけて，「⁠Next」をクリックする。

6. 最後は何も入力せず，そのまま「Finish」をクリックする。

これで，project view のところに以下のようなファイル構成でプロジェクトが作成されます。

「jquery_sample.htm」と「jquery_sample.js」は，jQueryのサンプルなので，削除しましょう。今回作成するページは，index.htmlなので，「⁠task」プロジェクトを選択した状態で，右クリック→「⁠New⁠」⁠→「⁠HTML file」を選択します。

表示されたウィンドウで，ファイル名欄にindex.htmlと入力して「Finish」をクリックします。

するとproject viewにindex.htmlが現れ，中央のエディットエリアにindex.htmlのソースが表示されます。