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.
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:
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 |
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,
For a tutorial that creates a simple servlet application using InternetBeans Express, see "Tutorial: a simple InternetBeans Express example."
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.
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.
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.
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.
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).
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".
To create the servlet for this example,
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.
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,
template.html
in the file name field.
template.html
to open it in the content pane. Select the Source tab.
<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:
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,
template.html
.
<table id="tutorialtable" align="CENTER" cellspacing="0" border="1" cellpadding="7">
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,
TableServlet.java
to open it in the Content pane. Select the Design tab to open the UI Designer.
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.
connection
property value field in the Inspector, then click the ellipsis button to open the Connection property editor for database1
.
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 |
For more information on connecting to databases, see "Connecting to a database."
QueryDataSet
component to your application from the Data Express tab of the component palette.
query
property value field in the Inspector for queryDataSet1
, then click the ellipsis button to open the Query property editor.
Property name | Value |
Database | database1 |
SQL Statement | select * from employee |
To add InternetBeans Express components to dynamically generate data to the HTML components,
TableServlet.java
in the content pane, select the Design tab.
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
.
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.
doGet()
method and replace it with the single statement:
ixPageProducer1.servletGet(this, request, response);
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,
TableServlet.java
.
TableServlet.java
again.
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:
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.