Web DbForms
Pages: 1, 2, 3, 4, 5
A Simple Example
Description: This JSP view ( |
|
Listing 1. -- service.jsp
<%-- import DbForms tag library --%>
<%@ taglib uri="/WEB-INF/taglib.tld" prefix="db" %>
<html>
<head>
<db:base/>
</head>
<body>
<db:errors/> <%-- show eventually occured errors --%>
<db:dbform tableName="service" maxRows="*" followUp="/service.jsp">
<%-- the header gets rendered one time --%>
<db:header>
<db:gotoButton caption="Menu" destination="/menu.jsp" />
<h1>Services we provide</h1>
<center><h3>Our existing services</h3></center>
<table border="5" width="60%" align="CENTER">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</db:header>
<%-- the body gets rendered for each data row in the query
it contains textfields and action buttons for manipulating data --%>
<db:body>
<tr>
<td><db:textField fieldName="id" size="5"/><;/td>
<td><db:textField fieldName="name" size="20" maxlength="30"/></td>
<td><db:textField fieldName="description" size="24" maxlength="255"/></td>
<td>
<db:updateButton caption="Update"/>
<db:deleteButton caption="Delete"/>
</td>
</tr>
</db:body>
<%-- the footer gets rendered 1 time
it contains a textfields for entering new datasets --%>
<db:footer>
</table>
<center><h3>Enter new service:</h3></center>
<table align="center" border="3">
<tr>
<td>Id</td>
<td><db:textField size="5" fieldName="id"/></td>
</tr>
<tr>
<td>Name</td>
<td><db:textField size="20" maxlength="30" fieldName="name"/></td>
</tr>
<tr>
<td>Description</td>
<td><db:textArea rows="4" cols="20" wrap="virtual" fieldName="description"/></td>
<tr>
</table>
<br><center><db:insertButton caption="Insert new service!"/></center>
</db:footer>
</db:dbform>
</body>
</html>
Remarks
We have set
maxRowsto "*" which has the effect that all rows will be shown at once. If there exist hundreds of services, we would like to setmaxRowsto "10," "20," or another limited number, and we would instantiate navigation buttons for scrolling between the pages. We will use that pattern later.The
errorstag shows a list of errors, if any occurred (i.e. duplicate key error, etc.).The
updateButtonanddeleteButtontags are placed in thebodyand therefore rendered for each row.
The result is shown in Figure 3:
|
An Example of Nested Forms
The following page (customer_order.jsp) gives you the functionality to manage the incoming orders of a customer. You are able to edit both orders of a customer and the customer data itself. Furthermore, you do not need to struggle with plain service IDs, but will be able to conveniently select the services from a select box by name.
|
Listing 2. customer_order.jsp
<%-- import DbForms tag library --%>
<%@ taglib uri="/WEB-INF/dbforms.tld" prefix="db" %>
<html>
<head>
<db:base/>
</head>
<body>
<db:errors/> <%-- show eventually occured errors --%>
<%-- the root form --%>
<db:dbform tableName="customer" maxRows="1" followUp="/customer_orders.jsp"
autoUpdate="false">
<db:header>
<db:gotoButton caption="Menu" destination="/menu.jsp" />
<h1>Customer</h1>
</db:header>
<db:body> <%-- the body shows the data of the current customer --%>
<table align="center">
<tr>
<td>Id </td>
<td><db:textField fieldName="id" size="4"/></td>
</tr>
<tr>
<td>First Name</td>
<td><db:textField fieldName="firstname" size="18"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><db:textField fieldName="lastname" size="18"/></td>
</tr>
<tr>
<td>Address:</td>
<td><db:textField fieldName="address" size="25" /></td>
</tr>
<tr>
<td>Postal code/City</td>
<td><db:textField fieldName="pcode" size="6"/> -
<db:textField fieldName="city" size="16"/> </td>
</tr>
</table>
<br>
<%-- table embedding the subform --%>
<table align="center" border="1">
<tr>
<td>
<center><p><b>Orders</b></p></center>
<%-- this is the begin of the subform:
the subform renders all the services the current customer has ordered --%>
<db:dbform tableName="orders" maxRows="3" parentField="id" childField="customer_id"
followUp="/customer_orders.jsp" autoUpdate="false">
<db:header>
<%-- code for showing existing orders of services for that customer --%>
<table>
<tr>
<td width="40"></td>
<td>service</td>
<td>orderdate</td>
</tr>
</db:header>
<db:body allowNew="false">
<tr>
<td width="40"><db:associatedRadio name="radio_order" /></td>
<td>
<db:select fieldName="service_id"> <%-- this allows the --%>
<db:tableData <%-- users of the application to --%>
name = "our_services" <%-- select services conveniently --%>
foreignTable = "service" <%-- from a select-box --%>
visibleFields = "name"
storeField = "id"
/>
</db:select>
</td>
<td><db:dateField fieldName="orderdate" size="14"/></td>
</tr>
</db:body>
<db:footer>
<tr>
<td width="40"></td>
<td><db:updateButton caption="Update Order" associatedRadio="radio_order"/></td>
<td><db:deleteButton caption="Delete Order" associatedRadio="radio_order"/></td>
</tr>
</table>
<%-- code for entering new orders of services --%>
<br><hr>
<table>
<tr>
<td>service</td>
<td>date</td>
<td></td>
</tr>
<tr>
<td>
<db:select fieldName="service_id">
<db:tableData
name = "our_services"
foreignTable = "service"
visibleFields = "name"
storeField = "id"
/>
</db:select>
</td>
<td><db:dateField fieldName="orderdate" size="10" /></td>
<td><db:insertButton caption="insert order" /></td>
</tr>
</table>
<center> <%-- navigating in the subform (in the list of orders of a customer --%>
<db:navFirstButton caption="<< First" />
<db:navPrevButton caption="< Previous" />
<db:navNextButton caption="Next >" />
<db:navLastButton caption="Last >>" />
</center>
</db:footer>
</db:dbform>
<%-- subform end --%>
</td>
</tr>
</table>
<%-- end of table embedding the subform --%>
<br><center>
<db:insertButton caption="Store this new Customer!" /> <%-- action buttons for --%>
<db:updateButton caption="Update Customer" /> <%-- editing data of --%>
<db:deleteButton caption="Delete Customer" /> <%-- customers --%>
</center>
</db:body>
<db:footer>
<br><center>
<db:navFirstButton caption="<< First" /> <%-- navigating in the --%>
<db:navPrevButton caption="< Previous" /> <%-- list of customers --%>
<db:navNextButton caption="Next >" />
<db:navLastButton caption="Last >>" />
<db:navNewButton caption"*"/>
</center>
</db:footer>
</db:dbform>
</body>
</html>
Remarks
With this page, we have demonstrated another couple of major features of DbForms:
Nested Forms: The structure of this page is similar to the structure shown in Figure 2: a main form has a sub-form inside its body. The sub-form is linked to its parent by the equality of data fields defined in the child form's
parentFieldandchildFieldattributes. (If there is more than one field defining this mapping, a list of fields may be provided, with each field separated from the other by characters like "," or ";" or "~".)Navigation Buttons: Because only one customer is visible at a time, the user needs a way to navigate between records. This functionality is provided by
navFirstButton,navLastButton,navPrevButton,navNextButtonelements.Insert Button: the
navNewButtonelement navigates the user to an empty form to enter new data.selectTag: In addition totextFieldandtextAreatags, more complex elements likeselect,radio, andcheckboxcan be used for data visualization and manipulation. I have chosen aselecttag to select the type of service a customer orders.External data fetched by a
tableDatatag: This tag provides external data toradio,checkbox, orselecttags. It may be used for cross-references to other tables. In our case, we initalized the select box with external data from the table "service." Be aware that you have to distinguish between the field(s) to be shown to the user and those to be stored in the associated field in the table. In our case, we have shown the fieldservice.nameand stored the valueservice.idin the associated fieldorders.service_id! The nameour_serviceswas defined to enable internal caching of data, which increases performance.Using
associatedRadioelements to mark rows of data for certain actions (in our case we mark "orders" for the actions "update" and "delete") saves a lot of space and makes the interface clearer. If we had to draw a button for all possible actions for each row of data, the page would not look very friendly.
|
