Tag Archives: Dojo

Adding a dojo calendar control to traditional Notes date fields

Posted by on 7 November,2012 8 comments

When web enabling old Domino forms date fields has never been fun. users setting the wrong format, and the save breaks the form giving a error 500. There has been alot of dhtml calendar pickers that has been used some better and some worse of handling other browses than IE.  We all have these applications that is  very large and that you don’t can convert directly to XPages, then adding dojo to your old forms can help you.

 What do you need to do to get a dojo calendar control to work with a old date field in a form, not much actually. Dojo is really good of helping you to do this move.

First you have to decide if you want to host the dojo toolkit locally or thru i.e Google CDN.

It’s just the url:s in my example that you need to change if you want to host the dojo files in the html directory on your Domino server.

Add the following with passthru html to a subform

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css"/>

Update:
In 8.5.3 you could use this internal url to dojo instead of the CDN
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js 

When this is done you need to add this subform to your form.

You also need to add the theme class to the body attribute section of the form. 

“class=\”tundra\”

 

On your date fields on the form add the following to the HTML attributes to the field

“dojoType=\”dijit.form.DateTextBox\” ” 

And your done, add the last row to all your date fields to get a calendar control in all of them.

This calendar control will use browser locale when deciding how the date should be displayed.

Or you can like I like to do set a pattern that matches the date format on the server by changing the dojo type we specified on the field to

“dojoType=\”dijit.form.DateTextBox\” constraints={datePattern:’yy-MM-dd’}”

The Dojo series will continue with more controls both in traditional Notes and in XPages.

Enjoy

Dojo and jQuery part 2

Posted by on 2 November,2012 No comments

Part 2 should have been some more examples but I feel that I need to write some about the response on my first part there where alot of comments discussing different things around Dojo vs jQuery.

First I like to say that my compare between these two was to show that you can do the same things with Dojo as you can do with jQuery and the code does look almost the same, also that Dojo has so much more inside the “package”. 

Joacim wrote why are you comparing an older version of Dojo than jQuery well because I´m mainly working with Dojo and xPages and the Domino server currently has an old version of Dojo and jQuery would be an addon to the server and then be of the latest version. But also to point out that even though Dojo 1.6 is 2 releases old you still can still use it and it will work great, and there is no need for jQuery. If you should learn one client side library it´s Dojo because this is what IBM is using for all the things in XPages.

I will continue with my Dojo travel in part 3 and that one will include some code I promise 😉

HTML manipulation Dojo vs jQuery

Posted by on 1 November,2012 11 comments

I have seen some writing by TexasSwede about how to use jQuery for manipulating the DOM and it seams easy but why import another toolkit for manipulating the DOM? Well perhaps if you know jQuery that might be the case or that you think jQuery is better. 

Let’s compare jQuery vs Dojo for some simple DOM changes. I’m using the latest jQuery 1.9 vs Dojo 1.6, why not the latest version well because XPages currently has 1.6 and because 1.8 has a different syntax.

let’s add the class pretty to every a tag in the page

 jQuery

  $("a").each( function() {
    var tag=$(this);
    tag.addClass('pretty');
  }

Dojo

 dojo.query("a").forEach(function(node, index, arr){
      node.addClass("pretty")
  });

The code is quite similar in both Dojo and jQuery, I don’t know about speed perhaps some of you readers know?

I’ll move forward in part 2 with some more Dojo stuff, stay tuned.

PS!Don’t forget to change your email signature

Sent from Lotus Notes – More than an inbox