Archive for November, 2007

Pagination – Examples and good practices

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.

In most cases pagination is better than traditional “previous – next” navigation as it offers visitors a more quick and convenient navigation through the site. It’s not a must, but a useful nice-to-have-feature.

The above article on Smashing Magazine shows that in my working example there are enough points for improvement:

example

for example:

example

example 2

Comments (2)

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

Leave a Comment

Documentation, right! How and where?

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.

documentation example

How do you deliver your documentation?

A sample of above can be found here.

Comments (3)

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?

Comments (1)

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.

Comments (13)