218 eClient 101 Customization and Integration
9.2.2 Using background image
In the CSSSample.html file, change the line:
<body class=”BODY”>
to:
<body class="BODY_LOGO">
This triggers the HTML file to use the BODY_LOGO tag in the CSS file. The
BODY_LOGO tag in the CSS file uses a background JPG file that can be found in
the eClient icons directory. You can also use your company logo instead for
customization.
Save the HTML file. Open the CSSSample.html again from your browser to view
the changes (see Figure 9-3).
Figure 9-3 CSSSample.html using <body class=”BODY_LOGO”>
9.3 Using CSS for eClient
In the eClient, HTML is generated when the JSPs execute on the server. Each
JSP in the eClient has a section in it that creates HTML to send to the Web
browser. In the HTML portion of each eClient JSP, a line similar to line 3 in the
following code specifies the name of the style sheet to use:
<head>
<title><%= cub.getIdmResourcesString("IDMNoteLogJSP_TitleBar") %></title>
Chapter 9. Customizing look and feel using style sheets 219
<link rel="STYLESHEET" type="text/css" href="<%= webAppName
%>/eclient81.css">
The above sample code is taken from IDMNoteLog.jsp.
All of the eClient JSPs use the eclient81.css file, which is normally located in the
c:\Program Files\IBM\cmEClient\installedApp\ IBM_eClient_82.ear\eclient82.war
directory.
Most of the tags in eclient81.css are used for various types of standard HTML
elements. There are a few interesting examples that are a little different:
The BODY tag
There is no period at the beginning of this tag. The BODY tag is used as the
default if there is no specific class specified for the body of an HTML
document - that is, if the JSP uses <body> instead of <body
class=”MY_BODY_TAG”>. Here you can specify defaults such as background
color.
The .BODY tags (.BODYLOGON, .BODYHOME, .BODYMINI)
These tags are used in specific JSPs that need different BODY styles. These
different tags are used primarily to specify a different background image for
different type of windows, such as logon and search windows.
The .ODD and .EVEN tags
An interesting example of style sheet usage is how the eClient gets the
alternating lines in the search results to have a blue or white background.
The HTML for the search results uses the following code to specify a CLASS
of ODD or EVEN to the odd and even lines in the search results. The variable
i is the row number which is used to determine odd or even number of the
row. The rowType is EVEN if i is divisible by 2; otherwise, the rowType is ODD.
The tag for the class=”<tag>” line is then set to ODD or EVEN depending on
the rowType.
<% rowType = (i % 2 == 0) ? "EVEN" : "ODD"; i++; %>
<TR class="<%= rowType %>">
<TD nowrap class="<%= rowType %>">...
The browser sets the colors according to the .EVEN or .ODD tags in the
eclient81.css file.The above sample code is taken from the
IDMItemTypeList.jsp file.
Get eClient 101 Customization and Integration now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
