IBM Lotus Domino: Adding Style to Form and Page Elements

Exclusive offer: get 50% off this eBook here
IBM Lotus Domino: Classic Web Application Development Techniques

IBM Lotus Domino: Classic Web Application Development Techniques — Save 50%

A step-by-step book and eBook guide for web application development and quick tips to enhance applications using IBM Lotus Domino

$35.99    $18.00
by Richard G. Ellis | March 2011 | Enterprise Articles IBM

IBM's Lotus Notes and Domino product set is a feature-rich, application development technology that has been used to create web-enabled applications since the late 1990's.

This article by Richard G. Ellis, author of IBM Lotus Domino: Classic Web Application Development Techniques, illustrates how CSS rules can be incorporated into applications to style forms and pages for the Web.

 

IBM Lotus Domino: Classic Web Application Development Techniques

IBM Lotus Domino: Classic Web Application Development Techniques

A step-by-step guide for web application development and quick tips to enhance applications using Lotus Domino

        Read more about this book      

(For more resources on IBM, see here.)

Most of the CSS rules you write for an application relate to design elements on forms and pages. Suggestions and examples in this section just scratch the surface of CSS possibilities. Browse the Web for additional ideas. Here we focus on the mechanics of how elements are styled, rather than on specific recommendations about what looks good, which is largely a matter of taste.

Use color effectively

Use pleasing, complementary colors. If your organization requires a specific set of colors, then of course find out what that palette is and conform to it as much as possible. Color tastes change over the years, primary colors dominating at times and lighter pastels in vogue at others. Here are a few generalities to consider:

  • Use white or very light colors for backgrounds
  • Use stronger colors such as dark red to make important elements stand out
  • Use no more than three or four colors on a form
  • Use black or dark gray text on a light background for lengthy text passages

If you have paid little attention to the matter of color in your applications, do some web work on the subject. Once you select a color scheme, provide some samples to your customers for their opinions and suggestions.

Style text

Typography is a complex topic with a rich history and strong opinions. For web application design purposes, consider using web safe fonts which are likely to be available on most or all personal computers. If you use a font that is not available to a browser, then text is rendered with a default font.

Fonts with serifs are usually considered easier to read on paper, and less so as web page text. Experiment with the following fonts:

  • Bookman Old Style
  • Cambria
  • Garamond
  • Georgia
  • Times New Roman

Common fonts without serifs (sans serif) are considered easier to read on the Web. Some examples include:

  • Arial
  • Calibri
  • Helvetica
  • MS Sans Serif
  • Tahoma
  • Trebuchet MS
  • Verdana

Mono-spaced fonts are useful when you want text to line up—columns of numbers in a table, perhaps:

  • Courier New
  • Courier

Establish a common font style with CSS rules applied to the body type selector or to a main division using a type selector, a class selector, or an ID selector:

body {
color: #555555;
font-family: Verdana;
font-size: 8pt;
}

Style headings and labels

If headings and labels are bracketed with HTML heading tags (for example, <h1> or <h2gt;), they can be styled with type selectors:

h1 {
color: Blue;
font-family: Arial;
font-size: 18pt;
font-weight: bold;
}

If headings and labels are bracketed with <span> tags, use CSS classes:

<span class="highlight1">October News</span>

Underline links in text but not in menus

When browsers and the Web first appeared in the early 1990's, hyperlinks were a novelty. To distinguish a link from normal text, the convention developed to underscore the text containing the link, and often the link text was colored blue. There is no magic associated with underscoring and making text blue—it was just the convention adopted at the time.

Today links in text passages are usually distinguished from adjacent text with color, weight or underscoring. In a menu, however, each item is understood to be a hotspot link. Underscores and blue text are not required. So if you feel like underscoring a link, do so if the link appears within some text, but don't underscore links in menus.

At the same time, refrain from highlighting important text with underscoring, which implies that that text is a hyperlink. Use another highlighting technique; italics, bold, or an alternate color work well for this purpose.

Style fields

Fields can be styled with CSS either with the Style attribute in Field Properties or with CSS rules.

The key to understanding how CSS rules can be applied to fields is to understand that fields are translated to the Web using <input> tags. Here is how a simple text field translates into HTML:

<input name="FirstName" value="">

Here is how a radio button field translates:

<input name="%%Surrogate_Gender" type="hidden" value="1">
<label><input type="radio" name="Gender" value="M">M</label><br>
<label><input type="radio" name="Gender" value="F">F</label><br>

CSS rules can be defined for the <input> tag, an ID, or a class. For example, assume that a CSS class named requiredtext is defined. If that class name is entered in the Class attribute of Field Properties, the resulting HTML might look like this:

