Building JSP Applications with BC4J Data Tags


An Oracle Technical White Paper

December 1, 2000

Contents

• Introduction
• The Oracle JDeveloper 3.2 BC4J tag Library
• Wizard Support for the BC4J Data Tag Library
• Building a JSP application with the BC4J Data Tag Library
• Summary

Introduction

As of Oracle JDeveloper version 2.0, there has been substantial support for building HTML based applications using server-side Java. The DBServlet provided a simple way to create Master-Detail or Single Table Web applications in seconds. With JDeveloper 3.0 and 3.1 came the introduction of JavaServer Page (JSP) support, the JDeveloper Web Bean implementation, and easy to use wizards which made generation of JSP applications based on Business Components for Java (BC4J) extremely easy. What remained a bit of a challenge however was customizing the generated DBServlet and JSP applications which required additional Java coding.

Oracle JDeveloper 3.2 addresses this issue directly by offering an extremely easy to use JSP 1.1 compliant custom tag library. BC4J Data Tags provide a simple way of binding JSP pages to Business Components data sources. (JSP 1.1 is the Javaserver Page API defined by the Java 2 Enterprise Edition architecture for which JDeveloper 3.2 supports.)

By offering a set of easy to use custom JSP tags which provide low level access to Business Components data, it is now incredibly easy to design and build JSP database applications with complete control of both the HTML design and the database access operations. Since the developer no longer has to write Java code to interact with BC4J data or customize the User Interface, the JSP application can be comprised entirely of HTML and JSP tags. JSP developers now have the flexibility to use their favorite visual HTML editors in conjunction with JDeveloper to design the exact appearance of their JSP application.

Oracle JDeveloper 3.2 also offers extensive wizard support for productively working with BC4J JSP Data Tags. The JSP Element wizard has been augmented to provide intelligent selection of Data Tag properties. There is also a new wizard, called the DataPage wizard, which can generate different types of databound JSP pages based on BC4J View Objects.

Also included with JDeveloper 3.2 is the new Online Orders JSP sample application. The Online Orders sample application is a fully functional JSP application which employs the usage of the new Data Tag library. This application will be used as a reference throughout this paper.

• Efficiently managing the Application Module connections.
• Presenting, navigating and editing BC4J data.
• Building databound HTML Forms.

The following is brief description and usage example of the most essential Data Tags for building a complete JSP application. A complete description of the entire Data Tag library is contained in the JDeveloper documentation.

Required Tags: (Any JSP page utilizing Data Tags must contain these at a minimum.)

• A JSP directive specifying the location of the Tag Library Descriptor (TLD) file.
  
  Example:
  <%@ taglib uri="/technology/webapp/DataTags.tld" prefix="jbo" %>
  
  As per the JSP 1.1 specification, the TLD file is an XML document which defines a set of JSP tags and their associated properties. The tags specified in the TLD file must have corresponding classes in the classpath of the runtime environment.
  
  
• Data Connection Tags
  • ApplicationModule - Specifies a BC4J Application Module to be used by the JSP page.
    
    Example:
    <jbo:ApplicationModule configname="OnlineOrders.OnlineOrdersModule.LocalConfig" id="OnlineOrdersModule" username="bc4j" password="bc4j" />
    
    This examples shows the Application Module used for the Online Orders JSP sample application fo JDeveloper 3.2.
    
    
  • Datasource - Specifies a View Object to be used as a datasource in the JSP page.
    
    Example:
    <jbo:DataSource id="category" appid="OnlineOrdersModule" viewobject="CategoryView" />
    
    

Optional Tags: (These tags are optional depending on the needs of the application.)

• Data Presentation & Navigation
  • ShowValue - Displays the text value of a single column from a View Object (table).
    
    Example:
    <jbo:ShowValue datasource="category" dataitem="Name" />
    
    
  • RenderValue - Displays a rendered value of data from single column from a View Object. This tag is used when the column contains data types other than text such as an image or sound.
    
    Example:
    <jbo:RenderValue datasource="inventory" dataitem="Image" />
    
    
  • RowsetIterate - A simple loop iterator which loops through all the records from a View Object's query. As this tag iterates it advances the BC4J record pointer to the next consecutive record. Any HTML content including JSP tags between it's begin and end tag will be repeatedly rendered.
    
    Example:
    <jbo:RowsetIterate datasource="category">
    ... HTML ...
    <jbo:ShowValue datasource.... >
    ... HTML ...
    </jbo:RowsetIterate>
    
    
  • RowsetNavigate - Allows complete navigational control of the BC4J record pointer. The navigation options are: Next, Previous, First, and Last.
    
    Example:
    <jbo:RowsetNavigate datasource="category" action="Next">
    
    
• Data Manipulation (DML)
  • Row - Identifies a specific Row in a BC4J View Object. It also allows for basic row operations such as create, delete, and find.
    
    
  • SetAttribute - Sets the value of a specific attribute of a View Object. (Operates within the Row tag.)
    
    Example:
    <jbo:Row id="newOrdRow" datasource="emp" action="Create">
    <jbo:SetAttribute dataitem="name" value="scott" />
    </jbo:Row>
    
    
  • Postchanges - Posts all changes to the database.
    
    Example:
    <jbo:PostChanges appid="OnlineOrdersModule" />
    
    
  • Commit - Performs a database commit on any changed records.
    
    Example:
    <jbo:Commit appid="OnlineOrdersModule" />
    
    
  • Rollback - Rolls back any uncommitted changes on the database.
    
    Example:
    <jbo:Rollback appid="OnlineOrdersModule" />
    
    
    
    
