HTML Output

Introduction

Expresso uses and generates HTML (or JSP) pages that use Cascading Style Sheets (CSS) - Level 1 for the actual formatting of the pages. This allows the look and feel of the site using Expresso to be consistent. The crowning glory of CSS usage is that by simply changing a few lines on a file, known as the stylesheet file, the entire site's look and feel can be updated. The following sections detail how to create HTML files for Expresso, and also how to use Expresso's HTML generation classes to take advantage of the CSS capability.

It is highly recommended that HTML, JSP and servlet authors refrain from explicitly defining fonts, colors, etc. in their creations and rely solely on the capabilities provided by CSS to set the look and feel of the site.

HTML files for Expresso

The stylesheet

The styles used by a CSS-capable file is found in a stylesheet file. The stylesheet file that is used by Expresso is located in /components/expresso/style/default.css. In the same directory, i.e. /components/expresso/style are other CSS files that can be copied over default.css to achieve various looks and feel. The file expresso.css contains the default Expresso CSS setup and is usually what is copied into default.css.

The default.css stylesheet defines (when the body tag in an HTML page uses the attribute class="jc-default" or class="jc-toc"), the background color of the page, the default font (set) and foreground color, the color of links and visited-links. It also defines the color, size and alignment for various CSS styles as defined below.

The effect of the defaults.css file on an example page can be seen here.

A template for an Expresso HTML file

A HTML/JSP file for Expresso should have the following format:

<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>The Page Title</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="/components/expresso/style/default.css" rel="styleSheet" type="text/css"> </head> <body class="jc-default"> <p class="jc-pageheader">The Page Header</p> </body> </html>

There are three things to note above:

  1. In the <head>...</head> section, the default.css stylesheet is referenced
  2. The body tag includes the attribute class="jc-default"
  3. The page header is defined as a paragraph with the attribute class="jc-pageheader"

HTML Tables for Expresso

Tables in Expresso should be defined with the table headers enclosed within <th>...</th> tags with the attribute class="jc-tabletitle". Here's an example:

<table align="center" border="1" cellspacing="2" cellpadding="0"> <tr> <th class="jc-tabletitle">Heading 1</th> <th class="jc-tabletitle">Heading 2</th> <th class="jc-tabletitle">Heading n</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </table>

Other styles

The default.css stylesheet defines a number of other styles that are used by the various pages. They are:

Style Description
jc-successheader Page heading when some succesful operation is being reported
jc-errorheader Page heading when some error condition is being reported
jc-description For text providing a description (usually static text on a page)
jc-info For informational text (usually after some action is taken)
jc-explanation For text providing an explanation (usually static text on a page)
jc-instruction For text informing the user what to do (usually on forms)
jc-label Labels for fields in forms
jc-reqlabel Labels for required fields in forms
jc-formfield Table row containing form fields
jc-formnote Field descriptions in forms

HTML Generation With Expresso

The set of classes in the com.javacorporate.common.html package are used for generation of HTML output. All the HTML element classes have a display(PrintWriter) method which generates CSS-aware HTML. Most of the HTML element classes are inherited from the HtmlElement base class. The HtmlElement (abstract) class defines two methods setCSSClass(String) and setCSSID(String) that aid with CSS information. The setCSSClass(String) method is used to define the style that will be output using the "class=" attribute. CSS IDs allow the overriding of CSS style attributes for a particular class, by defining attributes associated only with that particular ID. CSS IDs can be specified with setCSSID(String).

An example page

HTML generation from within Expresso begins with the Page class. When the display(PrintWriter) method is invoked on a Page object, HTML output is automatically generated to reference the default.css stylesheet.

Here is how a typical page is generated (for other examples see the doGet(...) methods of com.jcorporate.expresso.core.servlet. and com.jcorporate.expresso.core.servlet. classes):

...... PrintWriter out = response.getWriter(); ...... Page myPage = new Page("An example page"); Paragraph myPara = new Paragraph(new Text("This is the header")); myPara.setCSSClass("jc-pageheader");// Could use jc-successheader or jc-errorheader myPage.add(myPara); ...... myPage.display(out); ......

An example form and table

This is an excerpt from the Login servlet:

...... Form myForm = new Form("login form"); myForm.setAction(response.encodeUrl(getServletPrefix("Login").toString())); myPage.add(myForm); ...... Table formTable = new Table("login form table"); myForm.add(formTable); ...... Row oneRow = new Row("user name row"); Cell oneCell = new Cell(new Text("User Name: ")); oneCell.setCSSClass("jc-label"); // Could use jc-reqlabel for required labels oneRow.add(oneCell); oneCell = new Cell(new TextField("UserName", userNameDefault, 30, 30)); oneCell.setCSSClass("jc-formfield"); oneRow.add(oneCell); formTable.add(oneRow); .......

Adding header cells to tables

There are two ways to add header cells to a table. The first way is to use a regular cell as above for each header cell, but then to set the following attributes on it:

...... Cell oneCell = new Cell(new Text("Header")); oneCell.setHeaderCell(true); oneCell.setCSSClass("jc-tabletitle"); ......

Secondly, all the header cells can be set at once using:

...... myTable.setTitle("Header 1|Header 2|Header n"); //Uses "|" character as separator ...... // In above example addHeading(String) can be used interchangably with setTitle(String)

Finally, a caption can be added to a table using:

...... myTable.setCaption("This is the caption"); ......