Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

演習 2 : 電話番号の編集フォームの追加

Zen MVC を使用して、アプリケーションの電話番号編集フォームを作成します。手順の概要と要件は以下のとおりです。

  1. PhoneNumberModel という名前のモデル・クラスを作成します。このクラスには、以下の特徴があります。

    • ContactIDNumber、および PhoneNumberType という 3 つのプロパティを持ちます。これらのプロパティは、親の Contact オブジェクトのオブジェクト ID、PhoneNumber オブジェクトの Number プロパティと PhoneNumberType プロパティをそれぞれ表します。

    • PhoneNumberType プロパティ宣言は、ZENSQL パラメータを使用して、プロパティに指定できる値の範囲を定義します。

    • %OnOpenSource%OnLoadModel%OnStoreModel%OnNewSource、および %OnDeleteSource というコールバック・メソッドを実装しています。これらのメソッドのほとんどは、ContactModel の対応するメソッドと似ています。ただし、%OnStoreModel は、PhoneNumber オブジェクトが新規で、まだ保存されていない場合に対処する必要があります。PhoneNumber オブジェクトを初めて保存する場合は、その前に、これを親の Contact オブジェクトに関連付ける必要があります。

  2. dataController コンポーネントを HomePage.cls に追加します。modelClass 属性の値を、手順 1 で作成したモデル・クラスの “ZenTutorial.PhoneNumberModel” に設定します。

  3. form コンポーネントを HomePage.cls に追加します。要件は以下のとおりです。

    • controllerId 属性の値は、dataControllerid 属性の値に一致します。

    • text コンポーネントを使用して Number データを表示し、dataCombo コンポーネントを使用して PhoneNumberType 情報を表示します。

    • ユーザは [Save] ボタンをクリックして、フォーム上で行われた更新をデータベースに保存します。[Delete] ボタンもあり、これをクリックすると、フォームに現在表示されている PhoneNumber オブジェクトを削除できます。

    • フォームは既定では非表示で、ユーザが電話番号テーブルの edit リンクをクリックすると表示されます。

  4. new phone リンクを追加します。ユーザがリンクをクリックすると、newPhone メソッド (以下を参照) が呼び出されます。ページにこのリンクが表示されるのは、電話番号テーブルを表示する場合のみであることに注意してください。

  5. showPhoneForm メソッドを HomePage.cls に追加します。このメソッドの要件は以下のとおりです。

    • これはクライアント側 (JavaScript) メソッドです。

    • 電話番号テーブルの行にある edit リンクをクリックすると、このメソッドが呼びされます。リンクによって、テーブルの行に表示されている PhoneNumber の ID が関数に渡されます。

    • dataController コンポーネントを使用して、指定された PhoneNumber の情報を電話番号の編集フォームにロードします。

    • これは、Phone 編集フォームを “表示” します。つまり、これにより、HomePage.cls はフォームを表示するようになります。

  6. クライアント側の savePhoneNumber 関数を HomePage.cls に追加します。要件は以下のとおりです。

    • フォームの [Save] ボタンをクリックすると実行されます。

    • dataController コンポーネントを使用して、変更された電話番号をデータベースに保存します。

    • 電話番号テーブルに表示されている情報が更新されます。

  7. クライアント側の newPhone 関数を HomePage.cls に追加します。要件は以下のとおりです。

    • 電話番号情報を編集するためのフォームを表示します。

    • dataControllercreateNewObject メソッドを呼び出します。

    • dataControllersetDataByName メソッドを使用して、PhoneNumberModelContactID プロパティの値を直接設定します。ContactID プロパティを、Contact テーブルで現在選択されている連絡先の ID 値に設定します。

  8. クライアント側の deletePhone を追加します。電話番号フォームの [Delete] ボタンによって、このメソッドが呼び出されます。メソッドは、フォームに現在表示されている PhonObject を削除します。

  9. Phone 編集フォームに、以下のクライアント側検証を追加します。

    • Number を含むフィールドは必須フィールドです。

    • Number 値に対する送信値の形式は、nnn-nnn-nnnn です。

FeedbackOpens in a new tab