Your Development & Design Resource
Fixed Layouts for Traditional IBM Lotus Notes Client Applications
07/21/2010 10:31 PM by Chris Toohey
Lotus Notes Client apps can mirror the look of the Web 2.0 websites of today... even if you build in Lotus Notes 6.0! This tutorial walks you thru the build of a simple yet visually pleasing user interface (UI).
There is strong debate over the preferred ideal layout for websites and website-looking applications - fixed, fluid, or elastic. Of course, a User Interface should be developed specifically for your target user and their specific needs... but I think that you need to know how to develop each type of layout.
Most Lotus Notes Client applications are fluid layouts. They expand to the window container, and will often distort under small or extra-large resolutions.
I will use only traditional Lotus Notes Design Elements -- available from Release 6.0 to today -- to re-create the fixed layout.
The fixed layout is my current favorite... specifically because of the complete control it affords the layout and content designer. content, in this context of course, are NotesDocument managing Forms and Views Design Elements.
I used this approach to design the Lotus Notes Client UI for my Remote Console app. (Lotus Notes Client UI seen below)
My fixed layout will consist of the following Design Elements:
- 1 Frameset Design Element
- 2 Page Design Elements
- 2 Image Resources
The Frameset will consist of 5 Frames in the following configuration:
As you can see in the below image, this is exactly the same layout I used for Remote Console:
The Frameset consists of the sidebars, the header, the footer, and the NotesView (which is the main content Frame).
The header, the footer, and the NotesView Frames and all fixed-width -- set to 750 pixels -- while the header and footer have a fixed height of 300 and 50 pixels respectively.
To populate these Frames, we'll need our layout-specific Design Elements -- specifically our Page Design Elements and our Image Resources.
First, our Image Resources.
Understand that I will be stacking the pages next to eachother to form the ever-expanding header banner. For Remote Console, this is the green bar in the header which runs the entire length of the app regardless of the resolution. In direct constrast, the center-aligned fixed layout of the header, the footer, and the NotesView Frames never expand beyond 750 pixels.To achieve this, we'll need 2 Image Resources. The first, will be our header.
With Remote Console this was simple. Create a simple 750 pixel x 100 pixel
header image named
background_header.jpg. Next take a 1
pixel wide swatch of that image where there was a solid band of color (ie., no
title text, no funky background art, etc.). Expand the height of the second
background_header_gradient.jpg) to 150 pixels, making sure
to add a 50-pixel white (or background-color specific) pad to the
top of the image.
Once I have the images, I import them into the NotesDatabase design as Image Resources.
I then create a Page Design Element named
simply set my
background_header_gradient.jpg as the Page
background image, horizontally repeating as seen above.
I next create a Page Design Element named
(header)|header (or a
Form Design Element with the
SaveOptions Field set to "0").
I create a simple 1 column 1 row table, and make the cell image for that
table a non-repeating
From here, we jump back into our Frameset and populate our border
Frames with the
border Page Design Elements and the
header Frame with the
I needed to play around with the top-padding/layout of the
header Page/Form until I got it to line up with the
border Page... but that's really it.
(For the footer Frame, I simply re-used the
border Page Design Element, which won't show the image due to it's
From here, I wire the application to use the NotesView for everything, disable frame resize and scrolling for every Frame except NotesView, and I have a really simple Center-Aligned Fixed Layout for a traditional Lotus Notes Client applications!