演習 3 : その他の機能
この時点では、いくつかの機能を追加して、Zen Contacts をさらに使いやすくする必要のある場合があります。特に、選択されたユーザ・アクションに対応して、編集フォームと Phone テーブルを非表示にする必要があります。これらの機能を追加する手順は次のとおりです。
-
hideContactForm メソッドを HomePage.cls に追加します。このメソッドにより、Contact 編集フォームは非表示になります。要件は次のとおりです。
-
これはクライアント側 (JavaScript) メソッドです。
-
これは、form コンポーネントの reset メソッドを使用して、フォームをリセットします。
-
このメソッドは、setHidden メソッドを使用して、フォームを含む fieldSet コンポーネントを非表示にすることにより、フォームを非表示にします。
-
-
hidePhoneForm メソッドを HomePage.cls に追加します。このメソッドにより、Phone 編集フォームは非表示になります。要件は次のとおりです。
-
これはクライアント側 (JavaScript) メソッドです。
-
これは、form コンポーネントの reset メソッドを使用して、フォームをリセットします。
-
このメソッドは、setHidden メソッドを使用して、フォームを含む fieldSet コンポーネントを非表示にすることにより、フォームを非表示にします。
-
-
clearPhones メソッドを HomePage.cls に追加します。このメソッドにより、Phone テーブルは非表示になります。要件は次のとおりです。
-
これはクライアント側 (JavaScript) メソッドです。
-
このメソッドは、setHidden メソッドを使用して、Phone tablePane コンポーネントと new phone リンクを非表示にします。
-
これは、hidePhoneForm を呼び出して、Phone 編集フォームを非表示にします。
-
-
onselectrow 属性を Contact の <tablePane> 要素に追加します。テーブルの 1 行を選択すると、hideContactForm と clearPhones の両方が呼び出されるように、この属性の値を設定します。この属性は以下のようになります。
onselectrow="zenPage.clearPhones();zenPage.hideContactForm();"
-
onselectrow 属性を Phone の <tablePane> 要素に追加します。テーブルの 1 行を選択すると、hidePhoneForm が呼び出されるように、この属性の値を設定します。この属性は以下のようになります。
onselectrow="zenPage.hidePhoneForm();"