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:
-
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.
-
-
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.
-
-
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.
-
-
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();"
-
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();"