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 image (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 (border)|border, and 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 background_header.jpg.

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 header Page/Form.

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 50-pixel padding...)

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!