Exercise 3: Additional Functionality

At this point you may want to add some features to make the Zen Contacts a bit more user friendly. In particular, the editing forms and the phone table should be hidden in response to selected user actions. Here are the steps for adding these features:

1. Add a hideContactForm method to HomePage.cls. This method hides the Contact editing form. Here are the requirements:

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

   • It resets the form using the form component reset method.

   • It hides the form, by hiding the fieldSet component that contains it, using the setHidden method.

2. Add a hidePhoneForm method to HomePage.cls. This method hides the Phone editing form. Here are the requirements:

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

   • It resets the form using the form component reset method.

   • It hides the form, by hiding the fieldSet component that contains it, using the setHidden method.

3. Add clearPhones method to HomePage.cls. This method hides the Phone table. Here are the requirements:

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

   • It hides the Phone tablePane and new phone link using the setHidden method.

   • It invokes hidePhoneForm to hide the Phone editing form.

4. Add an onselectrow attribute to the Contact <tablePane> element. Set the value of the attribute so that selecting a row in the table invokes both hideContactForm and clearPhones. The attribute looks like this:

   
   onselectrow="zenPage.clearPhones();zenPage.hideContactForm();"       
   
   

   

5. Add an onselectrow attribute to the Phone <tablePane> element. Set the value of the attribute so that selecting a row in the table invokes hidePhoneForm. The attribute looks like this:

   
   onselectrow="zenPage.hidePhoneForm();"