<input name="FirstName" value="" class="requiredtext">

CSS style rules coded for the requiredtext class are applied to the field.

Highlight required fields

Required fields are validated, most likely with JavaScript code, so that complete and good data is saved into the database when a document is submitted. If entered values fail validation, the user is presented with a message of some sort that identifies the problem and requests correction.

Web forms typically identify which fields are required. Any of several techniques can be used. Required field labels can be styled with a more prominent color or a special marker such as an asterisk or a checkmark can be positioned near the field. Required fields also can be co-located and set apart using the <fieldset> and <legend> tags.

If a field value fails validation, it is common practice to provide an error message and then to set the focus into the field; the cursor is positioned in the field to facilitate an immediate correction. As the cursor can be difficult to spot on a busy form, it is also possible to change the background color of the incorrect field as a way of drawing the user's attention to the field. In this illustration, the background color of the field has been changed to yellow:

IBM Lotus Domino: Adding Style to Form and Page Elements

Implementing this technique requires writing a small JavaScript function that changes the background color of the field, and then calling that function when field validation fails.

IBM Lotus Domino: Classic Web Application Development Techniques A step-by-step book and eBook guide for web application development and quick tips to enhance applications using IBM Lotus Domino
Published: March 2011
eBook Price: $35.99
Book Price: $59.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on IBM, see here.)

Style buttons

Every form uses one or more hotspot buttons to initiate actions. The basic button hotspot is not unattractive, but it can be styled as desired with CSS class or ID rules, just like other design elements. But some buttons do need a little more work.

Replace the default Action Bar buttons with hotspot buttons

Action Bar buttons added to forms or views work the same way on the Web as they do in Notes, as long as the @Commands associated with the actions work on the Web. By default, Domino-generated Action Bar buttons look like the following:

IBM Lotus Domino: Adding Style to Form and Page Elements

The Action Bar and Action buttons can be styled when displayed in Notes, but that styling does not translate to the Web. Displaying the Action Bar with the Action Bar Java Applet improves the look of the Action Bar somewhat, but the Java Applet can be slow to load and may not initialize properly at times.

One alternative is to create a set of hotspot buttons, styled with CSS and arranged in a table across the top of a form. The @formulas associated with the Action Bar buttons are recoded to the hotspot buttons' click events. CSS classes (for example, button and buttontable) can be defined and applied to these buttons and to the table which contains them. The end result is more pleasing:

IBM Lotus Domino: Adding Style to Form and Page Elements

Style the default Action Bar buttons

A Domino-generated Action Bar displays on the Web as an HTML table, each cell of which contains an Action button. It turns out that the Action Bar table is typically the first table on the form. That fact can be used to locate this table element in the DOM. Once the Action Bar table is located, a CSS class name can be added to it dynamically. CSS rules then style the table elements.

Note that in Domino and Designer 8.5, a new option was added that simplifies this technique somewhat by automatically adding class names into the HTML for the Action Bar table and buttons. In Designer 8.5, check the Enable enhanced HTML generation option on Basic Properties for the application:

IBM Lotus Domino: Adding Style to Form and Page Elements

With this option enabled, the class domino-actionbar is added to the <table> tag, the class domino-action is added to the <td> tags, and the class dominoactionbar- sep is added to the <hr> tag. CSS rules can then be styled for these classes. View the page source to verify the class names attached to the Action Bar table and other elements:

<table border="1" cellspacing="2" cellpadding="2"
class="domino-actionbar">
<td class="domino-action". . .
<hr class="domino-actionbar-sep" />

If you work with versions of the software prior to 8.5, here is a way to apply CSS rules to the Action Bar. The solution described here consists of five components. If you are using Designer 8.5 in a Domino 8.5 environment, you can skip the steps related to JavaScript, and use the Domino-generated class names instead of the class names in the example. Here are the components required for this strategy:

  • A CSS style sheet named ActionBar.css containing rules for an actionbar class and other HTML tags
  • A JavaScript library named ActionBar.js containing a JavaScript function named styleActionBar that sets the Action Bar table class name property to actionbar
  • A link to the ActionBar.css style sheet in the form's HTML Head Content area
  • A link to the ActionBar.js JavaScript library in the form's JS Header
  • A short JavaScript placed at the bottom of the form that invokes the styleActionBar JavaScript function after the page loads

Reshuffling the parts, here is (roughly) how this works:

  1. The form loads into the browser.
  2. The last line of the form fires the styleActionBar JavaScript function fetched from the ActionBar.js JavaScript library.
  3. The styleActionBar function locates the Action Bar table at the top of the form and sets its class name property to actionbar.
  4. The browser restyles the Action Bar table according to the rules in the ActionBar.css style sheet.
  5. The form displays in the browser viewport.

