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.
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 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:
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>
The default.css stylesheet defines a number of other styles that are used by the various pages. They are:
|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|
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).
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); ......
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); .......
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"); ......