Skip to main content

This is documentation for Caché & Ensemble.

For information on converting to InterSystems IRISOpens in a new window, see the InterSystems IRIS Migration Guide and Migrating to InterSystems IRIS, both available on the WRC Distributions pageOpens in a new window (login required).

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>
Copy code to clipboard

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>
Copy code to clipboard

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 window