![Page 1: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/1.jpg)
© 2013 IBM Corporation
BP103 jQuery - The world's most popular JavaScript library comes to XPages
Dr. Mark RodenSenior Consultant, PSC Group LLC
![Page 2: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/2.jpg)
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: [email protected]– Twitter: @markyroden– Skype: marky.roden
www.psclistens.com @pscgroup
![Page 3: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/3.jpg)
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
![Page 4: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/4.jpg)
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
![Page 5: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/5.jpg)
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)
![Page 6: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/6.jpg)
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
![Page 7: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/7.jpg)
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.
![Page 8: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/8.jpg)
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
![Page 9: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/9.jpg)
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
![Page 10: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/10.jpg)
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)
![Page 11: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/11.jpg)
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
![Page 12: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/12.jpg)
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 <<<<
![Page 13: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/13.jpg)
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
![Page 14: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/14.jpg)
How does jQuery work - API References
Example API reference methods and propertieshttp://api.jquery.com
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()
![Page 15: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/15.jpg)
Select and conquer
1) Select the DOM elements you wish to affect
$(‘.myClass’)
2) Concatenate the API reference to use
$(‘.myClass’).css(‘display’, ‘none’)
3) Execute
Select all elements with a class “myClass”
Set the display style to none
![Page 16: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/16.jpg)
Chaining
All methods/properties return a jQuery object– Allows for chaining of *all* other API references
$("p") .find(":contains('t')") .css('color','red')
Advantages– Object reuse: Lower memory consumption and faster– Shorter more manageable code – Easier syntax for beginners – Easy plugin creation
Select All Paragraph nodesWithin each node find all words containing the letter t
Color those matches red
![Page 17: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/17.jpg)
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
![Page 18: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/18.jpg)
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
![Page 19: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/19.jpg)
Adding jQuery to the database
Download the jQuery library– http://jquery.com– Save in a “js” folder on your computer
![Page 20: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/20.jpg)
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
![Page 21: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/21.jpg)
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
![Page 22: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/22.jpg)
Adding jQuery to the database
Drag and Drop the js folder into WebContent
![Page 23: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/23.jpg)
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>
![Page 24: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/24.jpg)
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>
![Page 25: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/25.jpg)
Adding jQuery to your XPages - Example
Modernizing a notes view
![Page 26: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/26.jpg)
Adding User interactivity
Add a basic viewPanel control to your XPage
An un-styled viewPanel
Functional but not aesthetically pleasing
![Page 27: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/27.jpg)
Adding User interactivity - demonstration
Using jQuery, user interactivity can be added to a viewPanel to make it more functional and improve the user experience.
http://bit.ly/MarkyIC13Demo
The following link has an example of the demonstration
![Page 28: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/28.jpg)
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
![Page 29: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/29.jpg)
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
![Page 30: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/30.jpg)
jQuery plugins
Additional JavaScript Libraries– May also include • Images• CSS
– Added to your XPage database through WebContent folder as before
![Page 31: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/31.jpg)
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
![Page 32: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/32.jpg)
32
jQuery plugins - example
Joyride – Website feature tour
By clicking a button users are guided around the new website
![Page 33: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/33.jpg)
33
jQuery plugins - example
Joyride – Website feature tour
All the properties available with the Joyride plugin
![Page 34: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/34.jpg)
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
![Page 35: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/35.jpg)
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
![Page 36: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/36.jpg)
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?”
![Page 37: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/37.jpg)
Functionality in a box
Over 3000 jQuery plugins created and registered
Charting Modal WindowForm Validation MobileResponsive Layouts Web TypographySliders AnimationGalleries TablesCarousels Form Select and ComboTime and Date Pickers
And almost all of them are FREE
![Page 38: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/38.jpg)
Demonstrations
Demonstrations of jQuery plugins in XPages can be found at:
http://www.xomino.com/IBMConnect13Demo
http://demo.xomino.com
![Page 39: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/39.jpg)
Questions and Answers
http://www.xomino.com
http://demo.xomino.com
twitter: @MarkyRoden
![Page 40: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/40.jpg)
40 © 2013 IBM Corporation
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.
![Page 41: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/41.jpg)
![Page 42: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/42.jpg)
Extra Slides
![Page 43: © 2013 IBM Corporation BP103 jQuery - The world's most popular JavaScript library comes to XPages Dr. Mark Roden Senior Consultant, PSC Group LLC](https://reader035.vdocument.in/reader035/viewer/2022081519/56649dc05503460f94ab4902/html5/thumbnails/43.jpg)
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)