BP103 jQuery - The world's most
popular JavaScript library comes to
XPages
Dr. Mark Roden
Senior Consultant, PSC Group LLC
© 2013 IBM Corporation
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
Twitter: @markyroden
Skype: marky.roden
www.psclistens.com
@pscgroup
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
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
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)
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
Twitter
Wordpress
Stackoverflow
BestBuy
Google
Dell
Bank of America
Drupal
Wordpress
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.
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
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
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)
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
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 <<<<
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
How does jQuery work - API References
Examples
API references
Selectors
(“ELEMENT”)
(“.class”)
(“#idTag”)
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
Internals
.attr()
.children()
.appendTo()
.height()
.blur()
.animate()
.get()
.grep()
.error()
.html()
.closest()
.css()
.position()
.bind()
.fadeIn()
.getJSON()
.each()
.pushStack()
.toggleClass()
.find()
.val()
.width()
.keypress()
.slideToggle()
.serialize()
.inArray()
.context()
Example API reference methods and properties
http://api.jquery.com
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’)
3) Execute
Set the display style to none
Chaining
 All methods/properties return a jQuery object
– Allows for chaining of *all* other API references
$("p")
.find(":contains('t')")
.css('color','red')
Select All Paragraph nodes
Within each node find all words containing
the letter t
Color those matches red
 Advantages
–
–
–
–
Object reuse: Lower memory consumption and faster
Shorter more manageable code
Easier syntax for beginners
Easy plugin creation
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
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
Adding jQuery to the database
Download the jQuery library
– http://jquery.com
– Save in a “js” folder on your computer
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
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
Adding jQuery to the database
 Drag and Drop the js folder into WebContent
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>
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>
Adding jQuery to your XPages - Example
 Modernizing a notes view
Adding User interactivity
 Add a basic viewPanel control to your XPage
An un-styled viewPanel
Functional but not aesthetically
pleasing
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
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
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
jQuery plugins
 Additional JavaScript Libraries
– May also include
• Images
• CSS
– Added to your XPage database
through WebContent folder as
before
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
jQuery plugins - example
 Joyride – Website feature tour
By clicking a button
users are guided
around the new
website
32
jQuery plugins - example
 Joyride – Website feature tour
All the properties available with the Joyride plugin
33
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
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
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-jqueryimage-galleryslideshow-plugins-and-tutorials/
 You would then have responded: “Which one sir?” 
Functionality in a box
 Over 3000 jQuery plugins created and registered
Charting
Form Validation
Responsive Layouts
Sliders
Galleries
Carousels
Time and Date Pickers
Modal Window
Mobile
Web Typography
Animation
Tables
Form Select and Combo
And almost all of them are FREE
Demonstrations
 Demonstrations of jQuery plugins in XPages can
be found at:
http://www.xomino.com/IBMConnect13Demo
http://demo.xomino.com
 Questions and Answers
 http://www.xomino.com
 http://demo.xomino.com
 twitter: @MarkyRoden
Legal disclaimer
© IBM Corporation 2013. All Rights Reserved.
The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is
provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM
shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect
of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this
presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way.
Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.
40
© 2013 IBM Corporation
Extra Slides
Resources
 www.jquery.com
Download the latest version
Review the documentation
Look through the Tutorials
www.jqueryui.com
Fantastic working examples/code
Themebuilder
www.jquerymobile.com
Documentation
Example code
Example builder
www.stackoverflow.com (*Jan 2013)
~267,000 questions/answers tagged jQuery !
(~4,300 questions tagged Dojo)
(~950 questions tagged XPages)