dominoGuru.com

Your Development & Design Resource

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

Traditional Fixed-width Lotus Notes Client Application Layout 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:

Traditional Frameset for center-aligned fixed-width layout for 
Lotus Notes Client apps

Color Type/Value Frame Details
Page
(border)|border
border_left & border_right Set to 25% width, no scrolling, non-adjustable, these full-height Frames are positioned to the left and right of the body of the user interface. Non-functional.
Form
(ui)|ui)
header Set to 750 pixels width, a fixed height (300 pixels, for example), no scrolling, non-adjustable, this will be the header of the app, with logos, data, anything that's needed/desired. Non-functional (per se, unless you want to include functionality here...).
View
(ui)|ui
NotesView The meat of our app, this frame will contain the Views, Forms, and any other content. Set the width to 750 pixels [height to Relative 1], scrolling to auto, and - in the case of Views, show Headers and Action Bars.
Page
(blank)|blank
footer Setting the width to -- you guessed it -- 750 pixels and the height to 50 pixels, this non-scrolling, non-adjustable frame acts as a simple pad, and completes the embedded look and feel of the UI.

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

Remote Console App - Dashboard

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.


About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.



More from dominoGuru.com


dominoGuru.com is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, dominoGuru.com by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.