フォーム上でのデータの非表示、表示、およびロード
ページは対話式にする必要があります。つまり、ユーザ・アクションに応答するようにします。特に、作成したフォームは以下のように動作する必要があります。
-
既定では、ページにフォームは表示されません。
-
Contact テーブルの行にある edit リンクをクリックすると、ページにフォームが表示され、選択した連絡先のデータがフォーム・フィールドに表示されます。
このアクティビティは、クライアント側の JavaScript 関数を使用して実装します。これらの関数は、ページ上のユーザのアクションに応答して、ブラウザ内部で実行されます。
最初に、以下のクライアント側 JavaScript 関数を HomePage.cls に追加します。この関数は XDATA Contents ブロックの後に追加してください。
ClientMethod showContactForm(id) [ Language = javascript ]
{
var controller = zenPage.getComponentById('contactData');
controller.setProperty('modelId',id);
var contactFormGroup=zenPage.getComponentById("contactFormGroup");
contactFormGroup.setProperty('hidden',false);
}
このメソッドは、以下を実行します。
-
<controller> 要素の modelId 属性の値を、メソッドに渡される ID 値に設定します。これにより、controller コンポーネントは、指定された Contact オブジェクトのデータをフォームにロードします。
-
<fieldSet> 要素の hidden 属性の値を “false” に変更します。これにより、ページに fieldSet コンポーネントとその内容が表示されます。
次に、<fieldSet> 要素の hidden 属性の既定値を “true” に変更します。これにより、fieldSet コンポーネントとその内容が既定でページに表示されなくなります。
<fieldSet id="contactFormGroup" hidden="true" legend="Edit Contact">
</fieldSet>
最後に、<column> 要素では、tablePane の edit リンク列を定義します。この <column> は既に定義されています。
<column header="" width="5%" linkCaption="edit"
link="javascript:zenPage.showContactForm('#(%query.ID)#');"/>
ユーザがリンクをクリックしたときの動作は、link 属性の値により決まります。この場合、リンクをクリックすると、showContactForm が実行されます。link については、以下の点に注意してください。
-
showContactForm の呼び出しには zenPage オブジェクトが使用されます。
-
tablePane 行で表される Contact オブジェクトの ID 値を showContactForm に渡します。ページの生成時に、実行時式 #(%query.ID)# がこの値を関数呼び出しに挿入します。
zenPage オブジェクトの詳細は、"Zen アプリケーションの開発" の "Zen アプリケーション" のセクションにある "%page および zenPage" を参照してください。
Zen 実行時式の詳細は、"Zen アプリケーションの開発" の "Zen アプリケーション" のセクションにある "Zen 実行時式" を参照してください。