jquery: the world's most popular javascript library comes to xpages

52
jQuery comes to XPages Tweet about this event: #xpages and mention us: @teamstudio @TLCCLTD @markyroden June 20, 2013

Upload: teamstudio

Post on 27-Jan-2015

109 views

Category:

Technology


1 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: jQuery: The World's Most Popular JavaScript Library Comes to XPages

jQuery comes to XPages

Tweet about this event: #xpages and mention us: @teamstudio @TLCCLTD @markyroden

June 20, 2013

Page 2: jQuery: The World's Most Popular JavaScript Library Comes to XPages

@teamstudio teamstudio.com

@TLCCLTD

@markyroden

#xpages Ben Green Vice President - APAC

Page 3: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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: The World's Most Popular JavaScript Library Comes to XPages

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: The World's Most Popular JavaScript Library Comes to XPages

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: The World's Most Popular JavaScript Library Comes to XPages

Teamstudio

• 30% off all 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

Page 7: jQuery: The World's Most Popular JavaScript Library Comes to XPages

© 2013 The Learning 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

Page 8: jQuery: The World's Most Popular JavaScript Library Comes to XPages

© 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 June 27th Dojo DataGrid and XPages with Brad Balassaitis

www.tlcc.com/xpages-webinar

Same web page has a link to previous webinars

Page 9: jQuery: The World's Most Popular JavaScript Library Comes to XPages

© 2013 The Learning 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!!!!

Page 10: jQuery: The World's Most Popular JavaScript Library Comes to XPages

© 2013 The Learning 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

Page 11: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 12: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 13: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 14: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 15: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 16: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 17: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 18: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 19: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 20: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 21: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 22: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 23: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 24: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 25: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 26: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 27: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 28: jQuery: The World's Most Popular JavaScript Library Comes to XPages

Adding jQuery to the database • Download the jQuery library

• http://jquery.com • Save in a “js” folder on your computer

19

Page 29: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 30: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 31: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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

22

Page 32: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 33: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 34: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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

25

Page 35: jQuery: The World's Most Popular JavaScript Library Comes to XPages

Adding User interactivity • Add a basic viewPanel control to your XPage

An un-styled viewPanel Functional but not aesthetically pleasing

26

Page 36: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 37: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 38: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 39: jQuery: The World's Most Popular JavaScript Library Comes to XPages

jQuery plugins • Additional JavaScript Libraries

• May also include • Images • CSS

• Added to your XPage database through WebContent folder as before

30

Page 40: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 41: jQuery: The World's Most Popular JavaScript Library Comes to XPages

jQuery plugins - example • Joyride – Website feature tour

32

By clicking a button users are guided around the new website

Page 42: jQuery: The World's Most Popular JavaScript Library Comes to XPages

jQuery plugins - example • Joyride – Website feature tour

33 All the properties available with the Joyride plugin

Page 43: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 44: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 45: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 46: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 47: jQuery: The World's Most Popular JavaScript Library Comes to XPages

Demonstrations • Demonstrations of jQuery plugins in XPages can

be found at:

http://www.xomino.com/IBMConnect13Demo

http://demo.xomino.com

Page 48: jQuery: The World's Most Popular JavaScript Library Comes to XPages

• Questions and Answers

http://www.xomino.com http://demo.xomino.com

twitter: @MarkyRoden

Page 49: jQuery: The World's Most Popular JavaScript Library Comes to XPages

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 50: jQuery: The World's Most Popular JavaScript Library Comes to XPages

© 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 51: jQuery: The World's Most Popular JavaScript Library Comes to XPages

© 2013 The Learning 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

Page 52: jQuery: The World's Most Popular JavaScript Library Comes to XPages

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

Question and Answer Time!

7

Teamstudio Questions? [email protected] 877-228-6178

TLCC Questions?

[email protected] [email protected] 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