jQuery Comes to XPages
-
Upload
teamstudio -
Category
Documents
-
view
1.952 -
download
5
description
Transcript of jQuery Comes to XPages
![Page 1: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/1.jpg)
jQuery comes to XPages
Tweet about this event: #xpages and mention us: @teamstudio @TLCCLTD @markyroden
April 23, 2013
![Page 3: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/3.jpg)
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
![Page 4: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/4.jpg)
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
![Page 5: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/5.jpg)
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
![Page 6: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/6.jpg)
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
![Page 7: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/7.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Howard Greenberg TLCC
@TLCCLtd
Paul Della-Nebbia TLCC
@paulDN
jQuery: The World's Most Popular JavaScript Library Comes to XPages Your Hosts Today:
1
#XPages
![Page 8: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/8.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
2
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
![Page 9: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/9.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
• 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
3
TLCC XPages Offerings
![Page 10: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/10.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
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 4
Upcoming Events
![Page 11: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/11.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Asking Questions
5
Q & A at the end! Type in your questions as they come up
![Page 12: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/12.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Your Presenter Today:
6
#XPages
Dr. Marky Roden @MarkyRoden http://xomino.com
![Page 13: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/13.jpg)
1
jQuery - The world's most popular
JavaScript library comes to XPages
Dr. Mark Roden
Senior Consultant, PSC Group LLC
23rd April 2013
![Page 14: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/14.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
2
![Page 15: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/15.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
3
![Page 16: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/16.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
4
![Page 17: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/17.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)
5
![Page 18: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/18.jpg)
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 BestBuy Wordpress
6
![Page 19: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/19.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. 7
![Page 20: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/20.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
8
![Page 21: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/21.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
9
![Page 22: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/22.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) 10
![Page 23: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/23.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
11
![Page 24: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/24.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 <<<< 12
![Page 25: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/25.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
13
![Page 26: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/26.jpg)
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
14
![Page 27: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/27.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
15
![Page 28: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/28.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 nodes Within each node find all words containing the letter t Color those matches red
16
![Page 29: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/29.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
17
![Page 30: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/30.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 18
![Page 31: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/31.jpg)
Adding jQuery to the database
• Download the jQuery library • http://jquery.com • Save in a “js” folder on your computer
19
![Page 32: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/32.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
20
![Page 33: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/33.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
21
![Page 34: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/34.jpg)
Adding jQuery to the database
• Drag and Drop the js folder into WebContent
22
![Page 35: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/35.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>
23
![Page 36: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/36.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>
24
![Page 37: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/37.jpg)
Adding jQuery to your XPages - Example
• Modernizing a notes view
25
![Page 38: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/38.jpg)
Adding User interactivity
• Add a basic viewPanel control to your XPage
An un-styled viewPanel Functional but not aesthetically pleasing
26
![Page 39: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/39.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
27
![Page 40: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/40.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
28
![Page 41: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/41.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
29
![Page 42: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/42.jpg)
jQuery plugins
• Additional JavaScript Libraries • May also include • Images • CSS
• Added to your XPage database through WebContent folder as before
30
![Page 43: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/43.jpg)
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
![Page 44: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/44.jpg)
jQuery plugins - example
• Joyride – Website feature tour
32
By clicking a button users are guided around the new website
![Page 45: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/45.jpg)
jQuery plugins - example
• Joyride – Website feature tour
33 All the properties available with the Joyride plugin
![Page 46: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/46.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 47: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/47.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 48: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/48.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 49: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/49.jpg)
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
![Page 50: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/50.jpg)
Demonstrations
• Demonstrations of jQuery plugins in XPages can be found at:
http://www.xomino.com/IBMConnect13Demo
http://demo.xomino.com
![Page 51: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/51.jpg)
• Questions and Answers
http://www.xomino.com http://demo.xomino.com
twitter: @MarkyRoden
![Page 52: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/52.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 (*April 2013) ~305,000 questions/answers tagged jQuery ! (~4,750 questions tagged Dojo) (~1250 questions tagged XPages)
![Page 53: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/53.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Questions????
7
Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
![Page 54: jQuery Comes to XPages](https://reader030.fdocuments.us/reader030/viewer/2022020105/554f88deb4c905435d8b4d27/html5/thumbnails/54.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Question and Answer Time!
8
Teamstudio Questions? [email protected] 877-228-6178
TLCC Questions?
[email protected] [email protected] 888-241-8522 or 561-953-0095
Mark Roden Paul Della-Nebbia
IamLUG in St. Louis, May 6th -8th
TackItOn - Rapid XPages Development using App Layout and Dojo UI Controls
www.iamlug.org
Howard Greenberg
DCLUG, April 24th
www.meetup.com/ DC-Lotus-Professionals
Taline Badrikian
developer2013.com
Developer2013 in Vegas, April 30