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