What XPage Is
How It Works
A Case Study
View Pages
      Multi-Row
      Single-Row
      Hybrid
Insert Pages
      Hybrid
      Single-Row
Edit Pages
Search Pages
Delete Pages
      Single-Row
      Hybrid
Overall Features
      Page Features
Engineer's View
      System Catalog
      Page Types
      View Pages
      Insert Pages
      Edit Pages
      Search Pages
      Delete Pages

SourceForge Logo

 

Hybrid View Pages

In the two previous sections, we studied multi-row and single-row view pages.  In practice, combination of these two types are sufficient for displaying every kind of information available to the application.  But an interesting feature of the view pages is that they are able to simultaneously display information retrieved from two data sources.  In other words, it is possible to simultaneously include the <top> and <body> tags in a single view page.  This feature allows the developer to display relevant information from two data sources in a single view.  In information systems, most of the relationships between the entities are of the one-to-many type.  In hybrid view pages, we can display the "one" side of the one-to-many relationships in a <top> tag and the "many" side in a <body> tag.  We use this method to include the email addresses associated with the selected contact in the revised contactdetail page:

<?xml version="1.0" encoding="UTF-8"?>

<page type="view">
  <title>Contact Detail</title>
  <icon>contactdetail.gif</icon>
  <top>
    <querysource>xmlquery/contact.xml</querysource>
    <pageparam>id</pageparam>
    <fields>
      <field name="name" caption="First Name"/>
      <field name="lastname" caption="Last Name"/>
      <field name="phone" caption="Phone#"/>
      <hr/>
      <field name="address" caption="Address"/>
      <link name="linkaddemail" on="id" target="emailadd" caption="New Email" text="Add New Email..."/>
    </fields>
  </top>
  <body>
    <querysource>xmlquery/email.xml</querysource>
    <pageparam>contactid</pageparam>
    <fields>
      <cfield name="email" caption="Email Address" code="formatemail"/>
      <field name="comment" caption="Comments"/>
      <link name="linkeditemail" on="id" target="emailedit" caption="Edit"/>
      <link name="linkdeleteemail" on="id" target="emaildelete" caption="Delete"/>
    </fields>
  </body>
  <code name="formatemail" language="php">
    <![CDATA[
    $anchor = "<a href=\"mailto:$source\">$source</a>";
    return $anchor;
    ]]>
  </code>
</page>

In this page, there are two separate <top> and <body> sections, each having its own <querysource> and <pageparam> tags.  It is up to the developer to specify the proper queries and parameters so that the relevant information is extracted from the database.

The <top> section in the definition of the revised contactdetail page is similar to the <top> section in the first version of this page.  The purpose of the <body> section is displaying the email addresses that are associated with the selected contact.  The query used in this section is stored in email.xml and is as follows:

SELECT id, contactdid, email, comment FROM email

This query returns every row in the email table.  However the <pageparam> tag will be used to apply a filter to the query so that only the rows that are related to the selected contact are retrieved.  This tag defines contactid as the attribute that should receive the parameter.  The contactid attribute is the foreign key of the email table and references the contact table.   Upon clicking the "Detail..." link in the contact list page, the value of the id of the selected contact is sent to this page; so by retrieve those rows of the email table for which the contactid attribute is equal to the received parameter, we will retrieve all the email addresses associated with the contact.  The output of this page is shown in the following figure.


Contact detail page in browser

There are four columns in the <body> section of the page definition.  The first column is a computed field which converts the email address to a mailto link, rendering it as a clickable email address.  The second column displays the comment associated with the email address.  The next two columns are two links which direct the user to other pages designed for updating or deleting email addresses.

It is useful to compare definition of the "Add New Email" link displayed in the <top> section, with the definition of the "Edit" links displayed in the <body> section.  The Add New Email link takes the user to an insert page, where s/he can input a new email address for the selected contact.  The Edit link takes the user to an edit page for modifying a single email address or its comment.  In the describing XML document, both links specify--in the "on" attribute--that the value of the "id" attribute should be sent their target pages.  However it should be noted that the id attribute in the <top> section is different from the id attribute in the <body> section.  In the <top> section the source of data is the contact table and the id attribute is the id of the contact, but in the <body> section the data source is the email table and the id attribute is just the serial number of the row.