Understanding Your

Options with
JavaScript to Build
Powerful and Dynamic
XP
XPages Applications
A li ti
Russell Maher
RGM Consulting
2011 Wellesley Information Services. All rights reserved.

In This Session
Understand your JavaScript options
Understand the differences between Dojo and jQuery and how to
use both toolkits
S how
See h to t use th
the powerful
f l XPage
XP repeatt control
t l

1
What Well Cover
Understanding JavaScript Toolkit Options
Using Dojo in XPages
Using jQuery in XPages
Working with XPage Repeat Controls
Combining repeat controls with jQuery
Wrap-up

Understanding JavaScript Toolkit Options

XPages support JavaScript everywhere
Client-side script in the client

Server-side script that interacts with the server

Client-side JavaScript can be any flavor

Your own custom code written into the XPage

Custom code written into JavaScript Libraries not written

by you
Could be any of the many JavaScript Toolkits available today

3
Understanding JavaScript Toolkit Options Dojo
Dojo Toolkit
First released in 2006

Comprised of three main libraries

f Dojo Base Dojo functionality

f Dijit Dojo Widgets

f Dojox Dojo extensions/experimental code

Code here has not gone through the testing and validation
required in Dojo and Dijit

IBM is a supporting member of the Dojo Foundation

The only officially supported toolkit for XPages

Understanding JavaScript Toolkit Options jQuery

jQuery
First released in 2006

Most popular JavaScript library in use today

f 36.8% of builtwith.com sites are using jQuery

Comprised of two main libraries

f jQuery jQuery core functionality

f jQueryUI Core jQuery UI functionality

Thousands of jQuery plug-ins provide additional functionality

f Developed
D l d and d submitted
b itt d b
by th
the community
it

Microsoft contributes to the jQuery library

5
Understanding JavaScript Toolkit Options Others?
Other JavaScript Libraries/Toolkits?
Sure! Take your pick!

Here is a list from Wikipedia:

f Ample SDK Clean AJAX CougarXML Echo Ext Google

Web Toolkit Lively Kernel midori MochiKit MooTools
OpenLink AJAX Prototype Pyjamas qooxdoo Rialto
Rico script.aculo.us SmartClient SproutCore Spry
Yahoo! UI Library

It makes the most sense to use either Dojo (official XPage

toolkit) or jQuery (most popular toolkit)

Understanding JavaScript Toolkit Options Why?

Why use a JavaScript toolkit at all?
Toolkits will speed up development of complex application
tasks
Toolkits
T lkit provide id cross-browser
b f ti lit
functionality
Toolkits provide advanced UI functionality that you probably
cannot or would not develop on your own
Toolkits have vast developer communities all doing the same
things you are
f Lots of solutions

f Lots of developers

The downside of these toolkits is there is a (possibly steep)

learning curve
7
Understanding JavaScript Toolkit Options What?
All JavaScript Toolkits generally provide
DOM manipulation methods

String handling utilities

Animation effects

Widget/plug-ins/extensions to use, extend, or build

Event management functions

AJAX utilities

JSON manipulation

What Well Cover

Understanding JavaScript Toolkit Options
Using Dojo in XPages
Using jQuery in XPages
Working with XPage Repeat Controls
Combining repeat controls with jQuery
Wrap-up

9
Using Dojo in XPages
Dojo comes Free in XPages!
IBM will continue to expand Dojo support
Becoming Dojo proficient will be a good time investment for you
as an XP
XPage developer
d l

You are already using Dojo in XPages when you select certain
properties
Requiring fields

Date/Time Picker

Possibly rich text editor (depending on Domino version)

Restricting field inputs

10

Dojo Basics
Dojo basic concepts
1. Load the Dojo library with your page

2. Require all necessary Dojo modules

3. Connect Dojo event listeners to Dojo objects

4. Make the Dojo event listeners do something

5. Tell Dojo to parse all of the Dojo objects and connect it all once
the page has been loaded

11
Dojo + XPages Basics
How do they do that in XPages?
Domino loads standard Dojo PLUS xspClientDojo.js JavaScript
library at runtime
xspClientDojo
Cli tD j performs
f the
th Dojo
D j basics
b i in i an XPage-specific
XP ifi way
Examples:

