Skip to main content

Exercise 2: Adding the Phone Edit Form

Use Zen MVC to created a phone edit form for the application. Here is an outline of the steps and requirements:

  1. Create a model class named PhoneNumberModel. This class has the following features:

    • It has three properties: ContactID, Number and PhoneNumberType. The properties represent, respectively, the object ID of the parent Contact object, the Number, and PhoneNumberType properties of the PhoneNumber object.

    • The PhoneNumberType property declaration uses the ZENSQL parameter to define the range of possible values for the property.

    • It implements the following callback methods: %OnOpenSource, %OnLoadModel, %OnStoreModel, %OnNewSource, and %OnDeleteSource. For the most part these methods are analogous to their counterparts in ContactModel. Note, however, that %OnStoreModel must handle the case where the PhoneNumber object is new and has yet to be saved. Before saving a PhoneNumber object for the first time, the method must associate it with a parent Contact object.

  2. Add a dataController component to HomePage.cls. Set the value of the modelClass attribute to “ZenTutorial.PhoneNumberModel” – the model class created at step 1.

  3. Add a form component to HomePage.cls. Here are some requirements:

    • The value of the controllerId attribute matches the value of the dataController id attribute.

    • It displays Number data using a text component and PhoneNumberType information using a dataCombo component.

    • It has a Save button that the user can click to save any updates made on the form to the database. It also has a Delete that the user can click to delete the PhoneNumber object currently displayed on the form.

    • The form is hidden by default and displayed when the user clicks an edit link on the phone table.

  4. Add a new phone link. When the user clicks the link, it invokes the newPhone method (described below). Note that the page displays this link only when it displays the phone table.

  5. Add a showPhoneForm method to HomePage.cls. Here are the requirements for the method:

    • It is a client-side (JavaScript) method.

    • It is invoked when the user clicks an edit link on a row of the phone table. The link passes to the function the ID of the PhoneNumber displayed by the table row.

    • It uses the dataController to load the information for the specified PhoneNumber into the Phone Edit form.

    • It “unhides” the Phone edit form. That is, it causes HomePage.cls to display the form.

  6. Add a client-side savePhoneNumber function to HomePage.cls. Here are some requirements:

    • It executes when the user clicks the Save button on the form.

    • It uses the dataController to save the data for the modified phone number to the database.

    • It updates the information displayed on the phone number table.

  7. Add a client-side newPhone function to HomePage.cls. Here are some of the requirements:

    • It displays the form for editing phone number information.

    • It invokes the dataController createNewObject method.

    • It directly sets the value of the PhoneNumberModel ContactID property using the dataController setDataByName method. It sets the ContactID property to the ID value of the contact currently selected on the contact table.

  8. Add a client-side deletePhone. The Delete button on the phone form invokes this method. The method deletes the PhonObject currently displayed on the form.

  9. Add the following client-side validation to the Phone edit form:

    • The field containing the Number is a required field.

    • The format of the submitted value for the Number value is nnn-nnn-nnnn.

FeedbackOpens in a new tab