Image Annotation on Lotus Domino

CodeI found this very nifty script using JQuery to annotate images on the web ala Flickr and Facebook. On my end, the challenge was to implement it on a Lotus Domino web application.

One of the first things I needed to do was to submit the data and to convert it to JSON format:

notes = [{“x1″:”10″,”y1″:”10″,”height”:”150″,”width”: “50”,”note”:”This is note one”}, {“x1″:”25″,”y1″:”25″,”height”:”70″,”width”: “80”,”note”:”<strong>This</strong> is a new note This is another note This is a new note”}];

In order to do this in domino I needed to use two Computed fields, of text type and computed after validation. Also, I would need the fields for the data that would set the height and width of the annotation box, and the note that goes with the box. (NoteHeight, NoteWidth, NoteNote). Field 1 will have the following value:

@If(@IsNewDoc=1; “{\”x1\”:\””+ X1+ “\”,\”y1\”:\””+ Y1+ “\”,\”height\”:\””+ NoteHeight+”\”,\”width\”:\”” + NoteWidth + “\”,\”note\”:\””+NoteNote+”\”}”;notesdata + “, ” + “{\”x1\”:\””+ X1+ “\”,\”y1\”:\””+ Y1+ “\”,\”height\”:\””+ NoteHeight+”\”,\”width\”:\”” + NoteWidth + “\”,\”note\”:\””+NoteNote+”\”}” )

Field 2 will take this value in JSON format and add succesive annotation data that will be handled by the jquery plugin:

@If(@IsDocBeingSaved=0;”[]”;”[” + notesdata +”]”)

After that, we just need to run  Evaluate() on the text string to create the JSON objects:

notes = eval(‘(‘ +     document.forms[0].field2.value + ‘)’);

You should then have the plugin working on your domino web application. It should be similar to the plugin demo.

Hiding div blocks using Javascript DOM and Checkboxes

CodeLotus Domino has a unique function to hide certain elements of a design element called “Hide-Whens”. Basically, this text option can be set to hide a field, text or code based on a formula. But, if you plan on using this on the web and would like it to be triggered by a field change event, more than likely you will need to refresh the entire form so the hide-whens will take effect.

This is not pretty especially if you have several fields refreshing and controlling other fields or texts. Also, this presents other problems because constant refreshing slows down your application.

So the use of Javascript DOM for hiding objects inside a DIV can prove useful if you would like that users be able complete a form without refreshing it from the get go.

object.style.display=value

Toggling this DOM property’s value to “none” would work the same way as a hide-when when you can create a function from it using the fields on your form. For my example below, I used a checkbox field to trigger the function and toggle the display property based on the value of the field.

Here is a simple demo in HTML. This is easier though to implement in Notes as you can just place the function in the onchange event of a field. You can also further develop the function if you are using multiple checkboxes  or if you have a more complex rule on hiding/displaying the fields.

Use, the following function on the onchange event of your checkbox:

toggledisplay(‘div id‘, ‘field id‘, ‘value you would like to check‘);

Here is the javascript function:

function toggledisplay(divname, checkfield, checkvalue)
{
var count=0;
var fdivname = document.getElementById(divname);
var fcheckfield = document.getElementsByName(checkfield);

for (var z = 0; z <fcheckfield.length;z++) {
if (fcheckfield[z].checked) {
if (fcheckfield[z].value == checkvalue) {count=1;}
}
}

if (count==1 )
{fdivname.style.display = “”;}
else
{fdivname.style.display = “none”;}
}

On being IBM certified and the new Lotus Notes

IBM CertifiedLast week. I passed the exam to gain an IBM Certified Associate Developer Lotus Notes and Domino 7 certification. I previously held a Notes 6/6.5 certification, but since IBM retired that test, I needed to get certified in version 7 in order to progress to Advance Application Developer status.

I have always pondered if focusing on Lotus Notes development was a correct career move for me. There are some companies moving away from  Lotus Notes as the industry perception is that Lotus is a dying platform (not necessarily the consensus). But, enter the newest version that turned gold this year, version 8.5. My biggest turn on was the decision to move the IDE into Eclipse.

Eclipse originally started with IBM, which probably contributed to finding itself in Lotus Domino development. It already was being used in Rational Software Architect which was a replacement for some of the modules of Rational Rose. This IDE upgrade provides a lot of  drag and drop functionality which can be edited on the code level. Not to mention the usability of Eclipse in terms of coding Java and JavaScript. The introduction of Eclipse to the Lotus Notes application development will certainly open a lot of doors for developers and adapters.

On the highly touted Xpages

Xpages are the new design elements introduced in Lotus Domino Designer 8. They are forms specifically (as of now) for web development. Here is as blog entry I read showing how to join data from multiple views on Xpages and I’ve got to say, this is very cool. XPages  will probably single-handedly propel Lotus development into the Web 2.0 generation.  Here is another blog entry showing what Xpages opens up for developers (just the mention of AJAX partial refreshes and joining views makes me drool).

So, I guess the idea of Lotus Notes and Domino is an old, clunky, severly limited platform is a thing of the past. IBM certainly did itself (and a lot of loyal developers who’ve invested decades on Notes) a huge favor in providing a better tool for better applications more suited for today’s technology trend.