Creating a Centered Fixed-width Layout for Traditional Lotus Notes Client Applications

03/21/2011 01:07 PM by Chris Toohey

Any sales and marketing person will tell you "sex sells", and that the user perception of the capabilities of a given application is based on it's appearance. Simply put, if your application user interface is some cobbled-together mush, it ain't gonna win the hearts of your users and endear them to a given app [or platform].

It is absolutely in the power of a Lotus Notes Developer to make their application visually appealing in order to get that immediate buy-in from the user to ensure that they pay enough attention to wow them with all of the feature functionality developed into the application. So let's take a look at a quick example of this in practice using only traditional Design Elements by creating a center-aligned fixed width user interface for a Lotus Notes Client application.

Build

We'll be using Form, Frameset, and View Design Elements as well as Notes Client-friendly Stylesheets and Image Resources in our build.

We'll start by creating 2 Page Design Elements -- which we'll leave blank for the moment -- named (border)|border and (blank)|blank.

We will then create a Form Design Element named (ui)|ui, and for the moment simply add a hidden, Computed for Display Text Field named "SaveOptions", which we'll set to "0".

Now, let's create a simple View Design Element named (ui)|ui, add whatever columns or other attributes you desire... but functionality-wise the only thing you'll need to include is a Target Frame (for double click launching), which we'll set to "NotesView".

Bring it all together is our Frameset Design Element, which will act as the Default Launch Object for Lotus Notes Clients. This Frameset, named Default|default, will consist of the following Frames:

The only thing to remember from here is that the NotesView Frame will handle all View, Form, and NotesDocument surfacing... with the rest of the Frameset contents acting as the desired border. Keeping that in mind, you can really push the design to mirror a more fluid and webbish user interface.

For example, Action Bars can have their backgrounds set to white (matching the surrounding contents). Actions themselves can have no border, with their text set to underlined blue... matching the look of a default web browser hyperlink.

Example Application

Here's a look at a Lotus Notes Client app that using this technique, my Remote Console app.

At it's core, it is a simple application: Three types of NotesDocuments, two of which are user-maintained [Servers and Commands]. This app however showcases that, no matter how simple the application, attention to the user interface can make it appear more rich and feature-filled.

In Closing...

There are options available to Lotus Notes Client application developers using Traditional Design Elements and techniques.

I'm working on Remote Console HD now - which will be a more robust version of Remote Console and written using XPages. I can not tell you how much easier it is to create these advanced-looking, highly-interactive user interfaces using XPages [and even XPages in the Lotus Notes Client]. While there are still a few gotchas that you need to keep in mind, XPages gives you much more flexibility and a far-richer palette for writing user interfaces.

Expect a similar article using the XPages counterparts soon.