サーバーのインストール
作成したアプリケーションをテストするには、そのアプリケーションをローカルWorklightサーバーに公開する必要があります。そのための手順には、Worklightサーバーのインストール手順も含まれています。上記で作成したアプリケーションをビルドして実行することでテストするには、IBM Worklight Studio V5に含まれているローカル・サーバーを使用することができます。アプリケーションを右クリックして、「Build All and Deploy(すべてをビルドしてデプロイ)」を選択してください。すると、ポート8080でローカル・サーバーが起動し、プロジェクトがアクティブになり、アプリケーションがデプロイされてブラウザーでテストできる状態になります。
一連のイベントの進行状況は、コンソールに表示されます(図8を参照)。
ブラウザーでhttp://localhost:8080/consoleにナビゲートすることで、ローカル・サーバーのサーバー・コンソールにアクセスすることができます。コンソールにアクセスすると、デプロイされたTodoアプリケーションが表示されます。
アプリケーションの開発
反復型開発のプロセスを理解できるように、この「Hello World」アプリケーションでは、開発環境の構築からシミュレーションまでの最初の反復プロセスを実演します。第2回では、完全なWorklightアプリケーション開発モデルを紹介するために、このアプリケーションにTodoアプリケーションの実際の画面とアプリケーション・ロジックを追加します。この初歩的なアプリケーションを作成するには以下の手順を実行します。
1. JavaScriptライブラリーを選択します。
この例のために選択したJavaScriptライブラリーは、jQuery Mobileです。Dojo MobileやSenchaTouchなどのライブラリーを使用することもできます。あるいは、純粋なJavaScriptを使用して、アプリケーションを一から作成することもできます。
2. ライブラリーをダウンロードします。
この例では、以下のjQueryライブラリーをダウンロードする必要があります。
3. ファイルをWorklightに移します。
以下のファイルをcommon/jsフォルダーに移します。
- jquery-1.7.1.min.js
- jquery.mobile-1.1.0-rc.1.min.js
以下のファイルをcommon/cssフォルダーに移します。
- jquery.mobile-1.1.0-rc.1.css
- jquery.mobile.structure-1.1.0-rc.1.min.css
- jquery.mobile-1.1.0-rc.1/images
図11に、上記のファイルをWorklightプロジェクトに追加した後のファイル構造を示します。
4. テンプレート・コードを追加します。
jQuery Mobileのドキュメントに、単純なモバイル・アプリケーションの作成を開始するための標準的なボイラープレート・コードが記載されています(図12を参照)。このコードを必ず、Todoアプリケーションの<body>タグの中に含めてください。
5. 機器に固有の環境を作成します。
Todoアプリケーションは、Android機器とiPhone機器の両方を対象にビルドすることになっているため、それぞれの機器のタイプに対応するWorklight環境を作成する必要があります。まず、「Todo」フォルダーを右クリックして「Worklight」 > 「Worklight Environment(Worklight環境)」の順に選択し、「Next(次へ)」をクリックします(図13を参照)。
リストから「iPhone」と「Android phones and tablets(Androidフォンおよびタブレット)」を選択して、「Finish(完了)」をクリックします(図12を参照)」。これによって、iPhoneおよびAndroid用の追加プロジェクトと追加フォルダー構造が「Todo」フォルダーに作成されます。