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.

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

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

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