jQuery Mobile 1.3 Panel Widget XPages demo (for download)

The last couple of days I have been ‘playing’ with jQuery Mobile and mostly with the panel widget.

I have made some kind of starter-kit (NSF) to build a great XPages app for tablets/smartphones. I have setup a subset of custom controls which accept properties. A simple form in Notes you can use to setup navigation for header, footer and a vertical menu.

You can download the (zipped) NSF on Dropbox.

Below you can see a sample result:

panelinxpages

Please let me know if you experience any problems or if you have suggestions for improvement. Happy coding!

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.

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.

Update: ‘Warning before…’ – Demo

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:

demo screen

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

Warning before navigate away from a web form without save

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:

warning

Calculating remaining characters in a field

On Assono’s blog I read a SnTT-article that demonstrates a way to show the remaining characters for a field on a Notes form. In his example the value are being written in a second field.

It reminded me about a similar request I had. A customer wanted to have (on a Domino form) several input fields below each other in stead of one textarea field. This would make it easier to write the data afterwards to a different system (each new field would resemble a breakline).  When the maximum number of characters has been entered the next field should be shown and get focus so the end-user could continue writing.

In my approach I used a <SPAN> tag in stead of an extra design element (field). The next image demonstrates what came up with (untill now):

remaining characters 

Since I have started working with the Prototype JS library recently (yes shame on me) , this was a nice case to try and implement it in an application.

What can illustrate maybe best how it works is the next image of the onKeyUp event:

onkeyup

Each field has on it’s right a <SPAN> tag. For each field is definited how it should behave, what it should show when and where. If the field-value has come to a certain length (a variable in the HTML Head Content) the next field should be displayed and have focus, on this condition that the current field contains the attribute “nextstep =  follow”. Therefor the last field in the example misses this extra attribute.

I also added 3 keycode events to the condition so no backspace, arrow left and arrow right is taking in notice.

In the onLoad event of the form I added the maxlength attribute from the JS variable to all concerning fields . I have noticed that in order to let Internet Explorer understands that you want to add a value to it you need to write ‘maxLength’ in stead of the expected ‘maxlength’…

onLoad of the form

Well that’s all! Here is a link to the sample application (like they like to say in Notes 8).