f attachValidator

f getFieldValue

f attachEvent

f attachPartial

12

Dojo + XPages Structure

13
Dojo + XPages Load/Require

14

Dojo + XPages Attaching

15
Dojo Slider: Adding the Dojo Module
Add the dijit.form.Slider as an XPage resource

16

Dojo Slider: Adding to XPage

Add the Slider to your XPage
Add a div in the XPage source

Add an id attribute to the div

Add scriptBlock to set up the Slider

17
Dojo Slider: Adding to XPage (cont.)
Slider Script Details

18

Dojo Slider: The Easier XPage Way

You can add Dojo modules and attributes to panel controls to turn
them into Dojo widgets!

Create a panel control

Set the Dojo Type
Set the Dojo Attributes

19
Dojo Slider Demo
Using a Dojo Slider

20

Dojo NumberSpinner
An XPage Text Field Control can be a Dojo NumberSpinner

UI is changed via Dojo attributes on the control

21
Dojo Demos
Using a Dojo NumberSpinner, Dojo Dialog, and other Dojo widgets

22

Using Dojo in XPages Considerations

Dojo is supported in XPages but
As with all toolkits (think Domino Java/LotusScript API), the kit
may not do everything you want
Just
J tb because D Dojo
j worksk on a Web
W b page doesnt
d t mean it will
ill
work in an XPage or at least work the way you want it to
f Remember XPages generate a lot of dynamic code

Sometimes you might find another JavaScript tool that will give
you what you want faster

23
What Well Cover
Understanding JavaScript Toolkit Options
Using Dojo in XPages
Using jQuery in XPages
Working with XPage Repeat Controls
Combining repeat controls with jQuery
Wrap-up

24

Using jQuery in XPages

jQuery is a very popular JavaScript library
Not included in the XPage code and probably will not be
Learning basic jQuery will be worth your time because
Current Dojo implementation in XPages is functionally
incomplete
You will not find everything you need or want in Dojo

f Some say just build what you need then

f Sounds nice but that is not the world I work in

You can definitely combine Dojo and jQuery in the same XPage
Having more JavaScript skills is always better when trying to
meet customer application requirements

25
jQuery Basics
jQuery basic concepts
1. Load the jQuery library with your page

2. Load any jQuery plug-in libraries you want to use

3. Add appropriate classes to your controls

4. Launch the jQuery code on document ready

26

Load jQuery Libraries

Load the jQuery library with your page
Easy! Just use JavaScript resources right?

Uh, no

There is an XPage bug in JavaScript libraries that stops it from

handling too much code in a single JavaScript library
So you cannot just copy the jQuery code into a library

Which means you cannot add it to your XPage the usual way as
an XPage resource

27
Load jQuery Libraries Options
Options
Add the jQuery.js files to your application as a file resource

Add the jQuery files to the server hard drive

Refer to the jQuery.js files using standard HTML

<script type="text/javascript" src="jquery-1.4.2.min.js"/>

You can use a Custom Control to apply your jQuery code

28

Add Classes to Controls

jQuery uses CSS selectors to find a DOM Node to manipulate
You add classes to your controls so jQuery can locate your
elements
Remember!
R b ! XPages
XP ID attributes
tt ib t are volatile.
l til

29
Launch jQuery
Launch the jQuery code on document ready
Once the page has fully loaded then jQuery will modify the
document as needed to process the code
jQ
jQuery uses a $ as shorthand
h th d for
f jQuery
jQ

30

Basic jQuery Demo

Standard jQuery Steps

31
jQuery Rounded Corners Plug-In
Rounded Corners plug-in rounds corner of specific elements
No images needed
Can nest rounded corner elements within others
Steps
1. Add jQuery library

2. Add the Rounded Corners library

3. Create two panel controls, one

inside the other
4 Set panels
4. panels heights and widths
5. Set the background colors of each panel

6. Add a class to the inner panel

7. Add the jQuery code

32

Rounded Corners Details

33
jQuery Validation Plug-In
Validation plug-in provides client-side validation
Very flexible
Very reusable
Works nicely with XPages with standard caveats
Handling XPage ID

Takes a bit of learning, but worth it

34

Validation Details
Validation steps
1. Add jQuery library

2. Add the Validation library

3. Add classes to input field controls

4. Add jQuery validation rules

5. Validate form before XPage submission is allowed

35
Validation Rules
Validation rules can be added
as class attributes

f required

f required email

f required date

f required number

or programmatically
f rules:
l { username: { required:
i d ttrue, minlength:
i l th 22,
maxlength:60 }}

36

Validation Rules (cont.)

37
Validate the Form
Write a client-side function to
use the validator to

validate the form

return whether or not the form is valid

Stop the submit button from proceeding by calling your function

Client onclick event

Returning a false in this event will stop the server-side scripts

from executing

38

Validate the Form Code

39
Validate the Form Button

40

Validation Demo
Using the jQuery Validation Plug-In

41
More Plug-Ins
There are thousands of jQuery plug-ins

datePicker
A little different than the Dojo version

OneUI independent

Autocomplete
AKA type ahead

More
M functional
f ti l thanth theth pretty
tt panell type
t ahead
h d
Very configurable

Specifically does not allow values in the list

42

More Plug-Ins Demo

Using other jQuery Plug-Ins

43
What Well Cover
Understanding JavaScript Toolkit Options
Using Dojo in XPages
Using jQuery in XPages
Working with XPage Repeat Controls
Combining repeat controls with jQuery
Wrap-up

44

Working with XPage Repeat Controls

XPage Repeat Controls are awesome!
They repeat anything
Markup

JavaScript Code

Other controls

Custom controls

As much as you want them repeated

X number
b off times
ti
Once for every document in a view

Once for element in a JavaScript array

Once for every document you have in a collection

45
Working with XPage Repeat Controls Uses
Repeat controls can be used
To generate HTML tables

To display documents related to the current document either in

a table
t bl or in
i a document
d t
To display search results from within another XPage

To provide custom edit controls right in a view

46

Using a View
Repeat control with a view
Add a view data source to XPage

Select the data source as your repeat control data source

47
Using a Field
Repeat control with a multi-value field
Add a document data source to XPage

Select the data source and choose a field as your repeat control
d t source
data
f Makes the most sense with a multi-value field or there will be
no repeating

48

Using an Array
Repeat control with an array
Write JavaScript that produces an array

f new Array(1,2,3,4)

f @DbColumn("","Data",1)

49
Using a Collection
Repeat control with a document collection
Write JavaScript that returns a document collection

50

Repeat Content
Once you have your collection of somethings you need some
thing to repeat
Static Text or HTML

Computed
C t d Field
Fi ld C
Control
t l
Label Control

Link Control

A custom control chock full of whatever you want to put in it

51
Repeat Text
Static text or HTML
You can add static text inside the repeat control in the source

The text can be HTML

Useful for building HTML tables using repeat controls

52

Repeat Control Properties

Collection name property
The variable that represents each something being repeated
in the repeat control
f View
Vi = view
i entries
ti
f Multi-value field = each value

f Collection = each document

Index name property

The variable that contains the index number or count of the
current something in the repeat control
f 5 = the fifth object being repeated

53
Repeat Control Properties (cont.)
Collection Name and Index Name

54

Repeat Control Properties (cont.)

Starting Index
The index or count you want the repeat control to start at

f 5 = start the repeat control on the fifth one (document, view

entry)
t )

Repeat Limit
The number of entries to show at a time

55
Using Repeat Variables
Controls placed inside a repeat control can refer to the objects
that are being repeated
From the inner controls you refer to the Collection name property
value to access the current object in the repeat control
Once a control is dropped inside a repeat control, the Collection
name property value is a choice to configure the data form the
inner control
Computed Field Control

Label Control

Link Control

56

Connecting Repeat Control Variables

57
Working with XPage Repeat Controls
Using Repeat Controls

58

What Well Cover

Understanding JavaScript Toolkit Options
Using Dojo in XPages
Using jQuery in XPages
Working with XPage Repeat Controls
Combining repeat controls with jQuery
Wrap-up

59
Combining Repeat Controls with jQuery
Every XPage control is pretty powerful
Drag-and-drop pre-built

Most parameters are configurable and dynamic

jQuery and Dojo are pretty powerful

Cool pre-built JavaScript functionality

Cross-browser

Combining
C bi i Repeat
R t Controls
C t l with
ith other
th controls
t l andd JJavaScript
S i t
gives your applications Super Powers!
You can do things you could never do with Domino before
XPages

60

Combining Repeat Controls with jQuery A User

A user walks into a pub and says
I want to have my documents listed in a page

I want to be able to sort the documents by clicking columns

I want to be able to sort on more than one column at a time

I want to be able to edit part of any document right from the

view
I want to tell you which fields I want to be able to edit

I want all of the same validation and functionality I have when I

edit the document normally to still work when I edit the
document from a view

61
Heres How
Heres how we do this
I want to have my documents listed in a page

f We use a repeat control with a view

f We write standard HTML for a table container

f We generate standard HTML for each row of the table using

values from the view
f Essentially recreating a view in HTML

62

Heres How (cont.)

Heres how we do this (cont.)
I want to be able to sort the documents by clicking columns

I want to be able to sort on more than one column at a time

f We use the jQuery tableSorter library

f Include jQuery.js file

f Include jQuery.tablesorter.js file

f Add classes to our table HTML

f Add jQuery code to our XPage so that when the page loads,
the HTML table is transformed into a sortable table

63
Heres How (cont.)
Heres how we do this (cont.)
I want to be able to edit part of any document right from the
view
I wantt to
t tell
t ll you which
hi h fields
fi ld I wantt tto be
b able
bl to
t edit
dit
I want all of the same validation and functionality I have when I
edit the document normally to still work when I edit the
document from a view
f Uh this ones a little trickier

f Nah! We use a Custom Control inside our repeat p control!

64

Heres How (cont.)

Heres how we do this (cont.)
Create a custom control that displays the fields we want

Use whatever partial-refresh mechanisms we need inside the

custom
t control
t l
Add jQuery validation to the custom control

Connect the custom control data source to the document we

want to edit so when we click the Save button in the custom
control the original document is edited

This is XPages Super Power!!

65
Combining Repeat Controls with jQuery
Repeat Controls + jQuery = Super Powers

66

What Well Cover

Understanding JavaScript Toolkit Options
Using Dojo in XPages
Using jQuery in XPages
Working with XPage Repeat Controls
Combining repeat controls with jQuery
Wrap-up

67
Resources
W3Schools.com Good for Things Web
www.w3schools.com

Dojo Toolkit JavaScript Client Library

http://dojotoolkit.org

SitePen Blog Great Dojo Tips and Tutorials

www.sitepen.com/blog

jQuery JavaScript Client Library

http://jquery.com

Fi f + Fi
Firefox Firebug
b
http://getfirefox.com

http://getfirebug.com

68

Resources (cont.)
Douglas Crockford JavaScript Guru
www.crockford.com

www.crockford.com/javascript

JSON JavaScript Object Notation/Official Site

www.json.org

www.json.org/js.html

JS Lint JavaScript Code Validator

www.jslint.com

M ill D
Mozilla Developers
l G
Guide
id
https://developer.mozilla.org/en/JavaScript/Guide

69
Resources (cont.)
BuiltWith Trends Site that trends Web site development tool use
http://trends.builtwith.com

XPage Wiki
www.lotus.com/ldd/ddwiki.nsf
XPages Blog
http://xpagesblog.com
XPages Wiki Independent
http://xpageswiki.com

70

Resources (cont.)
Taskspeed Performance Of CSJS Frameworks
http://dante.dojotoolkit.org/taskspeed/

XPages 101 Matt White Training Videos

XPages101.net

Notes in 9 David Leedy XPage Screen Casts

http://notesin9.com

Tip of the Iceberg Tim Tripcony

www.timtripcony.com

71
7 Key Points to Take Home
JavaScript toolkits make you more productive
Cooler JavaScript makes your users happier
Dojo comes with XPages and will continue to get more support
Dojo uses widgets, jQuery uses plug-ins
jQuery is very popular and works great with XPages
It may not be possible to do what you want to do with just one
JavaScript toolkit
Repeat Controls give you Super Powers!

72

Your Turn!

How to contact me:

Russell Maher
[email protected]
73


Wellesley Information Services, 20 Carematrix Drive, Dedham, MA 02026

Copyright 2011 Wellesley Information Services. All rights reserved.