RadPHP XE2で始めるモバイルアプリ開発（iOS編）

ドラッグ&ドロップのビジュアル操作でPHPによるモバイルアプリを開発

アプリを完成させる

モバイル向けの表示を制御するMobileThemeコンポーネント

　先ほど配置したMobileThemeコンポーネントには、コンポーネントのスタイルを変更するためのテーマが用意されています。

　用意されているテーマに関しましては、以下のサイトで確認することができます。

• http://docwiki.embarcadero.com/RadPHP/en/Mobile_Theming

　ColorVariationとして用意されている値を利用して、コンポーネントの色を設定したいので、デザイナ上でMobileThemeコンポーネントを選択し、オブジェクトインスペクタ上で、ColorVariationプロパティの値をcvMediumに変更します。

　次に、デザイナ上でMButtonを選択し、オブジェクトインスペクタ上で、Captionプロパティの値を"変更"と設定します。Captionプロパティの値を変更すると、デザイナ上のボタンの文字も同時に変更されます。

　このように、デザイナ上で実際に表示されるイメージを確認しながら設計できるのも RadPHPの大きな特徴の一つです。

　さらに、先程MobileThemeコンポーネントで設定した色を反映させるため、Themeプロパティの値をMobileTheme1に設定します。これで先程MobileThemeで設定したcvMediumの色がこのMButtonコンポーネントに反映されます。

　3つのLabelコンポーネントは、オブジェクトインスペクタ上で Captionプロパティの値を、それぞれ"Min"、"Max"、"値" に変更します。

　また、MEditコンポーネントとMSliderコンポーネントのThemeプロパティの値を、MobileTheme1に設定します。

　以上の設定が終わったところで、画面上は図のようになります。

図9 - 完成した画面

　このアプリでは、それぞれのEditの所に設定された値を、Sliderの最小値、最大値、現状の値としてそれぞれ設定するという簡単な動作を実装します。

イベントハンドラの記述

　再びデザイナ上でMButtonコンポーネントを選択し、マウスでダブルクリックすると、ボタンをクリックした際に動作するOnClickのイベントが自動生成されます。（または、オブジェクトインスペクタ上で、「プロパティ」タグから「イベント」タグに変更してOnClickの右の空白部分をダブルクリックしても同じようにイベントが生成されます）。

　この生成されたイベント部分に、コードを記述することでアプリケーションにいろいろな動作を行わせることができます。

　ここでは、MSliderコンポーネントのMinValue, MaxValue, Valueのそれぞれのプロパティに、MEditで入力された値を代入するだけのコードを記述します（本来は入力された値が数値であることを確認するためのコードなどが必要となりますが、この記事は開発手順を学ぶことが目的のため割愛します）。

　コンポーネントのプロパティの設定のコードはいたって簡単です。太字部分の3行を追加するだけです。

function MButton1Click($sender, $params)
{
     $this->MSlider1->MinValue = $this->MEdit1->Text;
     $this->MSlider1->MaxValue = $this->MEdit2->Text;
     $this->MSlider1->Value = $this->MEdit3->Text;
}

　$thisは、ベースとなるフォームを示します。例えば

    $this->MSlider1->MinValue

は、このフォーム上にあるMSlider1コンポーネントのMinValueプロパティを表します。

　このあと、PhoneGapウィザードを使用して、目的の形式にコンバートするために以下のプロパティを設定しておきます。

• Unit1の UseAjax プロパティの値を True
• Unit1の UseAjaxUri プロパティの値を http://127.0.0.1:3571/unit.php

　このローカルホスト（127.0.0.1）の後のポート番号は、IDEのメニューにあります ［ツール］-［オプション］で「内蔵Webサーバー」を選択し、表示されたポート番号（デフォルトでは3571）を設定します。

図10 - 内蔵Webサーバーのオプション設定

　これで、アプリケーションは完成です。IDEのメニューより［ファイル］-［すべて保存］を選び、ここではMobileTestというフォルダを作成し、ファイルを保存します（ファイル名はデフォルトの名前のままでも構いません）。

開発環境で実行してみる

　すぐに実機で実行してみたいものですが、まず、開発環境のWindows上でWebアプリケーションとしての動作を確認してみましょう。ここで使用するのが、最初にセットアップしたGoogle Chromeです。

　IDEのメニューから［実行］-［実行］を選択するか、ツールバー上の緑の矢印ボタン（図参照）をクリックすることで、作成したアプリケーションをWebブラウザ上で実行し動作を確認することができます。

図11 - 実行ボタン

　デフォルトのSliderの最小値は0、最大値は10、値は5となります。

図12 - ブラウザで実行

　それぞれの Editの部分に適当な値を入れて、「変更」のボタンをクリックすると、値が変更されSliderのバーの位置が変わるのを確認できます。またこのSliderのバーを左右に動かすと、変更された最小値・最大値を確認することができます。

図13 -Sliderバーの動き

　これでアプケーションの用意はできました。