Adding the View
Finally, we add the view. In this case the view is a form component. When the user of our application selects a row on the table, the application loads the data for the selected PERSON into the form. The user can then update that data.
-
Add the following form component to PersonPage.cls. Place it in the XData Contents block between the <page></page> tags and after the tablePane component:
<form id="personForm" controllerId="personData" layout="vertical" cellStyle="padding: 2px; padding-left: 5px; padding-right: 5px;" hidden="true" align="center"> </form>
Note the following about the code:
-
The value of the controllerId connects the form component to the dataController.
-
The value of the hidden attribute is “true”. Our application dynamically hides and reveals the form. We add this functionality later in the tutorial.
-
-
Next, add the following text and textArea controls to the form. Place them between the <form></form> tags:
<text label="ItemId:" dataBinding="ItemId" id="ItemId" name="ItemId" size="15"/> <text label="Name:" dataBinding="Name" id="Name" name="Name" size="25"/> <text label="Hair:" dataBinding="Hair" id="Hair" name="Hair" size="25"/> <text label="Age:" dataBinding="Age" id="Age" name="Age" size="25"/> <textarea label="Phones:" dataBinding="Phones" id="Phones" name="Phones"/>
Each component's dataBinding attribute binds the component to a property of the model class.
-
Finally, add the following set of components immediately after the textArea component. This set of components creates one button: Save. The exercises ask you to add two additional buttons: New and Delete.
<hgroup> <button caption="Save" onclick="zenPage.savePerson();" /> </hgroup>
Note the following about the code:
-
It uses an hgroup component to arrange the button components horizontally on the form. By default the form arranges its subcomponents vertically. At present there is only a single button to “arrange”; however the exercises at the end of this part of the tutorial ask you to add two more.
-
The onclick attribute of the button component assigns a JavaScript function to handle the button click events. We add these functions later in the tutorial.
-