Traditional Development of Controller - IBM Lotus Notes Domino Logic Utility

07/08/2010 10:47 AM by Chris Toohey

Taking MVC architecture to your apps will - hopefully - never be easier with Controller, my IBM Lotus Notes Domino Logic Utility. The Controller API will allow you to define application and business logic external to design, and allow you to evolve your apps to meet the ever-evolving business needs without re-development.

I thought I'd take a few minutes to show you an "under the hood" preview of the UI Design of this Lotus Notes Client application.

This application -- at least for version 1.0 -- is designed to run in a Lotus Notes Client, and should work from 8.5.2 to R5. I use Frameset, Form, and View Design Elements to deliver a rather simple yet current-looking User Interface... but it's not exactly RAD.

First, a quick walk-thru of the User Interface:

The dashboard or home screen consists of a simple navigation header and a display of all Control Documents.

This is done with the following Design Elements:

• 1 - Frameset
• 1 - Form
• 1 - View
• 1 - Subform
• 2 - Image Resources

The first step was to modify the Untitled View Design Element, naming it Documents|default|documents, and adding my design preferences as needed. In this case, it was to go simple: Verdana on white with bold column headers. I added 4px of padding at the bottom of the column header for better visual separation... and with a quick View Selection Formula I was done.

I then created a simple 2-frame Frameset Design Element, which I named Default. Once created, I simply deleted one of the Frames, leaving a single-frame Frameset.

After naming the frame NotesView, I set the source of that frame to a Form Design Element named (ui). This Form will act as my NotesDatabase Default Launch Object, but since you can't launch a Form directly as the Default Launch Object, I opted for the single-frame Frameset technique. Note: Hack #1. After that, I set the Frameset title to @DBTitle, and I'm done.

If you get an error when you try to save the Frameset... don't worry, it's because there's no (UI) Form Design Element yet.

Creating the (UI) is simple enough:

I set the background color and image to the maroon gradient you see in the screen capture (a 1x1050 Image Resources that's repeated horizontally). I create a single-cell, single-row Table, and set it to fit the margins. Putting a 2-pixel border on the Form, I then set the background to white. I add a no-repeat Image Resource to the background of my table, which will act as the application header.

Now, a simple Subform to contain the application navigation controls (Home, New Control Document, etc.). I could have put these inline, but having them in a Subform allows me to re-purpose them while maintaining a consistent UI.

From here, I embed my Documents View, select Selection tracks mouse movement to give it a hover-like state, and I'm done.

For my actual Control Document Form, I create a new Form Design Element named Control Document|document... by copy/pasting the (UI)|ui Form Design Element and renaming it.

See, unlike XPages, I can't include things like CSS and Custom Controls that would allow me to completely style the UI Element... so I have to resort to copy/pasting.

(I'm calling this one Hack #2, not because it's l33t, but because I feel like a hack for having to do it...).

Now for the Form build...

I honestly lost count of how many Tables I used here... but rest assured that there were a lot. Each field could consist of no less than 4 Tables:

1. Fieldset-type Container Table
2. Label and Field Container Table
3. Field Container Table
4. Padding Table (normally white, red for illustration purposes)

Yeah, that's certainly Hack #3!

Once I added some detailed directions to the left-hand side of the form (via a 2-column Table, of course...) and added my fields, hide-when formulas, and such... I was pretty much done!

Conclusion

I put together the design of this application in under an hour. In fact, outside of a few tweaks here and there the overall design is complete... at the UI level. More on the API and exactly what the logs are in an upcoming post.

I decided to go with Traditional Design Elements for this build -- quite frankly -- based on the numbers: there are more people running non-XPage environments. This resulted in my having to over-develop the UI to compete with other application interface and experience.

Ideally, the whole of IBM Lotus Notes Domino shops would be running 8.5.1, and thus would allow me to write-once-run-everywhere with an XPage version of this utility. Since that's not the case, version 1.0 will only run on the Lotus Notes Client. version 1.n however will feature an XPage UI, thus allowing able-environment shops to deploy this utility to Lotus Notes, Web Browser, and even Mobile Device Clients.

This utility will be available for purchase directly from this site for $5 USD, so interested parties stay tuned for an updated post once I'm finished with the Controller API Documentation and Demo Videos... which I suspect will result in a Monday, July 12th, 2010 version 1.0 release.