ONJava.com -- The Independent Source for Enterprise Java
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Web DbForms
Pages: 1, 2, 3, 4, 5

A Simple Example

Description: This JSP view (service.jsp) enables the user(s) to administer the services the agency provides to its customers. The user (an employee of the agency or call center agent) should get a list of all the existing services, along with textfields and buttons to update and delete data. Finally, an empty input mask for inserting new services is needed.

Underlying data.
Underlying data.


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 maxRows to "*" which has the effect that all rows will be shown at once. If there exist hundreds of services, we would like to set maxRows to "10," "20," or another limited number, and we would instantiate navigation buttons for scrolling between the pages. We will use that pattern later.

  • The errors tag shows a list of errors, if any occurred (i.e. duplicate key error, etc.).

  • The updateButton and deleteButton tags are placed in the body and therefore rendered for each row.

The result is shown in Figure 3:

Screen shot.
Figure 3. Managing services (service.jsp)

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.

Diagram.
Figure 4. Underlying data for customer_order.jsp


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 parentField and childField attributes. (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, navNextButton elements.

  • Insert Button: the navNewButton element navigates the user to an empty form to enter new data.

  • select Tag: In addition to textField and textArea tags, more complex elements like select, radio, and checkbox can be used for data visualization and manipulation. I have chosen a select tag to select the type of service a customer orders.

  • External data fetched by a tableData tag: This tag provides external data to radio, checkbox, or select tags. 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 field service.name and stored the value service.id in the associated field orders.service_id! The name our_services was defined to enable internal caching of data, which increases performance.

  • Using associatedRadio elements 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.

Screen shot.
Figure 5. Managing orders and customers with one single page (customer_order.jsp)

Pages: 1, 2, 3, 4, 5

Next Pagearrow