Your Development & Design Resource
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.
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
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:
|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.|
|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...).|
|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.|
|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.
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.
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.