2. About Marky
Over 15 years IBM Notes Domino® work
Senior Consultant at PSC Group
• XPages Developer
• Project Leader
• jQuery Specialist
Contact Information
– Blog: http://www.xomino.com
– Email: mroden@psclistens.com
www.psclistens.com @pscgroup
– Twitter: @markyroden
– Skype: marky.roden
3. Agenda
What is jQuery?
What about Dojo? When should I use jQuery?
How does jQuery work?
How do I add jQuery to my XPages?
What are jQuery plugins?
How can jQuery plugins solve my requirements
4. Agenda
What is jQuery?
What about Dojo? When should I use jQuery?
How does jQuery work?
How do I add jQuery to my XPages?
What are jQuery plugins?
How can jQuery plugins solve my requirements
5. What is jQuery anyway?
A JavaScript library which simplifies the common
every day web development tasks of Document
Model manipulation, event handling, animation and
AJAX/JSON
Created: June 2006 by John Resig
Removes browser dependencies
Open Source (MIT License)
6. What is jQuery anyway?
60% of world‟s top 10,000 websites use jQuery
http://trends.builtwith.com/javascript (*Dec 2012)
Used by Microsoft .Net v4 as part of the ASP.NET AJAX
framework
Some websites you probably know using jQuery
Amazon Google
Twitter Dell
Wordpress Bank of America
Stackoverflow Drupal
BestBuy Wordpress
7. What is jQuery anyway?
Core
– Document Model (DOM) Manipulation
– Simple Animations
UI
– Pre-packages functional capabilities
– Analogous to Dojo Widgets
Mobile
– A unified, HTML5-based user interface system for all
popular mobile device platforms, built on the rock-solid
jQuery and jQuery UI foundation.
8. Agenda
What is jQuery?
What about Dojo? When should I use jQuery?
How does jQuery work?
How do I add jQuery to my XPages?
What are jQuery plugins?
How can jQuery plugins solve my requirements
9. What about Dojo? When should I use jQuery?
Dojo and jQuery have the same basic premise:
– Browser compatibility / Code simplification
Many similar capabilities.
– DOM manipulation
– Widgets (Date pickers, sliders etc)
Many differences
– Dojo intended for larger client applications
– jQuery intended to make coding as easy as possible
10. Where‟s the balance?
Many factors determine the balance
– Network connectivity
– Functional requirements
– Developmental experience with Dojo/jQuery
– Project timeline
– Maintainability of the application
– jQuery v2.0 (future) will not support IE<9
• “The entire jQuery core team instantly became giddy as they started
ripping out oldIE support for jQuery 2.0.”
17 Dec 2012 - Scott González (jQuery contributor)
11. Don‟t use jQuery when….
There isn‟t a justifiable reason to use it
jQuery is an additional download (~94k)
– Version 1.8 does allow for exclusion of code which is not
necessary
When not to use jQuery :
– Simple DOM manipulation
– To provide functionality which is already provided by Dojo
Widgets
– To determine runtime events in the onLoad event
– If you are using OneUI (*not for beginners)
– Because you don‟t want to learn Dojo
12. Use jQuery when……
Enhanced functionality not provided by Dojo
– Specific jQuery or jQuery UI functionality
– Specific Animation requirements
– Broader browser compatibility
The business plan supports jQuery usage
The requirements are best suited to a jQuery
solution
>>>>> The Plugin Community <<<<
13. Agenda
What is jQuery?
What about Dojo? When should I use jQuery?
How does jQuery work?
How do I add jQuery to my XPages?
What are jQuery plugins?
How can jQuery plugins solve my requirements
14. How does jQuery work - API References
API references Examples
Selectors (“ELEMENT”) (“.class”) (“#idTag”)
Attributes .attr() .html() .toggleClass()
Traversing .children() .closest() .find()
Manipulation .appendTo() .css() .val()
CSS .height() .position() .width()
Events .blur() .bind() .keypress()
Effects .animate() .fadeIn() .slideToggle()
Ajax .get() .getJSON() .serialize()
Utilities .grep() .each() .inArray()
Internals .error() .pushStack() .context()
Example API reference methods and properties
http://api.jquery.com
15. Select and conquer
1) Select the DOM elements you wish to affect
$(„.myClass‟) Select all elements with a class “myClass”
2) Concatenate the API reference to use
$(„.myClass‟).css(„display‟, „none‟) Set the display style to none
3) Execute
16. Chaining
All methods/properties return a jQuery object
– Allows for chaining of *all* other API references
$("p") Select All Paragraph nodes
Within each node find all words containing
.find(":contains('t')") the letter t
.css('color','red') Color those matches red
Advantages
– Object reuse: Lower memory consumption and faster
– Shorter more manageable code
– Easier syntax for beginners
– Easy plugin creation
17. Agenda
What is jQuery?
What about Dojo? When should I use jQuery?
How does jQuery work?
How do I add jQuery to my XPages?
What are jQuery plugins?
How can jQuery plugins solve my requirements
18. Adding jQuery to the application
jQuery is a Client Side JavaScript library
– Can be added to the application
– Can be referenced externally to the database
jQuery plugins contain images and style sheets
– A complete miniaturized application
– More than just JavaScript Code
– Could be complicated to maintain if all files were added
as resources
19. Adding jQuery to the database
Download the jQuery library
– http://jquery.com
– Save in a “js” folder on your computer
20. Adding jQuery to the database
Don‟t add it to the database as a file resource
Don‟t add it to the database as a js library
Domino Designer in Eclipse (DDE) reads and
processes resources
– More time consuming (slows DDE)
Less maintainable
21. Adding jQuery to the database
The WebContent folder
– Acts like the root folder within your database
– All files referenced to the .nsf/ in the URL
– Much easier to maintain files in one place
– Makes jQuery plugin management much easier
22. Adding jQuery to the database
Drag and Drop the js folder into WebContent
23. Adding jQuery to the application
Directly added to the XPage source panel
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
24. Adding jQuery to the application
Through a Theme
<resource>
<content-type>application/x-javascript</content-type>
<href>js/jquery-1.8.3.min.js</href>
</resource>
25. Adding jQuery to your XPages - Example
Modernizing a notes view
26. Adding User interactivity
Add a basic viewPanel control to your XPage
An un-styled viewPanel
Functional but not aesthetically
pleasing
27. Adding User interactivity - demonstration
Using jQuery, user interactivity can be added to a viewPanel
to make it more functional and improve the user experience.
The following link has an example of the demonstration
http://bit.ly/MarkyIC13Demo
28. Agenda
What is jQuery?
What about Dojo? When should I use jQuery?
How does jQuery work?
How do I add jQuery to my XPages?
What are jQuery plugins?
How can jQuery plugins solve my requirements
29. jQuery plugins
Extensions of the jQuery API code base
The plugin is called in the same was as a normal
API reference
$(„.myClass‟).doSomething()
To achieve the desired functionality additional resources
are often necessary
– CSS
– Images
– Other JavaScript files
30. jQuery plugins
Additional JavaScript Libraries
– May also include
• Images
• CSS
– Added to your XPage database
through WebContent folder as
before
31. jQuery plugins - example
Joyride.js – Website feature tour
– Requirement:
• Provide a visual cue for website users
to the new features available
• Make it simple to use
• Make it one time only
31
32. jQuery plugins - example
Joyride – Website feature tour
By clicking a button
users are guided
around the new
website
32
33. jQuery plugins - example
Joyride – Website feature tour
All the properties available with the Joyride plugin
33
34. jQuery plugins
For more information on how to add a jQuery
plugin to your database:
Notes in 9 Episode 74
– Getting started with jQuery Plugins in XPages
http://bit.ly/Nin9Ep74
35. Agenda
What is jQuery?
What about Dojo? When should I use jQuery?
How does jQuery work?
How do I add jQuery to my XPages?
What are jQuery plugins?
How can jQuery plugins solve my requirements
36. Functionality in a box
Yesterday your boss could have said:
–“I need a slideshow adding to the website by tomorrow, needs
to allow users to see thumbnails and cycle through them
quickly…..”
You would have panicked
You could have remembered Google is your friend..
and found a great reference on jQuery slideshows
http://speckyboy.com/2009/06/03/15-amazing-jquery-
image-galleryslideshow-plugins-and-tutorials/
You would then have responded: “Which one sir?”
37. Functionality in a box
Over 3000 jQuery plugins created and registered
Charting Modal Window
Form Validation Mobile
Responsive Layouts Web Typography
Sliders Animation
Galleries Tables
Carousels Form Select and Combo
Time and Date Pickers
And almost all of them are FREE
38. Demonstrations
Demonstrations of jQuery plugins in XPages can
be found at:
http://www.xomino.com/IBMConnect13Demo
http://demo.xomino.com
39. Questions and Answers
http://www.xomino.com
http://demo.xomino.com
twitter: @MarkyRoden
Please don‟t forget to do your evaluations