Skip to main content

Adding the View

Finally, we add the view, in this case a form component, to ZenTutorial.HomePage.cls. This form allows users to edit the data for a selected contact. Note that we place the form inside a fieldSet so that we can create a border and legend as well as hide and reveal the form.

Place the following <fieldSet> and <form> elements after the <tablePane> element in the XDATA Contents block:

<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>

Note the <form> element's controllerId attribute. The value of this attribute associates the form component with the dataController component. Now the model, view, and controller are all connected.

Next, add the following input controls, five text controls and one dataCombo control, to the 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>

Note the dataBinding attribute on each of the input controls. The value of this attribute binds the control to a property of the model class, in this case ZenTutorial.ContactModel.

Note:

To learn more about the text and dataCombo components, read the Zen Controls section of Using Zen Components.

FeedbackOpens in a new tab