• HTML Form Input Data Tags
  The BC4J Data Tag library also provides HTML form input tags which provide easy binding of HTML form elements to View Object attributes. The HTML form input tags perform two main functions: 1) Provides a consistent mapping of HTML parameter to View Object attribute. 2) Allows for easy creation of databound HTML select controls such as radiogroups, poplists, multi-selects etc..
  
  
  • InputText - Renders an HTML Input field of type text with the same name as the View Object's attribute name.
    
    
  • InputSelect/InputSelectGroup - Provides an easy way to construct databound HTML select controls. This tag can display either single or multiple select controls in either radiogroup button or poplists.
    
    Example:
    <jbo:inputselect datasource="dept" dataitem="Deptno" displaydatasource="dept" displaydataitem="Deptno" displayvaluedataitem="Deptno" />
    
    
  • InputDate - Renders a popup window which allows a date selection.
    
    
  • InputLOV - Renders a popup window which allows for selection from a queried list. The LOV selection list window also displays a search field that lets the user limit the selection choices displayed by the LOV list by entering a value that matches the display attributes of the LOV.
    

JDeveloper 3.2 provides two wizards for interacting with the BC4J Data Tags. The JSP Element Wizard has support for editing/adding Data Tags in an existing JSP page. The DataPage wizard is a new wizard which generates completely functional JSP pages based on BC4J View Objects.

JSP Element Wizard Support

The JDeveloper 3.2 JSP Element Wizard contains a new node for the BC4J Data Tag library.

JSP DataPage Wizard

In addition to providing support for adding Data Tags to existing JSP pages such as with the JSP Element Wizard, JDeveloper 3.2 also provides a new wizard for generating entirely new JSP pages with BC4J Custom JSP tags. The JSP DataPage generates functional, databound JSP pages which performs specific tasks such as displaying results of a query, rendering an Edit Form, an insert form or even a query form. Once generated, the pages can be visually customized using either JDeveloper or external HTML editors.

The following figure is the first step of the DataPage Wizard. In this page, the developer selects the type of JSP page (form) he/she wishes to generate.

The JSP Page generation options are:

• Query Form - Generates an easy to understand functional set of JSP pages which act as an example of how to create Query Form using the Data Tags.
• Browse Form - Generates a simple JSP page which prints an HTML table of the resultset from a View Object query.
• Edit Form - Generates a functional Edit form which clearly demonstrates how to create an Edit form complete with a navigation tool bar.
• Insert Record Form - Generates an example set of JSP pages utilizing Data Tags which allows users to insert a record.

In the wizard's second step, the developer selects which BC4J View Object from which to generate the JSP page on. In this example, the View Object, CategoryView, from the Online Orders Sample application is chosen. Upon completion of the wizard a simple yet fully functional "Browse" JSP page will be generated which when run returns an HTML table of results from the default query of the "CategoryView" view object.

Once generated, the JSP page can be immediately tested in JDeveloper's internal JSP runtime environment.

Building a JSP Application with the BC4J Data Tag Library

JDeveloper's Data Tag library provides an incredible amount of flexibility when building JSP applications. Applications can either be built from an existing HTML design, or an application can be partially generated and then the HTML can be customized. In both cases JDeveloper provides wizards which enable either strategy.

Let's take the case where an entire application is first designed initially as HTML mock up. Web Designers will use their own preferred HTML and graphical editing tools to create a non-functional HTML prototype design.
Here is an example of an HTML design of the JDeveloper 3.2 Online Orders JSP sample application. It is an HTML frames based design template with random text serving only to give an appearance of what the finished application will look like.

Figure 6: The Online Orders JSP Application Design Mock-up

Once a design prototype is complete, the HTML files can be converted into JSPs and all remaining development can be done with Oracle JDeveloper. This includes developing a business logic layer to handle the application's functionality as well as the communication to the database.

The process of converting an HTML design into a JSP application is fairly straightforward, the HTML file extensions (.htm) are converted to JSP extensions (.jsp) and the files are copied into the HTML root directory of an existing project in JDeveloper. The next step is to begin binding the JSP pages to an existing Business Logic (Data) layer. This can easily be done by using the JSP Element wizard.

For some pages in the application, a more productive approach may be to generate them initially using the DataPage wizard. In the Online Orders application, the left portion of the frameset contains a navigational page which presents all of the categories for the items in the Online Orders application. Instead of manually creating this navigational page, a simple Browse page can be created and then customized visually.

The figure below shows a simple browse form after it has been modified to match the Online Orders application design scheme. This page will serve as a simple navigation tool which allows users to select items by Category. The text input form was added using an HTML editor. It simply sends a search criteria in the form of a HTML parameter string to a "Search Results" page which parses the parameter string and reports any matching records.

Enhanced JSP Development

By using a combination of an external HTML visual design tool, and the JDeveloper Wizard enhanced development environment, all of the remaining databound pages of the Online Orders application can easily be created.

For example in creating the "Search Results" (srch_results.jsp) page, which serves as a generic query report page which renders data about the individual items available for sale, the initial static HTML design was converted into a databound JSP page using the new JSP Element Wizard. A RowsetIterate Data Tag along with presentation Data Tags to render both text and image data were added. Even after the Data Tags were included, the developer has the option of invoking an external HTML editor to continue visually designing the JSP page.

In the following figures the srch_results.jsp page is visually edited in an external HTML editor invoked from JDeveloper's Tools menu..

Figure 8: JDeveloper Invoking an External HTML Editor

An external HTML editor, invoked by JDeveloper, augments JDeveloper's HTML editing capabilities by allowing a WYSIWYG HTML design environment. Once the changes are saved in the HTML editor, JDeveloper allows the developer to accept or reject the modifications performed by the external editor.

Figure 9: Using an external HTML editor with JDeveloper

Now that both the databinding to Business Components and all visual customizations are performed, the application is complete. Below is a screenshot from the finished Online Orders JSP application.