xPages and Javascript Libraries/Toolkits

When it comes to developing web applications
in xPages I’ve heard a number of discussions around which JavaScript library
or toolkit you should be using. There are many excellent JavaScript toolkits
the most common being MooTools, JQuery, YUI, EXT etc etc. There are tons
of them and they all have their own benefits and community of users around
them which will tell you that their particular toolkit is better then all
the rest.

When it comes to xPages there is already
a JavaScript toolkit pre-installed on the domino server called Dojo. If
you have looked at Dojo in any way you are probably thinking that IBM selected
Dojo because it has no documentation and would therefore be a perfect fit
in the xPages world because the documentation for xPages is also practically
nonexistent, but you would be wrong.

JQuery and MooTools on their own are
very lightweight libraries, the powerful features only start to appear
when you add in plugins that the developer communities around both libraries
have created, however this can pose a problem, when jQuery or MooTools
gets updated there are no guarantees that the plugins your using will still
work and lets not forget about licensing, are those plugins your using
licensed for use in corporate applications.

Dojo on the otherhand comes with Dijits
and DojoX as part of the package. These optional libraries that are easily
added to your page by using a dojo.require statement are the equivilent
of plugins in the other libraries but because they are part of the package
you know that when dojo gets updated all these extras will also get updated.
That is an incredible bonus for the dojo user community.

Now you may have seen some really cool
MooTools or JQuery examples and want to use them in your website, you could
add the Jquery or MooTools layer on top of the Dojo layer in xPages but
why stuff loads of unnecessary files down the pipe to your users when you
could do it all in Dojo. There is very little you can do in JQuery or MooTools
that can’t be done in dojo. At the end of the day the logic is the same
its really just a case of a slightly different syntax.

As an example of what I mean I found
a really cool ‘sliding login’ written by Jeremie Tisseau of web-kreation.com.
He has a version written for MooTools ( demotutorial ) and a
version writen for JQuery ( demotutorial ). I would
love to use this in a xPages application but it is not written in dojo.
I could just add JQuery to my page or I could rewrite it in dojo.

Rewriting the sliding login in dojo
was a lot easier then I imagined. I was able to take the tutorial from
web-kreation.com and look at the logic behind
how the sliding panel was created and then take that logic and apply it
to dojo. Then once I had the scripts working in dojo I was able to break
it down and apply it to an xPages application using tricks like #{id:controlname}
to get the xPages renderd ID names at runtime and by adding the onClick
events directly to the xPage controls in Domino Designer rather then link
them during a dojo.ready event.

Want to see the xPages version in action?
Here’s a demo* of how it stands
right now. While I have yet to implement the registration component the
login part is working perfectly and it does all it’s work via an AJAX call
to the domino server to determine if the person logging in has rights to
the database or not.

So now when your wondering about which
JavaScript library to use stand back a bit and ask if you can write the
function in dojo so that your not pushing extra files down to the client
that are not really needed.

* The Sliding Login panel will be released
on OpenNTF under the Apache Public License V2 when it is finished. The
original version by Jeremie Tisseau was released under the Creative Commons
License V3.0 which allows it to be included in an APL2 code release.

Advertisements
Tagged with: ,
Posted in None
10 comments on “xPages and Javascript Libraries/Toolkits
  1. David Leedy says:

    Great stuff Dec!I’m looking forward to playing with this.

    Like

  2. Patrick Picard says:

    Very Sexy!

    Like

  3. Curt Stone says:

    Great explanation of the concept. I appreciate knowing that learning one toolkit goes a long way. We’ve got so much to learn as it is. Great post. Thanks.

    Like

  4. Henning Heinz says:

    Great code example. I would still prefer that Dojo could be disabled and/or does not load if it is not needed.Many web environments do not force you to use a certain javascript library.

    Like

  5. Anonymous says:

    { Link }Very nice example Dec. I can’t wait until I can see how you solved this in Dojo.

    Like

  6. Lothar Mueller says:

    This is great! As with the others that commented here I can’t wait to see the source behind it

    Like

  7. Paul Withers says:

    A lovely slick panel, I can see it becoming another standard custom control.
    I agree dojo can be frustrating at times, particularly because of the documentation. But for me it’s the toolkit of choice because it does come with Domino, has several themes, has already been extended by IBM within the install, and is already being added to by IBMers (e.g. legend widget for charts). There are some places where you need to force compatibility mode in IE, but that’s not difficult. And to see the whole code in a nice readable format, I would recommend dojomino ( { Link } )

    Like

  8. dont forget to consider performance of toolkits:{ Link }

    Like

  9. Mark Hughes says:

    This is awesome! Cant wait for the tutorial

    Like

  10. Roy Rumaner says:

    Once again Dec you have shown that you are one of the greatest XPage developers we have available.

    Like

Comments are closed.

Archives
%d bloggers like this: