All about Lotus Domino Development (AaLDD)

Currently I am collecting all sorts of information about implementing the DOJO Toolkit in Lotus Domino applications. Basically for preparing myself for a upcoming project to ‘pimp’ an existing web-application using this JS Framework.

Untill now I have been only working with Prototype and Scriptaculous (which I like a lot) but since IBM’s horizon also shines more and more Dojo I am really curious in DOJO’s capabilities. Especially since documentation seems to be getting better and better.

I have found a good presentation about implementing the Dojo Toolkit in Lotus Domino applications on Slideshare. You can find the presentation here.

It seems that more and more Notes related people find the time and effort in uploading their presentations on this site, which is ofcourse a very good thing! (HINT)

One of the blogs I often read is the one from Antonio Lupetti who is a Web developer, not a Notes developer. Especially his article about pagination caught my attention since it remembered me about the idea to rewrite Bob Obringers ‘ultimate view navigator’.

Bob uses in his approach for the pagination a table to display the page numbers where a list should be more suitable.

As the image below shows with Antonio’s approach it is pretty easy to make the pagination more compatible with examples seen on other well known sites. Here is a Flickr alike pagination for a Domino view:

Anything new under the sun? Not really, but for the ‘purists’ under us more esthetic solution.

Ofcourse a working example can be found here.

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?

While waiting on the next plane I write this little posting about a simple technique used in the very nice !!Help!! application available on OpenNTF which give a basic support for different languages support across an application.

Actually I was looking at a more advanced solution using Yahoos Translator utily, but time made me decide to the most easy/quickest approach making the most benefit of Domino functions itself.

While my main focus is development for the web the technique can still be easily used across forms. Here is how it works:

• In Notes documents you define the values for each language you want to suppport, mostly these values are grouped by the design element you use them in or the specific type of element they present (field labels, action buttons… things like that)

• On the design element itself you make a connection to the preferred language selected by the user, in my example it is a normal document that is being treated like a ‘profile document’:

• Add lookup fields for each ‘language’ document you have created:

• On the place in the design element where you want to show/use the related value you strip the results and return the result:

That’s it! But… wait. This does not work for buttons on a form because Domino allows not a computed value/label for it.

JSON to the rescue!

The most easiest way to get the values in an array I thought was transforming them in a JSON format wia basic @Functions:

With this array I easily approach all my <input> type buttons via Prototype and replace their values with the value defined in the array:

A downloadable working example can be found here. I wonder which language support systems you are using?

This post describes briefly an implementation of Scriptaculous’ Ajax.Autocompleter class.

It uses an AJAX request using a Page element for an @DBLookup I believe first mentioned at Lotusphere 2007 by Jack Rattcliff and later (?) by Jake Howlett in his http://www.codestore.net/store.nsf/unid/BLOG-20060221 and perfectionized (?) by my collegue Tomas.

Scriptaculous autocompleter needs an unordered list in return. For instance this list might be returned after the user typed the letter “y”:

<ul>
    <li>your mom</li>
    <li>yodel</li>
</ul>

Some examples use an agent to return the unordered list, others describe using a page.

The demo allows you to fill in multiple fields after clicking on one of the presented suggestions by splitting the responseText:

In demo-mode it would look something like this:

For downloading a working example click here.

I received a couple of mails saying that the link to Bob Obringers article on his ‘ultimate view navigator’ is dead and if I could send a copy of the example.

I have uploaded a working example > here < including an example for a flat view and an example for a categorized view. In the flat view I have included Prototype’s AJAX request handler, the categorized view still uses Bob’s approach. Good luck!

Updated: the application had local encryption enabled…

Here is an updated version of the JS header, now fully making benefit of prototype’s Event.observe event listener. Note: the code is not updated in the download link you can find here.

// SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING
function formChange(){ 
 $(’isChanged’).value=”1″;
}

window.onbeforeunload = confirmExit;

function confirmExit() { 
 if($F(’isChanged’)==’1′){
  return “You have not saved the form yet. Are you sure ?”;
 }
}

Event.observe(window, ‘load’, init, false);

function init(){
 var inputs = $$(’input.required’);
  for (var i = 0; i < inputs.length; i++) {
     Event.observe(inputs[i], ‘focus’, oninputfocus);
     Event.observe(inputs[i], ‘blur’, oninputblur);
  }
  var textareas = $$(’textarea’);
  for (var i = 0; i < textareas.length; i++) {
     Event.observe(textareas[i], ‘focus’, oninputfocus);
     Event.observe(textareas[i], ‘blur’, oninputblur);
  }
}

var tempinputvalue =”";

function oninputblur(e) {
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
  }
 if ($F(source) != tempinputvalue) {
  $(’isChanged’).value=”1″
 } 
}

function oninputfocus(e){
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
 }
 tempinputvalue = $F(source)
}
// END - SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING

I noticed that WordPress uses a similar technique when writing posts.

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!!!

This posting is merely a big ‘thank you’ to Philippe Gauvin’s posting ’Warning before navigate away from a web form without save’ and Simon Willison’s posting ‘Simple Tricks for More Usable Forms’.

Philippe describes how you can add a function that warns users when they intend to leave the window without actually saving the document. Simon describes the way how to add event listeners to forms, which is a great add-on Philippe’s article because Philippe ‘forgets’ to write how he implemented the code to work.

So what is the idea?

• a users has a form opened
• when he clicks on a link that leads him to another page a warning comes up if he really wants to leave the page without saving or if he wants to stay on the form so the document can be saved
• the condition I added is: if there are changes made to required fields then I think the user has actually worked on interesting information, so in these cases the warning should pop-up.

In my example each required field has a classname ‘required’ (a bit based upon Andrew Tetlaw’s really kewl javascript form validation method). When there is a difference between entering the field and leaving the field a third field will change from value “0″ to “1″ which should initiate the warning.

Adding Eventlistening

I did not want to add into every single field a function that would check if there have been made changes, so on the windows load event we add an eventlistening. As soon as the user enters and leaves one of the ‘required’ fields we run an onfocus or an onblur function.

How to implement?

Just follow Philippe’s instructions. Basically I added a Notes field, gave it an id ‘IsChanged’, default value is set to “0″ and I made it hidden. Then I copied in the JSHeader of my form the first part of the code:

// SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING
function formChange(){ 
 $(’isChanged’).value=”1″;
}

window.onbeforeunload = confirmExit;

function confirmExit() { 
 if($F(’isChanged’)==’1′)     return “You have not saved the form yet. Are you sure ?”;
}

(by the way, yes we use the Prototype library)

Second, based upon Simon’s article I added the next lines of code in the JS Header:

addEvent(window, ‘load’, function() {
  var input,textareas;
  var inputs = $$(’input.required’);
  for (var i = 0; i < inputs.length; i++) {
     addEvent(inputs[i], ‘focus’, oninputfocus);
     addEvent(inputs[i], ‘blur’, oninputblur);
  }
  var textareas = $$(’textarea’);
  for (var i = 0; i < textareas.length; i++) {
     addEvent(textareas[i], ‘focus’, oninputfocus);
     addEvent(textareas[i], ‘blur’, oninputblur);
  }
});

function addEvent(obj, evType, fn){
 if (obj.addEventListener){
     obj.addEventListener(evType, fn, false);
     return true;
  } else if (obj.attachEvent){
     var r = obj.attachEvent(”on”+evType, fn);
     return r;
  } else {
     return false;
  }
}

var tempinputvalue =”";

function oninputblur(e) {
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
  }
 if ($F(source) != tempinputvalue) {
  $(’isChanged’).value=”1″
 } 
}

function oninputfocus(e){
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
 }
 tempinputvalue = $F(source)
}
// END - SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING 

 This initates the event listening for the onblur and onfocus events of the fields with classname ‘required’. That’s it. I do not know how I can adjust the default warning popup, but I guess sure one of you know: