BP103 jQuery - The world's most popular JavaScript library comes to XPages

unevenechoΛογισμικό & κατασκευή λογ/κού

30 Οκτ 2013 (πριν από 4 χρόνια και 10 μέρες)

96 εμφανίσεις

© 2013 IBM Corporation






BP103
jQuery
-

The world's most
popular JavaScript library comes to
XPages


Dr. Mark Roden

Senior Consultant, PSC Group LLC

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
:
mroden@psclistens.com



Twitter
: @
markyroden



Skype
:
marky.roden


www.psclistens.com @pscgroup

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

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






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)

What is jQuery anyway?



60%
of world’s top 10,000 websites use jQuery


http
:
//
trends.builtwith.com/javascript

(*Dec 2012)










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

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.

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

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


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)

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


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

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

How does jQuery work
-

API References

Example API reference methods and properties

http://api.jquery.com

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()




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
a
ll elements with a class “
myClass


Set the display style to none

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

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

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

Adding jQuery to the database



Download the jQuery library



http://
jquery.com



Save in a “
js
” folder on your computer



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

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

Adding jQuery to the database




Drag and Drop the
js

folder into
WebContent



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>



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
>



Adding jQuery to your XPages
-

Example



Modernizing a notes view

Adding User interactivity



Add a basic
viewPanel

control to your
XPage

An un
-
styled
viewPanel


Functional but not
aesthetically

pleasing


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

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

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


jQuery plugins



Additional JavaScript Libraries



May also include


Images


CSS



Added to your
XPage

database


through
WebContent

folder as


before



jQuery plugins
-

example

31



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

jQuery plugins
-

example

32



Joyride


Website feature tour

By clicking a button
users are guided
around the new
website

jQuery plugins
-

example

33



Joyride


Website feature tour

All the properties available with the Joyride plugin

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


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

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



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


Demonstrations



Demonstrations of jQuery plugins in XPages can


be found at:


http://www.xomino.com/IBMConnect13Demo


http://demo.xomino.com





Questions and Answers





http://www.xomino.com



http://demo.xomino.com



twitter: @
MarkyRoden


40

© 2013 IBM Corporation

Legal disclaimer

© IBM Corporation 2013. All Rights Reserv ed.


The
inf ormation contained in this publication is prov ided f or inf ormational purposes only. While ef f orts were made to v erif y the
com
pleteness and accuracy of the inf ormation contained in
this publication, it is
provided AS IS without warranty of any kind, express or implied. In addition, this inf ormation is based on IBM’s current prod
uct

plans and strategy, which are subject to change by IBM without notice. IBM
shall not be responsible f or any damages arising out of the use of, or otherwise related to, this publication or any other ma
ter
ials. Nothing contained in this publication is intended to, nor shall hav e the ef f ect
of, creating any warranties or representations f rom IBM or its suppliers or licensors, or altering the terms and conditions o
f t
he applicable license agreement gov erning the use of IBM sof tware.


Ref erences
in this presentation to IBM products, programs, or serv ices do not imply that they will be available in all countries in whic
h I
BM operates. Product release dates and/or
capabilities ref erenced in this
presentation may change at any time at IBM’s sole discretion based on market opportunities or other f actors, and are not inte
nde
d to be a commitment to f uture product or f eature av ailability in any way.
Nothing contained in these materials is intended to, nor shall hav e the ef f ect of, stating or imply ing that any activities un
der
taken by y ou will result in any specif ic sales, rev enue growth or other results
.









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 jQuery !









(~
4,300
questions tagged Dojo)









(~950
questions tagged XPages)