BP 103 j Query The worlds most popular

About Marky § Over 15 years IBM Notes Domino® work § Senior Consultant at PSC Group • XPages Developer • Project Leader • j. Query Specialist § Contact Information – – Blog: http: //www. xomino. com Email: mroden@psclistens. com Twitter: @markyroden Skype: marky. roden www. psclistens. com @pscgroup

Agenda § What is j. Query? § What about Dojo? When should I use j. Query? § How does j. Query work? § How do I add j. Query to my XPages? § What are j. Query plugins? § How can j. Query plugins solve my requirements

What is j. Query anyway? § A Java. Script 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 j. Query anyway? § 60% of world’s top 10, 000 websites use j. Query http: //trends. builtwith. com/javascript (*Dec 2012) Used by Microsoft. Net v 4 as part of the ASP. NET AJAX framework Some websites you probably know using j. Query Amazon Twitter Wordpress Stackoverflow Best. Buy Google Dell Bank of America Drupal Wordpress

What is j. Query anyway? § Core – Document Model (DOM) Manipulation – Simple Animations § UI – Pre-packages functional capabilities – Analogous to Dojo Widgets § Mobile – A unified, HTML 5 -based user interface system for all popular mobile device platforms, built on the rock-solid j. Query and j. Query UI foundation.

Agenda § What is j. Query? § What about Dojo? When should I use j. Query? § How does j. Query work? § How do I add j. Query to my XPages? § What are j. Query plugins? § How can j. Query plugins solve my requirements

What about Dojo? When should I use j. Query? § Dojo and j. Query 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 – j. Query 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/j. Query – Project timeline – Maintainability of the application – j. Query v 2. 0 (future) will not support IE<9 • “The entire j. Query core team instantly became giddy as they started ripping out old. IE support for j. Query 2. 0. ” 17 Dec 2012 - Scott González (j. Query contributor)

Don’t use j. Query when…. § There isn’t a justifiable reason to use it § j. Query is an additional download (~94 k) – Version 1. 8 does allow for exclusion of code which is not necessary § When not to use j. Query : – Simple DOM manipulation – To provide functionality which is already provided by Dojo Widgets – To determine runtime events in the on. Load event – If you are using One. UI (*not for beginners) – Because you don’t want to learn Dojo

Use j. Query when…… § Enhanced functionality not provided by Dojo – Specific j. Query or j. Query UI functionality – Specific Animation requirements – Broader browser compatibility § The business plan supports j. Query usage § The requirements are best suited to a j. Query solution >>>>> The Plugin Community <<<<

Agenda § What is j. Query? § What about Dojo? When should I use j. Query? § How does j. Query work? § How do I add j. Query to my XPages? § What are j. Query plugins? § How can j. Query plugins solve my requirements

How does j. Query work - API References API references Selectors Examples (“ELEMENT”) (“. class”) (“#id. Tag”) Attributes Traversing Manipulation CSS Events Effects Ajax Utilities Internals . attr(). children(). append. To(). height(). blur(). animate(). get(). grep(). error() . html(). closest(). css(). position(). bind(). fade. In(). get. JSON(). each(). push. Stack() . toggle. Class(). find(). val(). width(). keypress(). slide. Toggle(). serialize(). in. Array(). context() Example API reference methods and properties http: //api. jquery. com

Select and conquer § 1) Select the DOM elements you wish to affect $(‘. my. Class’) Select all elements with a class “my. Class” § 2) Concatenate the API reference to use $(‘. my. Class’). css(‘display’, ‘none’) § 3) Execute Set the display style to none

Chaining § All methods/properties return a j. Query 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 j. Query? § What about Dojo? When should I use j. Query? § How does j. Query work? § How do I add j. Query to my XPages? § What are j. Query plugins? § How can j. Query plugins solve my requirements

Adding j. Query to the application § j. Query is a Client Side Java. Script library – Can be added to the application – Can be referenced externally to the database § j. Query plugins contain images and style sheets – A complete miniaturized application – More than just Java. Script Code – Could be complicated to maintain if all files were added as resources

Adding j. Query to the database §Download the j. Query library – http: //jquery. com – Save in a “js” folder on your computer

Adding j. Query 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 j. Query to the database § The Web. Content 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 j. Query plugin management much easier

Adding j. Query to the database § Drag and Drop the js folder into Web. Content

Adding j. Query to the application § Directly added to the XPage source panel <script type="text/javascript" src="js/jquery-1. 8. 3. min. js"></script>

Adding j. Query 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 j. Query to your XPages - Example § Modernizing a notes view

Adding User interactivity § Add a basic view. Panel control to your XPage An un-styled view. Panel Functional but not aesthetically pleasing

Adding User interactivity - demonstration § Using j. Query, user interactivity can be added to a view. Panel to make it more functional and improve the user experience. The following link has an example of the demonstration http: //bit. ly/Marky. IC 13 Demo

Agenda § What is j. Query? § What about Dojo? When should I use j. Query? § How does j. Query work? § How do I add j. Query to my XPages? § What are j. Query plugins? § How can j. Query plugins solve my requirements

j. Query plugins § Extensions of the j. Query API code base § The plugin is called in the same was as a normal API reference § $(‘. my. Class’). do. Something() § To achieve the desired functionality additional resources are often necessary – CSS – Images – Other Java. Script files

j. Query plugins § Additional Java. Script Libraries – May also include • Images • CSS – Added to your XPage database through Web. Content folder as before

j. Query 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

j. Query plugins - example § Joyride – Website feature tour By clicking a button users are guided around the new website 32

j. Query plugins - example § Joyride – Website feature tour All the properties available with the Joyride plugin 33

j. Query plugins § For more information on how to add a j. Query plugin to your database: § Notes in 9 Episode 74 – Getting started with j. Query Plugins in XPages http: //bit. ly/Nin 9 Ep 74

Agenda § What is j. Query? § What about Dojo? When should I use j. Query? § How does j. Query work? § How do I add j. Query to my XPages? § What are j. Query plugins? § How can j. Query 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 j. Query 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 j. Query 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 j. Query plugins in XPages can be found at: http: //www. xomino. com/IBMConnect 13 Demo http: //demo. xomino. com

§ Questions and Answers § http: //www. xomino. com § http: //demo. xomino. com § twitter: @Marky. Roden

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 j. Query ! (~4, 300 questions tagged Dojo) (~950 questions tagged XPages)