Downloaded 72 times
Uploaded byTeamstudio
jQuery: The World's Most Popular JavaScript Library Comes to XPages
The document discusses the integration of the jQuery library into XPages for enhancing web application interactivity and mobile access. It provides information on Teamstudio's offerings, upcoming events, and various webinars aimed at developers, alongside technical details on using jQuery effectively. Key topics include the advantages of using jQuery, how to add it to XPages, and examples of plugins and functionalities available for enhancing user experiences.
More Related Content
Similar to jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
- 1. jQuery comes toXPages Tweet about this event: #xpages and mention us: @teamstudio @TLCCLTD @markyroden June 20, 2013
- 2.
- 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 • YourMobile 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 • MobileBCM 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 • 30% offall TS tools and 15% off all Ytria tools • Visit us at SoftBank World – July 23-24 in Tokyo • Next webinar – June 27th – Dojo Grids in XPages
- 7. © 2013 TheLearning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Howard Greenberg TLCC @TLCCLtd jQuery: The World's Most Popular JavaScript Library Comes to XPages Your Host Today: 1 #XPages
- 8. © 2013 TheLearning 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 June 27th Dojo DataGrid and XPages with Brad Balassaitis www.tlcc.com/xpages-webinar Same web page has a link to previous webinars
- 9. © 2013 TheLearning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC • Seven XPages Courses! ‒ FREE !! Introduction to XPages Development ‒ JavaScript for XPages Development (8.5 and 9) ‒ Developing XPages Using Domino Designer 8.5 / XPages Development 1 for 9 ‒ Rapid XPages Development using Application Layout and Dojo UI Controls (8.5 and 9) ‒ XPages Development 2 for Notes and Domino 8.5 ‒ Mobile XPages for Domino 8.5 and 9 ‒ 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 Spring Sale!!!!
- 10. © 2013 TheLearning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Your Presenter Today: 5 #XPages Dr. Marky Roden @MarkyRoden http://xomino.com
- 11. About Marky • Over15 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 • Skype: marky.roden www.psclistens.com @pscgroup 2
- 12. Agenda • What isjQuery? • 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
- 13. Agenda • What isjQuery? • 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
- 14. What is jQueryanyway? • 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
- 15. What is jQueryanyway? • 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
- 16. What is jQueryanyway? • 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
- 17. Agenda • What isjQuery? • 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
- 18. Whatabout Dojo? WhenshouldIuse 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
- 19. 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
- 20. Don’t use jQuerywhen…. • 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
- 21. 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
- 22. Agenda • What isjQuery? • 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
- 23. How does jQuerywork - 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
- 24. 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
- 25. Chaining • All methods/propertiesreturn 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
- 26. Agenda • What isjQuery? • 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
- 27. Adding jQuery tothe 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
- 28. Adding jQuery tothe database • Download the jQuery library • http://jquery.com • Save in a “js” folder on your computer 19
- 29. Adding jQuery tothe 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
- 30. Adding jQuery tothe 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
- 31. Adding jQuery tothe database • Drag and Drop the js folder into WebContent 22
- 32. Adding jQuery tothe application • Directly added to the XPage source panel <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 23
- 33. Adding jQuery tothe application • Through a Theme <resource> <content-type>application/x-javascript</content-type> <href>js/jquery-1.8.3.min.js</href> </resource> 24
- 34. Adding jQuery toyour XPages - Example • Modernizing a notes view 25
- 35. Adding User interactivity •Add a basic viewPanel control to your XPage An un-styled viewPanel Functional but not aesthetically pleasing 26
- 36. 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
- 37. Agenda • What isjQuery? • 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
- 38. jQuery plugins • Extensionsof 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
- 39. jQuery plugins • AdditionalJavaScript Libraries • May also include • Images • CSS • Added to your XPage database through WebContent folder as before 30
- 40. 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
- 41. jQuery plugins -example • Joyride – Website feature tour 32 By clicking a button users are guided around the new website
- 42. jQuery plugins -example • Joyride – Website feature tour 33 All the properties available with the Joyride plugin
- 43. jQuery plugins • Formore 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
- 44. Agenda • What isjQuery? • 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
- 45. Functionality in abox • 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?”
- 46. Functionality in abox • 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
- 47. Demonstrations • Demonstrations ofjQuery plugins in XPages can be found at: http://www.xomino.com/IBMConnect13Demo http://demo.xomino.com
- 48. • Questions andAnswers http://www.xomino.com http://demo.xomino.com twitter: @MarkyRoden
- 49. Resources • www.jquery.com Download thelatest 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)
- 50. © 2013 TheLearning 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
- 51. © 2013 TheLearning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Questions???? 6 Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
- 52. © 2013 TheLearning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Question and Answer Time! 7 Teamstudio Questions? contactus@teamstudio.com 877-228-6178 TLCC Questions? howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095 Mark Roden Howard Greenberg Ben Green Upcoming Events: TLCC Spring Sale ICON UK in Brighton •TLCC TackItOn the day after 30% off all Teamstudio tools and 15% off all Ytria tools Next webinar June 27th SoftBank World 2013 July 23-24 in Japan #XPages @markyroden @TLCCLtd @Teamstudio