The action bar as styled by Domino without the java applet is just a standard HTML table. It is, of course, very ugly as generated out of the box, so we will use DHTML to change that. Since the action bar is the first table on the page, we can grab this table via Javascript and manipulate it as we see fit. Combining some techniques discovered on the web over the years allows us to do the following:
1) Grab the table
2) Apply classes to the table, table row and table cells. These classes can then be styled however we want with CSS.
3) Hide the Domino generated action bar and the HR that it adds.
4) Grab the HTML that makes up the action bar (it is still there even though it is hidden).
5) Create a new DIV at the top of the page and use some magic to make it stay fixed at the top while the rest of the page can scroll.
6) Place the HTML from the action bar into the new DIV.
To implement this, place the following JavaScript in the JSHeader of your form:
function setupActionBar() {
// set classes for Action bar
var vTable = document.getElementsByTagName("Table")[0];
vTable.ID = "ActionBar";
vTable.className = "ABTable";
var ac = vTable.getElementsByTagName("TR" );
for (i=0; i < ac.length; i++) {
ac[i].className = "ABRow";
}
var ac = vTable.getElementsByTagName("TD" );
for (i=0; i < ac.length;i++) {
ac[i].className = "ABCell";
}
var abOuter = vTable.outerHTML;
vTable.style.display = "none"; //hide the original action bar generated by Domino
document.getElementsByTagName( "HR" )[0].style.display = "none" //also hide the HR that Domino creates
//create the DIV we will write into
var oDIV = document.createElement( "DIV" );
oDIV.setAttribute( "id", "divFloatingAB" );
oDIV.innerHTML = abOuter;
var oBody = document.getElementsByTagName( "BODY" )[0];
oBody.insertBefore( oDIV, oBody.firstChild );
} |
In the HTML Head Content, point at your CSS file. Strictly speaking, all your CSS code could be placed into one file if desired. I like to separate them out to keep the code clean and easy to maintain
"<LINK REL='stylesheet' TYPE='text/css' HREF='actionFormat.css'>"
and in the onLoad event, call the setupActionBar function:
setupActionBar();
In the setupActionBar function, the first line gets the action bar table that is generated by Domino. Line 2 assigns it an ID (just in case we want to enhance this later) and line 3 assigns it a class. The next few lines iterate through the rows and cells of the table, assigning each a class as well. After that, we use the outerHTML property to get the code that makes up the table and then hide both it and the HR that Domino creates. Finally, the last section of the function creates a new div called "divFloatingAB", places the table HTML into that div and then inserts the div into the body of the document.
The actionFormat.css file then comes into play, allowing us to turn the ugly table into something we like. Here is the code, with my comments for the purposes of this demo:
/* Application Specific Code*/
/* External CSS file */
/* Author: Chris Blatnick, Linde AG */
/* Last Updated: 07/07/2005 */
/* For design mode: Computed text is in red */
Per a recent article from Jake Howlett -->this eliminates scrolling in IE
body {
overflow:expression("hidden");
}
This definition allows the content div (which is on the form) to scroll. It also defines where the div should start and what the height and width should be.
#content {
position:expression("absolute");
top:27px;
overflow:expression("auto");
height:expression(document.body.clientHeight-27);
width:100%;
}
This sets the div to the proper height and color (which you can easily modify for your app)
#divFloatingAB {
background: #4100C2;
height: 27px;
}
The next several definitions set the styling for the table and individual cells
.ABTable {
margin-top: -5px;
background: #4100C2;
border: 0;
}
.ABCell {
font: 8pt Arial;
padding: 5px 8px 3px 5px;
border: 0px;
background-color: #4100C2;
line-height: 1.9em;
}
.ABCell img, {
float: left;
}
The rest of the CSS definitions apply to the links (standard, visited and hover). When you hover over the button, it sets the borders around the link, giving it an appearance similar to the Notes client. These, too, are easily changed to fix the UI of your application.
.ABCell a {
text-decoration: underline;
color: white;
border: 1px solid #4100C2;
padding: 3px;
}
.ABCell a:visited {
text-decoration: underline;
color: white;
padding: 3px;
}
.ABCell a:hover {
text-decoration: underline;
color: white;
border-top: 1px solid #E9E9FF;
border-left: 1px solid #E9E9FF;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 3px;
}
|
That's about all there is to it. I hope this might come in handy for some of you. If you have any questions, please do not hesitate to send me an e-mail.
Cheers,
Chris Blatnick
chris.blatnick@us.linde-gas.com |