ビューの追加

最後に、ビューを追加します。このチュートリアルでは、form コンポーネントを ZenTutorial.HomePage.cls に追加します。ユーザは、このフォームを使用して、選択した連絡先のデータを編集することができます。form を fieldSet の内側に配置することに注意してください。これにより、境界線と凡例を作成できることに加えて、フォームの非表示と表示を指定できます。

以下の <fieldSet> 要素と <form> 要素を、XDATA Contents ブロック内の <tablePane> 要素の後に配置します。

<fieldSet id="contactFormGroup" hidden="false" legend="Edit Contact">
<form id="contactForm" 
         controllerId="contactData" 
         layout="vertical"
         cellStyle="padding: 2px; padding-left: 5px; padding-right: 5px;">
</form>
</fieldSet>

<form> 要素に controllerId 属性があります。この属性の値によって、form コンポーネントが dataController コンポーネントに関連付けられます。これで、モデル、ビュー、およびコントローラがすべて接続されます。

次に、以下の入力コントロール (5 個の text コントロールと 1 つの dataCombo コントロール) を form に追加します。

<form id="contactForm" 
         controllerId="contactData" 
         layout="vertical"
         cellStyle="padding: 2px; padding-left: 5px; padding-right: 5px;">
         
<text label="Name:" dataBinding="Name" id="Name" name="Name" size="25"/>

<dataCombo label="Type:" dataBinding="ContactType" name="ContactType" 
                id="ContactType" size="25" dropdownHeight="150px"
                editable="false" /> 

<text label="Street:" dataBinding="Street" id="Street" name="Street" 
           size="25" />

<text label="City:" dataBinding="City" id="City" name="City" size="25"/>

<text label="State:" dataBinding="State" id="State" name="State" 
           size="2"/>

<text label="Zip Code:" dataBinding="Zip" id="Zip" name="Zip" 
           size="10"/>  
</form>

各入力コントロールには dataBinding 属性があります。この属性の値は、コントロールを、モデル・クラス (ここでは ZenTutorial.ContactModel) のプロパティに結合します。

Note:

text コンポーネントと dataCombo コンポーネントの詳細は、"Zen コンポーネントの使用法" の "Zen コントロール" のセクションを参照してください。