< Previous | Next >

Lesson 1.2: Connect to a database and display data on a Web page

In this lesson, you will learn how to connect to a database and display data records on a Web page. You will also learn how to add a relational records list to your Web page.

The Web site in this tutorial uses dynamic Web pages with JavaServer Faces components to access a database and display information on the page. This tutorial uses relational records and relational record lists to represent the data in a database so the data can be displayed on the page in the form of a data table or an ordinary HTML table. Java™ access beans are used by these components.

Data access beans are Java bean representations of enterprise beans. They are typically used in client programs that employ JavaServer Pages (JSP) files, servlets, or enterprise beans that interface with other enterprise beans. Access beans shield you from the complexities of managing enterprise bean life cycles. This means that you can program to enterprise beans as easily as you can program to Java beans, which simplifies your enterprise bean client programs and reduces your overall development time.

JavaServer Faces is a technology that helps you build user interfaces for dynamic Web applications that run on a server. The JavaServer Faces framework manages UI state across server requests and offers a simple model for the development of server-side events that are activated by the client. JavaServer Faces is based on a model-view-controller (MVC) framework. For JavaServer Faces, this means that the controller is a servlet, the model is represented by JavaBeans™, and the view is comprised of JavaServer Faces components with little or no application code. The goal of this model is to separate content from presentation.

Tools such as Faces Components to help you use this technology in your Web applications. Faces Components include a JavaServer Page (JSP) custom tag library for expressing a JavaServer Faces interface within a page. This wizard helps you create JSP files that are enabled to use the Faces components. Faces components let you develop a Web application by dragging components from a Faces drawer in the Palette view and dropping them on the Web pages you are creating.

For example, you can drag an input text field and drop it to a form on the page. Then you can drag and drop a Submit button next to the input text field. Finally, you can connect the input text field to your data source. This will enable end users to enter data from the Web application to your data source.

Another benefit of applications built using Faces components is that the user interface is rendered independently of the underlying program logic. This means that your applications can run and access data on different platforms, such as browsers or handheld devices.

Enhanced Faces Components drawer of the Palette.

Add a relational records list

In this lesson you will create a relational record list to represent all of the classified ads in the database. Then, you will connect to the database and select the table that holds the information you need in the relational record list. Finally, you will display this relational record list on the page in a data table.
  • Relational records connect to only one record from a database. In this case, a relational record represents a single classified ad from the sample database. Using a relational record, you can create a new record, edit an existing record, or delete an old record.
  • Relational record lists connect to more than one record from a database. In this case, a relational record list represents anywhere from two to all of the classified ads in the sample database.
  • Data tables display the data from a relational record list on the page. Data tables simply designate a place for the record lists; they do not format the data into rows and columns in the same way that an HTML table does.

    The data table is a component in a Faces JSP page that holds data objects such as a relational record list.Though a data table appears to have rows and columns like an HTML table, it does not work like an HTML table. If you wish to format input and output controls as in a table, you must use a Panel - Group Box from the Enhanced Faces Components drawer in the Palette. This is covered in Exercise 2.2: Formatting a Data Table.

    Using the Properties view, you can customize a data table in a variety of ways:
    • Add, remove, and change the order of columns
    • Format text and background
    • Add header, footer, and margins
    • Add paging for results display

To create a new relational record list:

  1. In the Enterprise Explorer view of the Web perspective, expand ClassifiedsTutorial > WebContent.
  2. In the WebContent folder, double-click all_records.jsp. The all_records.jsp file opens in the editor.
  3. Delete the default text Insert content here.
  4. In the Palette view, expand the Data and Services drawer.
  5. Drag the SDO Relational Record List component from the Palette onto the blank content area. The Add Relational Record List window opens.
  6. In the Name field, type all_recordlist. Relational record list and relational record names must conform to Java standard naming conventions for variable names (for example, they cannot contain any spaces).
  7. Make sure that Add data controls is selected. When Add data controls is selected, the wizard creates a data table to display the record list on the page. Otherwise, the wizard only creates the record list and not a representation of that data on the page. For now, you will have the wizard create the default data table and you will customize it later. The Add Relational Record List window should look like this:
    Add Relational Record List Window.

    Click Next.

  8. In the Name field on the next page of the wizard, click New to create a new database connection. The Profile Browse dialog opens.
  9. In the Profile Browse dialog, click New. The New Connection Profile dialog opens.
  10. In the Connection Profile Types list, select Derby, then click Next. The Create Connection Profile dialog opens.
  11. In the Name field, type DerbyDB, select Auto-connect at startup, then click Next.
  12. In the Drivers field, select Derby 10.2 - Embedded JDBC Driver Default.
  13. In the Database location field, click Browse and select <workspace_location>\ClassifiedsTutorial\WebContent\database, where <workspace_location> is the directory of your current workspace. Click Finish.
  14. In the Profile Browse dialog, click DerbyDB then click OK. You return to the Add Relational Record List wizard.
  15. Click Configure project's database connections. The JDBC Connections properties window opens.
  16. Click Edit next to the Runtime connection details section. Select Use driver manager connection as the runtime connection type. Click Finish then click OK to return to the Add Relational Record List dialog. Now that you have created a connection to the Derby database, you need to choose a table or the record list to represent. The Add Relational Record List wizard shows the tables in the database.
  17. Expand W5SAMPLE and select ADS. Click Next. The remaining pages in the wizard let you exclude columns from your record list and perform advanced options, such as defining the primary key, adding relationships to other tables, and specifying filter and sort conditions. You will learn more about these pages in later exercises.
    Add Relational Record List dialog.
  18. In the Add Relational Record page of the dialog, you will specify the columns that you want to include in your relational record list. Click Next.
  19. For this tutorial you need to show only the title, description, category, price, and phone number for each classified ad. By default, all columns are selected; click to clear all but the following columns for display:
    • MAINCATEGORY: String
    • TITLE: String
    • DESCRIPTION: String
    • PRICE: BigDecimal
    • PHONE: String
  20. You can refine the organization of the data table display on your Web page. To reorder the columns, select a column and click the up and down arrows until the column is in the desired position.
    Arrange the columns in the following order:
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
    Click Finish.
    Your Web page now looks like this:
    Current appearance of the page.
  21. Save the page.
In the next lesson, you will see how this page will look on a real Web server. There are many options for formatting data tables and JavaServer Faces components. Some of these options are covered in the next module. You can also explore the Properties view on your own for the various JavaServer Faces components on the page (for example, the data table and the individual output components).

Lesson checkpoint

You have completed Lesson 1.2. In this lesson, you learned how to connect to a database and display data records on a Web page using a relational records list.
< Previous | Next >

Feedback