Using InternetBeans Express

Note: This is a feature of JBuilder Professional and Enterprise.

InternetBeans Express is a set of components and JSP tag extensions for generating and responding to the presentation layer of a web application. It takes static (template) pages, inserts dynamic content from a live data model, and presents them to the client; then it writes any changes that are posted from the client back into the data model. This cleanly separates the front-end web design from the back-end application development, and makes it easier to create data-aware servlets and JSPs. For example, you can use InternetBeans Express components to create a servlet that provides a form for a new user to register for site access or a JSP that displays the results of a search in a table.

In addition to built-in support for DataExpress DataSets and DataModules, InternetBeans Express can be used with generic data models and EJBs. The classes and interfaces fall into three categories:

This introduction focuses on data-aware servlets, using DataExpress DataSets. For information on using InternetBeans Express with JSPs and other data models, see the online help.

Using the JBuilder UI Designer with InternetBeans Express

You can use the JBuilder UI Designer in conjunction with DataExpress and InternetBeans Express to quickly convert a static HTML page into a servlet that generates dynamic content. The components are on the InternetBeans page of the Component Palette; there are four types:

InternetBeans palette options

Component type Description
IxPageProducer
Reads and parses static HTML files so that it can later regenerate the file, inserting dynamic content from other components.

Most Servlets will use a IxPageProducer, enabling the Servlet to generate the entire response from a pre-designed Web page, inserting dynamic data as spans of text or in controls in a form on that page.

IxControl
A generic control that determines at runtime which type of HTML control it is replacing and emulates that control.
IxTable
Generates HTML tables from data sets or table models.
Other controls Specific controls, such as IxTextField and IxCheckBox, correspond to HTML controls and usually get their data from a single field in a data set.

To use InternetBeans Express and DataExpress with a servlet,

  1. Create a template Web page.
  2. Create a servlet. A tutorial for creating a simple servlet can be found in "Developing servlets."
  3. Double-click the servlet file to open it in the Source window.
  4. Select the Design tab to open the UI Designer.
  5. Connect to a database and run a SQL query, as described in "Retrieving data from a data source."
  6. Select the InternetBeans page from the Component Palette.
  7. Select the appropriate item(s) from the InternetBeans palette and add them to the servlet (by clicking in the structure pane).
  8. Set properties in the Inspector, as required.

For a tutorial that creates a simple servlet application using InternetBeans Express, see "Tutorial: a simple InternetBeans Express example."

Using InternetBeans Express with servlets

The InternetBeans Express components simplify both the display of live data in a web page, and posting of data from a web page into a database or other data model.

Displaying live web pages with servlets using InternetBeans Express

Most servlets will use a IxPageProducer component, enabling the servlet to generate the entire response from a pre- (and hopefully well-) designed Web page, inserting dynamic data as spans of text or in controls in a form on that page. This has several advantages:

For example, when using InternetBeans Express with a servlet, the servlet is opened in the Designer. A Database and QueryDataSet provide the data for the servlet. A IxPageProducer is added from the InternetBeans tab of the palette. Its htmlFile property is set to the pre-designed page, which invokes the internal HtmlParser to locate all possible replaceable elements.

For each item to be dynamically generated, a IxControl, which is data-aware, is added. Its pageProducer property is set to the IxPageProducer, which can then be queried for a list of all the controls found on the page. This list is used to populate an editor for the IxControl's controlName property. Setting the dataSet and columnName properties completes the data linkage.

The IxPageProducer.render() method generates the dynamic version of the page, replacing the controls that have a IxControl assigned to them by asking the component to render, which generates equivalent HTML with the data value filled in from the current row in the dataset. You could call the render() method yourself, but the IxPageProducer understands basic servlet operations, and provides the servletGet method to simplify things even further. The body of a servlet's doGet() method can be as simple as:

    ixPageProducer1.servletGet(this, request, response);

Because it knows the response will be HTML, this single call sets the content type of the response and renders the dynamic page into the output stream writer from the response.

Posting data with servlets using InternetBeans Express

Processing a HTTP POST is as simple as the GET operation with the IxPageProducer.servletPost() method:

    ixPageProducer1.servletPost(this, request, response);

At design-time, a IxSubmitButton is associated with each submit button on the form. An submitPerformed listener is created as usual (e.g. Next button does dataSet.next, Previous button does dataSet.prior).

