Implementing ImageFlow in a Domino app

For my ‘photogallery’ application I got a bit tired of the Smoothgallery implementation. Basically I was looking for sometime more attractive and less ‘busy’. That is when I bumped into ImageFlow a JS image gallery in a iTunes alike way (and probably more Apple software which I do not use).

Here is what it looks like in my app:

imageflow_good1
this is how it looks in my app

Some rules for implementing ImageFlow in your Domino app:

  • ImageFlow is written for PHP applications, so for each image you include the reference gets rewritten in a following format:

<img width=”400″ height=”300″ alt=”Image 4″ longdesc=”img/img1.png” src=”reflect2.php?img=img/img1.png” style=”cursor: default; display: block; left: 351.665px; height: 329.215px; width: 292.635px; top: 118.524px; visibility: visible; z-index: 18;”/>

If you look at the imageflow.packed.js package you get lost since it is packed. Dive in the imageflow.js and search for the following lines:

 

var src = node.getAttribute(‘src’,2);

//src =  ‘reflect’+version+’.php?img=’+src+thisObject.reflectionGET;

Change the last line into:

src =  src+thisObject.reflectionGET;

 

Then upload the following files to your database:

  • imageflow.css
  • imageflow.js
  • slider.png (the dot image that is used on the slider)

In the download on the ImageFlow site in the index.html you find the source how to structure your HTML. Modify the references to the images in your Notes app and you are good to go!

Happy coding =)

Implementing Smoothgallery into a Domino application

It was a while since I opened my Designer client for developing a new project due to other responsibilities. At this time I am prototyping a basic Notes application where users can upload images via the Notes client and browse through them via a Web browser.

So what is the status? Well in a couple of days I have come pretty far:

 

  • a project name for the application (you have to start with something)
  • upload (of multiple ) images via the Notes client and automatically creating thumbnails – checked
  • a nice interface for the Notes client – checked
  • an attractive layout for the Web client – checked
  • a lightbox function for display the high resolution images with a faded application in the background – checked
  • different ways to navigate trhough the application (by categorie, tags, by author, archive, calendar) – checked
  • additional features as RSS, simple search, option to leave comments – checked
  • login function so a user can easily see his/hers contributions – checked

 

In the startpage I have the following features:

 

  • a sliding gallery based upon Smoothgallery more about this later 
  • overview of the last 3 added pictures
  • an overview of the last 3 comments
  • an archive overview
  • a section with some contact information

 

Well I still have something left in my wishlist:

  • XPaginate (is that correct?) the application ofcourse haha
  • add an option to send email to people with a link of the image
  • upload functionality from the Web client
  • improve the search functionality (at this point it searches a view)
  • … some more spice probably

Smoothgallery

Well this post is about the Smoothgallery which was really easy to implement. The gallery has the follwoing functions:

  • a (main) slider for showing medium sized images, with previous and next image function
  • a slider for showing thumbnails, this slider has a mouse-over sliding function
  • some text / description that will be displayed as a layer on top of the current image in the (main) slider

Let me start by showing you some end-result, here is an image of the gallery as it will be presented by default. I marked the 3 sections described above:

 

gallery image
gallery image

 

So how did I get this to work?

Start coping the files under the directories CSS, Images and Scripts in the download to your Shared Resources \ Files section. The gallery uses the  MooTools JS Framework.

To get the files loaded add the following references in your HTML Head Content:

 

html head section
html head section

Add also the following JS function somewhere on your form:

 

JS Function
JS Function

And drop the follwoing code where you want to have the gallery displayed:

 

gallery position
gallery position

The Computed Text is a @DbColumn to a view:

@Implode(@DbColumn(“”:””;””:””;”$v-pixsmoothgallery”;1))

On the view we say we want to have its content to be displayed as HTML and the view has only one column with the following code:

 

formula in column
formula in column

(My upload agent creates 3 kind of images for each upload: 1) the original size 2) a medium size 3) a thumbnail size. You can forget the firstline here in the code)

Is that’s it? Yeah! In practically half an hour job I had the complete gallery up and running.

Here are some screendumps of the app:

bildr06

bildr07

bildr08

Just let me know if you are interested in more code-drops…

Introduction Dojo Toolkit & IBM Lotus Domino

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.

Introduction Dojo Toolkit & IBM Lotus Domino - presentation

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)

Perfect pagination style using CSS

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:

Flickr alike domino view pagination

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

Ofcourse a working example can be found here.

Displaying documents in a View in a ‘Thumbnail Gallery’ format

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:

css gallery example

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.

Navigation-menu from view (XML Transformation)

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

example navigation 

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?

example of results

Language support in DB

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.

here is how it looks like

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)

language notes documents

  • 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’:

language support on form

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

language field lookups

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

showing the value(s)

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:

@functions presing JSON array

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

transforming the buttons

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

Scriptaculous autocompleter in Domino form

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:

autocompleter form

In demo-mode it would look something like this:

demo autocompletion

For downloading a working example click here.

Download Pagination example

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!

page navigation example

Updated: the application had local encryption enabled…

Update: ‘Warning before…’

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.