演習 2 : 電話番号の編集フォームの追加
Zen MVC を使用して、アプリケーションの電話番号編集フォームを作成します。手順の概要と要件は以下のとおりです。
-
PhoneNumberModel という名前のモデル・クラスを作成します。このクラスには、以下の特徴があります。
-
ContactID、Number、および PhoneNumberType という 3 つのプロパティを持ちます。これらのプロパティは、親の Contact オブジェクトのオブジェクト ID、PhoneNumber オブジェクトの Number プロパティと PhoneNumberType プロパティをそれぞれ表します。
-
PhoneNumberType プロパティ宣言は、ZENSQL パラメータを使用して、プロパティに指定できる値の範囲を定義します。
-
%OnOpenSource、%OnLoadModel、%OnStoreModel、%OnNewSource、および %OnDeleteSource というコールバック・メソッドを実装しています。これらのメソッドのほとんどは、ContactModel の対応するメソッドと似ています。ただし、%OnStoreModel は、PhoneNumber オブジェクトが新規で、まだ保存されていない場合に対処する必要があります。PhoneNumber オブジェクトを初めて保存する場合は、その前に、これを親の Contact オブジェクトに関連付ける必要があります。
-
-
dataController コンポーネントを HomePage.cls に追加します。modelClass 属性の値を、手順 1 で作成したモデル・クラスの “ZenTutorial.PhoneNumberModel” に設定します。
-
form コンポーネントを HomePage.cls に追加します。要件は以下のとおりです。
-
controllerId 属性の値は、dataController の id 属性の値に一致します。
-
text コンポーネントを使用して Number データを表示し、dataCombo コンポーネントを使用して PhoneNumberType 情報を表示します。
-
ユーザは [Save] ボタンをクリックして、フォーム上で行われた更新をデータベースに保存します。[Delete] ボタンもあり、これをクリックすると、フォームに現在表示されている PhoneNumber オブジェクトを削除できます。
-
フォームは既定では非表示で、ユーザが電話番号テーブルの edit リンクをクリックすると表示されます。
-
-
new phone リンクを追加します。ユーザがリンクをクリックすると、newPhone メソッド (以下を参照) が呼び出されます。ページにこのリンクが表示されるのは、電話番号テーブルを表示する場合のみであることに注意してください。
-
showPhoneForm メソッドを HomePage.cls に追加します。このメソッドの要件は以下のとおりです。
-
これはクライアント側 (JavaScript) メソッドです。
-
電話番号テーブルの行にある edit リンクをクリックすると、このメソッドが呼びされます。リンクによって、テーブルの行に表示されている PhoneNumber の ID が関数に渡されます。
-
dataController コンポーネントを使用して、指定された PhoneNumber の情報を電話番号の編集フォームにロードします。
-
これは、Phone 編集フォームを “表示” します。つまり、これにより、HomePage.cls はフォームを表示するようになります。
-
-
クライアント側の savePhoneNumber 関数を HomePage.cls に追加します。要件は以下のとおりです。
-
フォームの [Save] ボタンをクリックすると実行されます。
-
dataController コンポーネントを使用して、変更された電話番号をデータベースに保存します。
-
電話番号テーブルに表示されている情報が更新されます。
-
-
クライアント側の newPhone 関数を HomePage.cls に追加します。要件は以下のとおりです。
-
電話番号情報を編集するためのフォームを表示します。
-
dataController の createNewObject メソッドを呼び出します。
-
dataController の setDataByName メソッドを使用して、PhoneNumberModel の ContactID プロパティの値を直接設定します。ContactID プロパティを、Contact テーブルで現在選択されている連絡先の ID 値に設定します。
-
-
クライアント側の deletePhone を追加します。電話番号フォームの [Delete] ボタンによって、このメソッドが呼び出されます。メソッドは、フォームに現在表示されている PhonObject を削除します。
-
Phone 編集フォームに、以下のクライアント側検証を追加します。
-
Number を含むフィールドは必須フィールドです。
-
Number 値に対する送信値の形式は、nnn-nnn-nnnn です。
-