The ActionBar.css page contains the following rules. Note that all rules apply to a table whose class name is actionbar or to elements (for example, <td>) within that table:

/* Rules for Action Buttons */
table.actionbar {
border-collapse: collapse;
border: none;
margin: 0;
padding: 0;
}
table.actionbar td {
background-color: rgb(0,0,128);
border: solid 2px #555;
border-top: solid 2px #DDD;
border-left: solid 2px #DDD;
font-family: Verdana;
font-size: smaller;
font-weight: normal;
height: 2em;
margin: 0;
padding: 0;
text-align: center;
width: 11em;
}
table.actionbar td a {
color: White;
float: left;
padding: .5em 0;
text-decoration: none;
width: 100%;
}
table.actionbar td a:hover {
background-color: #DDD;
color: red;
}

The styleActionBar JavaScript function in the ActionBar.js JavaScript library contains just a few lines. An array of the form's tables is created, and then the className property of the first table in the array is set to actionbar, forming the linkage between the Action Bar table and the aforementioned CSS rules:

function styleActionBar() {
var form = document.forms[0] ;
var tables = form.getElementsByTagName("TABLE") ;
var actionbar = tables[0] ;
actionbar.className += " actionbar" ;
}

The link to the ActionBar.css page in the form's HTML Head Content area results from a simple @formula:

@NewLine+
"<link rel='stylesheet' type='text/css' href='/"+
@WebDbName+"/actionbar.css' />"+
@NewLine

The link to the ActionBar.js JavaScript library in the form's JS Header results from inserting that resource with the context menu:

IBM Lotus Domino: Adding Style to Form and Page Elements

The JavaScript added to the end of the form is marked as Pass-Thru HTML:

<script type="text/javascript">{styleActionBar();}</script>

With these pieces in place, the default Action Bar buttons that look like this:

IBM Lotus Domino: Adding Style to Form and Page Elements

are restyled. Here the Edit button is shown in a mouse hovered state:

IBM Lotus Domino: Adding Style to Form and Page Elements

Style borders and margins

If you examine closely the CSS rules in the previous illustration, you can see how to create borders with a three dimensional look. In the illustration, the table cells which contain the "buttons" are styled with three border declarations. The first declaration sets all the borders to the same width and color (a dark gray). The second and third declarations change the top and left-hand borders to a lighter color:

border: solid 2px #555;
border-top: solid 2px #DDD;
border-left: solid 2px #DDD;

Use the margin style properties of an element to adjust the whitespace between it and other elements. Without CSS, the common way to create white space above a table or between table rows was to insert HTML tags (<p>, <br>,  ). With CSS, a margin or padding declaration does the trick. Here, a table is positioned 10 pixels below the element above it on the page:

margin-top: 10px;

Note that adjacent elements share a margin, so you may have to adjust the margins of both elements. Use the padding style properties to provide white space between an element and its border or container.

Summary

In this article we saw how CSS rules can be incorporated into applications to style forms and pages for the Web.


Further resources on this subject:


IBM Lotus Domino: Classic Web Application Development Techniques A step-by-step book and eBook guide for web application development and quick tips to enhance applications using IBM Lotus Domino
Published: March 2011
eBook Price: $35.99
Book Price: $59.99
See more
Select your format and quantity:

About the Author :


Richard G. Ellis

Richard G. Ellis currently works as a Domino developer supporting several hundred classically crafted, Web-enabled applications. He has held positions as a programmer, systems administrator, technical manager and IT director in major commercial and university settings. Richard is certified as both a Domino developer and a Domino administrator.

Books From Packt


IBM Lotus Quickr 8.5 for Domino Administration
IBM Lotus Quickr 8.5 for Domino Administration

IBM Rational Team Concert 2 Essentials
IBM Rational Team Concert 2 Essentials

IBM Lotus Sametime 8 Essentials: A User's Guide
IBM Lotus Sametime 8 Essentials: A User's Guide

IBM WebSphere Application Server v7.0 Security
IBM WebSphere Application Server v7.0 Security

WS-BPEL 2.0 for SOA Composite Applications with IBM WebSphere 7
WS-BPEL 2.0 for SOA Composite Applications with IBM WebSphere 7

IBM Lotus Notes 8.5 User Guide
IBM Lotus Notes 8.5 User Guide

IBM Rational ClearCase 7.0: Master the Tools That Monitor, Analyze, and Manage Software Configurations
IBM Rational ClearCase 7.0: Master the Tools That Monitor, Analyze, and Manage Software Configurations

Getting Started with IBM FileNet P8 Content Manager
Getting Started with IBM FileNet P8 Content Manager


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software