At runtime, when the servletPost() method is called it writes the new values from the post into the corresponding InternetBeans components, which in turn write through to the underlying data model. It then fires the appropriate submitPerformed event for the button that submitted the form. The servlet's doPost() method can then call doGet() or call IxPageProducer.servletGet() directly to render the new page.

Parsing pages

Unlike XML, which is strict, the HTML parser is lax. In particular, HTML elements (tag) and attribute names are not case-sensitive. However, XHTML is case-sensitive; the standard names are lower-case by definition.

To make things faster, HTML element and attribute names will be converted to the XHTML-standard lowercase for storage. When searching for a particular attribute, use lowercase.

When components are matched with controls in the page, their attributes are merged, with attributes set in the component taking precedence. For example, if the web page designer creates a TEXTAREA of a certain size, you probably don't want to override that size when that control is dynamically generated.

Generating tables

A fairly common and complex task is the display of data in a table using a particular format. For example, there may be certain cell groupings, and alternating colors for each row.

The Web page designer need only provide enough dummy rows to present the look of the table (for alternating colors, that's two rows). When the replacement table is generated by the IxTable component, that look will be repeated automatically.

You can set cell renderers by class, or assign each column its own IxTableCellRenderer to allow customization of the content; for example, negative values can be made red (preferably by setting an appropriate cascading style sheets (CSS) style, not by hard-coding the color red).

Tutorial: A simple InternetBeans Express example

The following very simple example provides an introduction to creating a data-aware servlet using JBuilder's ServletExpress and InternetBeans Express. This example:

The roles of the Web developer and application developer can be played by the same person.

This is a very simple example, using an HTML table, an InternetBeans Express IxTable, and a connection to an existing JDataStore database. For an example that demonstrates more complexity, check the online help index for "InternetBeans Express".

Step 1: Create the servlet

To create the servlet for this example,

  1. Close all existing projects.
  2. Select File|New, then select Servlet. The Project wizard appears first.
  3. Enter a project name, for example, InternetBeansExpressTutorial. Click Finish. The Servlet wizard appears.
  4. Enter a name for the Servlet Class, for example, TableServlet.
  5. Select the doGet() method.
  6. Click Next. Unselect Generate SHTML file.
  7. Click Finish.

Files named TableServlet.java and InternetBeansExpressTutorial.html are added to the project. TableServlet.java contains the servlet code. InternetBeansExpressTutorial.html contains the project description. This sample tutorial may be located in the jbuilder40/samples/webapps/InternetBeansExpressTutorial directory of your JBuilder application.

Step 2: Design the Web page template

In this step of the tutorial, the Web designer will generate a template Web page. In later steps, either the database developer or the Web designer will put InternetBeans Express components into place to dynamically generate content to the Web page. For example, in this step the Web designer creates an HTML table. In the later step, the table format will remain the same (in this case, alternating rows of blue and red text), but the data displayed in the table will be dynamically generated from the SQL database.

When designing the HTML page, use the XHTML format of all lower-case tags and all attributes in quotes.

To design the Web page,

  1. Create a new template file. To do this,
    1. Click the Add Files/Packages button directly above the project pane.
    2. Click the Project button in the Add Files Or Packages To Project dialog. This will move you to the directory where your project is located.
    3. Enter template.html in the file name field.
    4. Click OK twice to close the dialog and create the file.
  2. Double-click the file template.html to open it in the content pane. Select the Source tab.
  3. Insert the template HTML. This sample page contains a couple of style definitions, a background image, and a table with some dummy data. <th> elements indicate the column headings, which must contain names similar to the column names in the SQL result set in order for the data to be replaced automatically. (You can also set the columns to replace programmatically.)
    <html>
    <head>
    <title>InternetBeans Express Tutorial Template Page</title>
    <style type="text/css">
      tr.odd  { color:blue }
      tr.even { color:red }
    </style>
    </head>
    <body link="#0000ff" background="leaves.gif">
    
    <h1 align="CENTER">InternetBeans Express Tutorial Page</h1>
    <p align="CENTER">When run, data will be dynamically generated to this table.</p>
    <p><table align="CENTER" cellspacing="0" border="1" cellpadding="7">
    <tr>
    <th>Full Name</th>
    <th>
    Phone Ext.</th>
    </tr>
    <tr class="odd">
    <td>Smythe, Jian</td>
    <td>1234</td>
    </tr>
    <tr class="even">
    <td>Doh, Homer</td>
    <td>9876</td>
    </tr>
    </table>
    </p>
    
    </body>
    </html>

The page looks like this:

InternetBeans Express tutorial: Web page template design

InternetBeans Express tutorial - Web page template design

In order for the InternetBeans Express components to be able to identify the replaceable attributes, we need to add an ID tag for the table. (If we were using input fields, we would use the HTML NAME tag instead, such as <input type="text" name="Full Name">.) To add the ID tag to the table,

  1. Locate the <table ...> text in template.html.
  2. Modify the table attribute to add the ID tag.
    <table id="tutorialtable" align="CENTER" cellspacing="0" border="1" cellpadding="7">
    
  3. Select File|Save All.

Step 3: Add database components

The next step is to add the database components to the file TableServlet.java. We add a connection to a SQL database, and run a query against the database to retrieve data into a QueryDataSet component. To do this,

  1. Double-click TableServlet.java to open it in the Content pane. Select the Design tab to open the UI Designer.

  2. Select the Data Express page of the component palette to have access to the DataExpress components.

  3. Click the Database component from the palette, then click anywhere in the UI designer or the component tree to add the component to the application. database1 is added to the Data Access folder in the component tree, and is highlighted by default.

  4. Click in the connection property value field in the Inspector, then click the ellipsis button to open the Connection property editor for database1.

  5. Set the connection properties to the JDataStore sample EMPLOYEE table, as follows:
    Property Name Value
    Driver com.borland.datastore.jdbc.DataStoreDriver
    URL Use the ellipsis button to browse to the Local JDataStore Database employee.jds, located in /jbuilder/samples/JDataStore/datastores/employee.jds on your system, then click OK.
    Username Enter your name
    Password not required

  6. Click the Test Connection button to check that the connection properties have been correctly set. Results of the connection attempt are displayed beside the button. If you have not entered your JDataStore license, you will be prompted for it here. When the connection is successful, click OK.

    For more information on connecting to databases, see "Connecting to a database."

  7. Now add a QueryDataSet component to your application from the Data Express tab of the component palette.

  8. Click in the query property value field in the Inspector for queryDataSet1, then click the ellipsis button to open the Query property editor.

  9. Set the following properties:
    Property name Value
    Database database1
    SQL Statement select * from employee
  10. Click Test Query to ensure that the query is runnable. When the area beneath the button indicates Success, click OK to close the dialog.

  11. Choose File|Save All.

Step 4: Add InternetBeans Express components for servlet display

To add InternetBeans Express components to dynamically generate data to the HTML components,

  1. Select TableServlet.java in the content pane, select the Design tab.
  2. Select the InternetBeans page from the component palette.
  3. Select the IxPageProducer icon, then click anywhere in the UI designer or the component tree to add it to the servlet. Set its htmlFile property to template.html.
  4. Select a IxTable control, and add it to the Designer. Set its dataSet property to queryDataSe1. Set its pageProducer property to ixPageProducer1. Set its elementId property to tutorialtable (the only ID in the HTML file) to wire it to the HTML table.
  5. Click the Source tab. Remove the wizard-generated body of the doGet() method and replace it with the single statement:
    ixPageProducer1.servletGet(this, request, response);
    

Step 5: Run the servlet

You can run the servlet from within the JBuilder IDE to test that the HTML components will display the data from the database as expected. First, you should set an alias for the servlet so that it can be run from the webroot directory -- the same directory that contains the template file. Otherwise, the reference to the image in the template file won't work. To do this and run the servlet,

  1. Right-click the servlet file, TableServlet.java.
  2. Select Properties from the context menu.
  3. Enter the alias simpletable.
  4. Click OK to save close the Properties dialog box.
  5. Right-click the servlet file, TableServlet.java again.
  6. Select Web Run from the context menu.

The Message pane shows that the Tomcat servlet engine is running. The Web View window opens and displays the template page, with the database data dynamically inserted in the table. The URL field displays the servlet's URL, which would be http://localhost:8080/simpletable. The running example will look like this:

Running InternetBeans Express application

InternetBeans Express application - running

Obviously, this example is a very limited example of the power of InternetBeans Express. Check the samples directory and online help for more information and examples using InternetBeans Express.