Views are important to most Domino applications. They provide the primary means by which documents are located and retrieved. But working with views on the Web is often more complicated or less satisfactory than using views with the Notes client. Several classic view options are available for web applications, all of which have draw-backs and implementation issues.
A specific view can be displayed on the Web in several different ways. So it is helpful to consider view attributes that influence design choices, in particular:
- View content
- View structure
- How a view is translated for the Web
- How a view looks in a browser
- Whether or not a view template is used
- View performance
- Document hierarchy
In terms of content, a view contains:
- Data only
- Data and HTML tags
In terms of structure, views are:
- Uncategorized
- Categorized
In terms of the techniques used by Domino to translate views for the Web, there are four basic methods:
- Domino-generated HTML (the default)
- Developer-generated HTML (the view contains data and HTML tags)
- View Applet (used with data only views)
- XML (the view is transmitted to the browser as an XML document)
The first three of these methods are easier to implement. Two options on the Advanced tab of View Properties control which of these three methods is used:
- Treat view contents as HTML
- Use applet in the browser
If neither option is checked, then Domino translates the view into an HTML table and then sends the page to the browser. If Treat view contents as HTML is checked, then Domino sends the view to the browser as is, assuming that the developer has encoded HTML table tags in the view. If Use applet in the browser is checked, then Domino uses the Java View Applet to display the view. (As mentioned previously, the Java Applets can be slow to load, and they do require a locally installed JVM (Java Virtual Machine)).
Using XML to display views in a browser is a more complicated proposition, and we will not deal with it here. Pursue this and other XML-related topics in Designer Help or on the Web. Here is a starting point:
http://www.ibm.com/developerworks/xml/
In terms of how a view looks when displayed in a browser, two alternatives can be used:
- Native styling with Designer
- Styling with Cascading Style Sheets
In terms of whether or not a view template is used, there are three choices:
- A view template is not used
- The default view template is used
- A view template created for a specific view is used
Finally, view performance can be an issue for views with many:
- Documents
- Columns
- Column formulas
- Column sorting options
Each view is indexed and refreshed according to a setting on the Advanced tab of View Properties. By default, view indices are set to refresh automatically when documents are added or deleted. If the re-indexing process takes longer, then application response time can suffer. In general, smaller and simpler views with fewer column formulas perform better than long, complicated and computationally intensive views.
The topics in this section deal with designing views for the Web. The first few topics review the standard options for displaying views. Later topics offer suggestions about improving view look and feel.
Understand view Action buttons
As you work with views on the Web, keep in mind that Action buttons are always placed at the top of the page regardless of how the view is displayed on the Web (standard view, view contents as HTML) and regardless of whether or not a view template is used. Unless the Action Bar is displayed with the Java applet, Action buttons are rendered in a basic HTML table; a horizontal rule separates the Action buttons from the rest of the form. Bear in mind that the Action buttons are functionally connected to but stylistically independent of the view and view template design elements that display lower on the form.
Use Domino-generated default views
When you look at a view on the Web, the view consists only of column headings and data rows. Everything else on the page (below any Action buttons) is contained on a view template form. You can create view templates in your design, or you can let Domino provide a default form.
If Domino supplies the view template, the rendered page is fairly basic. Below the Action buttons and the horizontal rule, standard navigational hotspots are displayed; these navigational hotspots are repeated below the view. Expand and Collapse hotspots are included to support categorized views and views that include documents in response hierarchies. The view title displays below the top set of navigational hotspots, and then the view itself appears.
If you supply a view template for a view, you must design the navigational hotspots, view title, and other design elements that may be required.
View contents are rendered as an HTML table with columns that expand or contract depending upon the width of cell contents. If view columns enable sorting, then sorting arrows appear to the right of column headings. Here is an example of how Domino displays a view by default on the Web:
In this example, clicking the blue underscored values in the left-most Last Name column opens the corresponding documents. By default, values in the left-most column are rendered as URL links, but any other column—or several columns—can serve this purpose. To change which column values are clickable, enable or disable the Show values in this column as links option on the Advanced tab of Column Properties:
Typically a title, subject, or another unique document attribute is enabled as the link.
Out of the box default views are a good choice for rapid prototyping or for one-time needs where look-and-feel are less important. Beyond designing the views, nothing else is required. Domino merges the views with HTML tags and a little JavaScript to produce fully functional pages.
On the down side, what you see is what you get. Default views are stylistically uninspiring, and there is not a lot that can be done with them beyond some modest Designer-applied styling. Many Designer-applied styles, such as column width, are not translated to the Web. Still, some visual improvements can be made. In this example, the font characteristics are modified, and an alternate row background color is added:
Include HTML tags to enhance views
Some additional styling and behavior can be coded into standard views using HTML tags and CSS rules. Here is how this is done:
In this example, <font> tags surround the column Title. Note the square brackets that identify the tags as HTML:
Tags can also be inserted into column value formulas:
“[<font color=’darkblue’>]” + ContactLast + “[</font>]”
When viewed with a browser, the new colors are displayed as expected. But when the view is opened in Notes, it looks like this:
(Move the mouse over the image to enlarge it.)
The example illustrates how to code the additional tags, but frankly the same effects can be achieved using Designer-applied formatting, so there is no real gain here. The view takes longer to code and the final result is not very reader-friendly when viewed with the Notes client.
That being said, there still may be occasions when you want to add HTML tags to achieve a particular result. Here is a somewhat more complicated application of the same technique. This next line of code is added to the Title of a column. Note the use of <sup> and <font> tags. These tags apply only to the message See footnote 1:
Last Name[<sup><font color=’red’>]See footnote 1[</font></sup>]
The result achieves the desired effect:
More challenging is styling values in view columns. You do not have access to the <td> or <font> tags that Domino inserts into the page to define table cell contents. But you can add <span> tags around a column value, and then use CSS rules to style the span. Here is what the column formula might look like:
“[<span class=’column1′>]” + ContactLast + “[</span>]”
Here is the CSS rule for the column1 class:
.column1 {
background-color: #EEE;
cursor: default;
display: block;
font-weight: bold;
text-decoration: none;
width: 100%;
}
These declarations change the background color of the cell to a light gray and the pointer to the browser default. The display and width declarations force the span to occupy the width of the table cell. The text underscoring (for the link) is removed and the text is made bold.
Without the CSS rule, the view displays as expected:
With the CSS rule applied, a different look for the first column is achieved:
