All about Lotus Domino Development (AaLDD)

I do not know how many times I have written a class for aligning a text right or left. Too many, that’s for sure.

The idea with a CSS toolbox is to include a separate stylesheet for these “utility” styles. A CSS toolbox contains styling information that is nothing unique to any particular web application. It’s a collection of common styles that can be useful on any web development project.

A CSS toolbox is not a CSS reset and it is not a CSS framework. And it contains none of the special styling that makes any web application so unique.

Using a CSS toolbox will save you some time. It saves you from writing the same styles over and over again.  If you use the same toolbox your markup will share the same common class names and makes it easier for you to jump back into and understand it.

Here is mine:

/*
AUTHOR: YOUR NAME HERE
you@domain.com

*/
/*
RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY
*/
* { margin: 0; padding: 0; }

html { overflow-y: scroll; }

body { font: 62.5% Helvetica, sans-serif; }

ul { list-style: none inside; }

p { font: 1.3em/1.3em; margin-bottom: 1.3em; }

a { outline: none; }

a img { border: none; }
/*
LAYOUT TOOLS
*/
.floatleft { float: left; }

.floatright { float: right; }

.clear { clear: both; }

.transpBlack { background: url(transpBlack.png); }
.layoutCenter { margin: 0 auto; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.textLeft { text-align: left; }

/*
TYPOGRAPHIC TOOLS
*/
.error { border: 1px solid #fb4343; padding:3px; color: #fb4343; }
.warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut { font-size: 125%; font-weight: bold; }
.strikeOut { text-decoration: line-through; }
.underline { text-decoration: underline; }
.resetTypeStyle { font-weight: normal; font-style:normal; font-size: 100%; text-decoration: none; background-color: none; word-spacing: normal; letter-spacing: 0px; text-

transform: none; text-indent: 0px; }

/*
PAGE STRUCTURE
*/

#page-wrap {
 width: 775px;
 margin: 0 auto;
}

/*
PRINT TOOLS
*/
.page-break { page-break-before: always; }

/*
DISPLAY VALUES
*/
.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }

According to Wikipedia refers XML data binding to the process of representing the information in an XML document as an object in computer memory. This allows applications to access the data in the XML from the object rather than using the DOM to retrieve the data from a direct representation of the XML itself.

In other words you could tie HTML tables to Notes data and navigate through it without reloading the page.

For this SNTT demo I needed:

• a form to create Book documents with
• a view to present the books documents as XML
• a page on which I define an HTML table and connect the table to the XML view in order to give it content
• (a $$ViewTemplate for the Xml view)

First step:

• Create your Notes form with some fields. I choose Title, Author, ISBN and Price.
• Create a set of documents with this form.

Next:

• Create a view that presents the ‘Books’ documents as XML data.
• On the fifth tab under ‘Web access’ d not forget to set the option ‘Treat view contents as HTML’
• The view must start with an opener and closing tag for each document
• For each column you define sub child elements

• Setup a $$ViewTemplate for this View in order to be able to add a root element:

Reminder: do not forget to set the content-type for this Form as HTML.

Continue:

• Create a Form/Page that will hold the HTML Table.
• Add the following HTML on it:

As you can see the Table is linked to a datasource, in this case the View books.xml. Each TD in the TBody part is linked to a datafield. In this setup the datapagesize is set to 5, meaning 5 documents at a time will be displayed.

Some extras

By giving the table an ID (xmlTBL) you can add functions to navigate through the table such as:

• previous / next set of documents
• first / last set of documents

I bet you can imagine some much better pagination examples.

At the end your ‘bookstore’ will look like this:

I have included a working example here.

Okej, one day too late for SNTT, but some people are also allowed to post SNTT’s already on Wednesdays it seems…

Alen Grakalic wrote a nice article about using pure CSS as data charts. Basically via CSS Alen presents pure data in a graphical way.

Here is how it could look like:

(almost weekend? or those pills do work?!)

The screen capture is information from a Domino View embedded on a page and transformed with some CSS. Nice? I guess this is a very cheap way of creating more dashboard alike solutions…

Anyway, for those who are curious here is a downloadable working example. Have a nice weekend!

The problem with the Notes tabbed table is that you can not, by default, add an action when you click on a tab.

I created a tabbed table function in the way you probably would do it on the web (with hidding/showing divs) so a tab is just a table column with a text hotspot in it. When you click on the text a different table would be shown with an ‘active tab’ highlighted:

The reason for this solution is that the form is presented in a dialogbox and I have to set a parameter from which tab the user has selected a document-template (templates may be stored in different databases).

So how to fix this with a Notes tabbed table outlook?

First create images for all active tabs:

 &

Then sharpen your eyes (or use good photo-editor program) and select a part of the horizontal row/border that aligns the table to the width of the page (correctly described?):

This is an enlarged example:

Now place your tabbed images in separate tables, give the table a background color and a cell image of the ‘zoomed’ example:

On your ‘tabbed’ images you place hotspot rectangles that will do the hide/when-work. Here you can write now also the action that is not possible for a normal ‘tabbed table’:

At the end the result will look something like this:

Some people are just not that fortunate to have the privilige to be working with such an excellent tool as Lotus Notes is. In order to give them the option to add an action document created in a Notes application to their todo list in Outlook the code below will do the job:  

Sub Click(Source As Button)
 
 Dim ws As New NotesUIWorkspace
 Dim session As New NotesSession
 Dim db As NotesDatabase
 Dim uiddoc As NotesUIDocument
 
 Set db = session.CurrentDatabase
 Set uidoc = ws.Currentdocument
 Set doc = uidoc.document
 
 If uidoc.IsNewDoc Then
  Msgbox “This document has not been saved.” & Chr$(10) & Chr$(10) & “Please save prior to mailing this action!”, 4112, “New Document”
  Exit Sub
 End If
 
 Const Formula$ = { @DbLookup(”"; “”; “$People”; AssignedTo; “Email”) }
 Dim namesList As Variant
 
 Set myOlApp = CreateObject(”Outlook.Application”)
 Set myNameSpace = myOlApp.GetNameSpace(”MAPI”)
 Set myFolder = myNameSpace.GetDefaultFolder(13)
 Set myItem = myOlApp.CreateItem(3)
 
 Dim rtItem As NotesRichTextItem
 Set rtItem = doc.GetFirstItem(”Comment1″)
 
 With myItem
  .Assign
  namesList = Evaluate(Formula$, doc)
  Forall names In namesList
   Set myRecipients = .Recipients.Add(names) 
  End Forall
  .Subject = doc.Subject(0)
  .Body = “Action number: ” & doc.ActionNumber(0) & Chr$(10) & Chr$(10) & rtItem.text
  If (doc.NoDueDate(0)=”") Then 
   .DueDate = doc.DueDate(0) 
  End If
  .Importance = doc.Priority(0)
  .Status = doc.Status(0)
  .Categories = doc.Category(0)
  .Display
 End With
 
 doc.OutlookSave = Date$
 
 Set myOlApp = Nothing
 Set myFolder = Nothing
 Set myItem = Nothing
 Set myRecipients = Nothing
 Exit Sub
 
End Sub

Showing document information in the normal ‘vertical’ way can sometimes be pretty boring. It also requires a lot of space especially when images as part of the information becomes involved.

On the WWW a lot of examples can be found how to create a ‘CSS Image Gallery‘

But you will see when images have different sizes and their caption text underneath will differ the result will be quickly dis-satisfying:

Ofcourse you can set the same height and width on the images. But what for the caption text?

With a little bit of DOM scripting using Prototype you can simply rebuild your screen and show the view in a table format. Add the following code to the JS onLoad event:

//ALL DOCUMENT INFORMATION (ROW) IS DISPLAYED IN A DIV WITH CLASS THUMBNAIL:
varThumbs = $$(’div.thumbnail’);
varThumbs.each(Element.hide);
//NUMBER OF COLUMNS:
var numberDocs = 3
var varRowCounter = 1
var varTable=”";
if (varThumbs.length > 0) {
 varTable+=”<table border=0>”;
 varTable+=”<tr>”;
 for (i=0; i< varThumbs.length; i++) {
  //FYI (5 % 5) =>  5 Mod 5 returns 0
  if (varRowCounter % numberDocs == 0){
   varTable+=”<td valign=\”top\” onmouseover=\”style.backgroundColor=’#F4F4F4′;\” onmouseout=\”style.backgroundColor=’#FFF’;\”>” + varThumbs[i].innerHTML + “</td></tr><tr>”
   varRowCounter=1
  }  
  else{
   varTable+=”<td valign=\”top\” onmouseover=\”style.backgroundColor=’#F4F4F4′;\” onmouseout=\”style.backgroundColor=’#FFF’;\”>” + varThumbs[i].innerHTML + “</td>”
   varRowCounter+=1
  }  
 }
 varTable+=”</tr>”;
 varTable+=”</table>”;
}
$(’viewbody’).replace(varTable)

‘viewbody’ is the DIV where the $$ViewBody field is nested.

In a previous writing I explained how you can create a navigation-menu that collects it’s information straight from a Notes View.

Using the ?ReadViewEntries URL command Notes outputs the view data in XML form which can be the source of a transformation to HTML using the XSLTProcessor in your browser.

When the project became actual again I found some time to improve it’s functionality, since it was not working 100% in Firefox. So here is an example available for downloading.

Here is short summary of the example’s features:

• the navigator collects it’s source data from a Notes view using the ReadViewEntries command
• when navigating through the menu for each subcategory (via the + and - icons) a new AJAX request is done to collect the information withing that (sub)category (so the amount of data is being divided into smaller parts)
• the information is being transformed into HTML via the build XSLTransformator of the browser
• when clicking on (sub)category a collection of responding documents is collected and presented in another frame
• the navigator also contains document links which will load the document info in the right frame when clicked
• documents can be grouped under whatever structure in the View

Very nice, I did not manage to solve 1 thing yet: if a (sub)category contains subcategories AND documents, the documents are being displayed FIRST. I rather would display the subcategories first and then the documents. Maybe you can help me with that one?

Documentation is something we would (like to) do if there would be time calculated for it in every project. But in a lot of development projects the customer is not interested to pay for something he/she is not going to read at all so where to ’store’ the application logic?

To my opinion it can help to use the IBM like approach in delivering brief documention in their templates, just like Rocky Oliver talked in his session ‘Creating Maintainable IBM Lotus Notes and Domino Applications - Writing Readable Code’ at Lotusphere 2007.

How do you deliver your documentation?

A sample of above can be found here.

For a computed text I needed to write down the value of a dialoglist field which uses aliases.

Luckily the number of options was limited, but for a list of long options I do not want to use this construction:

@If( condition1 ; action1 ; condition2 ; action2 ; … ; condition99 ; action99 ; else_action )

Therefor I came up with the following solution creating a text-list with options and then go through them using @Elements, @Right and @Left:

status:=”Draft|0″:
“Awaiting Approval|1″:
“Approved|2″:
“Archived|3″:
“Rejected|91″:
“Returned|92″;

@For(n := 1;n <= @Elements(status); n := n+1;
 rightvalue:=@Right(status[n];”|”);
 @If(rightvalue=Tx_Status;leftvalue:=@left(status[n];”|”);”")
);
leftvalue;

I have uploaded a demo application, yuk Notes 8 vocabulary, here for download. The default frameset contains a form. Fill in some data in the fields and try to leave the form. A following warning will show up:

Enjoy!

Ps this database was saved with the Notes 8 Designer. Can anyone tell me where the ‘Save’ smarticon went? I could not find it while working on the form. Using the File-Menu-Save really is annoying?

While kicking Notes 8: what the hell must that ‘Preview in Web browser’ icon look like? Notes 8 smart icons: BAD!!!