Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this webinar and find out how you can use some of the thousands of jQuery plugins, in harmony with Dojo, within your XPages applications to create a better experience not only for your users, but for you as a developer. In this webinar, we'll look at how jQuery works, how to add it to your XPages, and how a complete JavaScript beginner can take advantage of its power. We'll demonstrate many working examples -- and a sample database will be provided.

1. jQuery comes to XPages
Tweet about this event: #xpages
and mention us: @teamstudio @TLCCLTD @markyroden
April 23, 2013

2. @teamstudio
Taline Badrikian teamstudio.com
Marketing Director

3. Who we are
• Our background is in creating tools for collaborative
computing in mid-size and large enterprises, primarily for
Lotus Notes
• Easy-to-use tools for developers and administrators
• 2300+ active customers, 47 countries
• Offices in US, UK and Japan
• Entered mobile space in 2010 with Unplugged – easy
mobilization of Notes apps to Blackberry, Android and iOS

4. Teamstudio Unplugged
• Your Mobile Domino Server – take your Notes
apps with you!
• End users access Notes applications from
mobile devices whether online or offline
• Leverages existing skills and technology –
Xpages – Replication model you already know
• IBM Collaboration Solutions Award Winner 2013

5. Teamstudio Continuity
• Mobile BCM application for smartphones and tablets
– iOS, Android and BB
• Offline access to all your BCM and
Disaster Recovery data
• Store plans, contacts, call trees, and more
• Client available for download from app stores

6. Teamstudio
• Visit us at IamLUG – May 6 & 7
• TackItOn day – May 8th
Introduction to Developing Mobile Apps with XPages
• Next webinar – Twelve Tasks Made Easier With IBM Lotus Domino XPages,
Mike McGarel and Paul Withers – May 21

7. jQuery: The World's Most Popular
JavaScript Library Comes to XPages
Your Hosts Today:
Howard Greenberg Paul Della-Nebbia
TLCC TLCC
@TLCCLtd @paulDN
#XPages
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 1

8. Upcoming and Recorded Webinars
Next Webinar on May 23rd
It’s Not Herculean: Twelve Tasks Made Easier With IBM Lotus Domino
XPages with Paul Withers and Mike McGarel
www.tlcc.com/xpages-webinar
Same web page has a link to previous webinars
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 2

9. TLCC XPages Offerings
• Seven XPages Courses!
Rapid XPages Development using Application Layout and Dojo UI Controls
Both 8.5 and 9.0 versions
FREE !! Introduction to XPages Development
JavaScript for XPages Development
Developing XPages Using Domino Designer 8.5
XPages Development 2 for Notes and Domino 8.5
Mobile XPages for Domino 8.5
Java 1 for XPages Developers
• Self Paced Training
– Learn anywhere!
– An Instructor is a click away
• Instructor Led (Private)
• TLCC Mentoring Services
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 3

10. Upcoming Events
IamLUG in St. Louis
May 6th and 7th … FREE!!
Getting full
TackItOn the day after (May 8th)
Rapid XPages Development using Application Layout and
Dojo UI Controls
• One full day with TLCC’s expert instructor Paul Della-Nebbia
• TLCC’s Rapid XPages Development using Application Layout and Dojo UI
Controls (8.5 or 9.0) self-paced course (28 hours)
• A year of continued instructor support
All for only $495! IamLUG exclusive offer!!
www.iamlug.org
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 4

11. Asking Questions
Q & A at the end!
Type in your
questions as they
come up
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 5

12. Your Presenter Today:
Dr. Marky Roden
@MarkyRoden
http://xomino.com
#XPages
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 6

13. jQuery - The world's most popular
JavaScript library comes to XPages
Dr. Mark Roden
Senior Consultant, PSC Group LLC
23rd April 2013 1

14. 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: marky@xomino.com
• Twitter: @markyroden
www.psclistens.com @pscgroup
• Skype: marky.roden
2

15. 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
3

16. 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

17. 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
5
Open Source (MIT License)

18. What is jQuery anyway?
• 66% of world’s top 10,000 websites use jQuery
http://trends.builtwith.com/javascript (*Apr 2013)
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 6
BestBuy Wordpress

19. 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. 7

20. 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
8

21. 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 9

22. 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) 10

23. 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 11

24. 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 <<<< 12

25. 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
13

26. 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 14
http://api.jquery.com

27. 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
15

28. Chaining
• All methods/properties return a jQuery object
• Allows for chaining of *all* other API references
$("p") Select All Paragraph nodes
.find(":contains('t')") Within each node find all words
containing 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 16

29. 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
17

30. 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 18

31. Adding jQuery to the database
• Download the jQuery library
• http://jquery.com
• Save in a “js” folder on your computer
19

32. 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
20

33. 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
21

34. Adding jQuery to the database
• Drag and Drop the js folder into WebContent
22

35. 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>
23

36. 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>
24

37. Adding jQuery to your XPages - Example
• Modernizing a notes view
25

38. Adding User interactivity
• Add a basic viewPanel control to your XPage
An un-styled viewPanel
Functional but not aesthetically
pleasing
26

39. 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 27

40. 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
28

41. 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
29

42. jQuery plugins
• Additional JavaScript Libraries
• May also include
• Images
• CSS
• Added to your XPage database
through WebContent folder as
before
30

43. 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

44. jQuery plugins - example
• Joyride – Website feature tour
By clicking a button
users are guided around
the new website
32

45. jQuery plugins - example
• Joyride – Website feature tour
All the properties available with the Joyride plugin
33

46. 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

47. 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

48. 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?”

49. 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

50. Demonstrations
• Demonstrations of jQuery plugins in XPages can
be found at:
http://www.xomino.com/IBMConnect13Demo
http://demo.xomino.com

51. • Questions and Answers
http://www.xomino.com
http://demo.xomino.com
twitter: @MarkyRoden

52. 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 (*April 2013)
~305,000 questions/answers tagged jQuery !
(~4,750 questions tagged Dojo)
(~1250 questions tagged XPages)

53. Questions????
Use the Q&A pane in
WebEx to ask questions
We will answer your
questions verbally
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 7

54. Question and Answer Time!
Howard Greenberg Paul Della-Nebbia Taline Badrikian
Mark Roden
DCLUG, April 24th IamLUG in St. Louis, May 6th -8th Developer2013 in
Vegas, April 30
TackItOn - Rapid
XPages
Development using
App Layout and
Dojo UI Controls
www.meetup.com/
DC-Lotus-Professionals www.iamlug.org
developer2013.com
TLCC Questions? Teamstudio Questions?
howardg@tlcc.com paul@tlcc.com contactus@teamstudio.com
888-241-8522 or 561-953-0095 877-228-6178
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 8