© 2010 by Sean Burgess
Give Your Domino Apps A Beauty Makeover with jQuery
Sean BurgessASND Designs
© 2010 by Sean Burgess
IamLUG 2010 Sponsors
IamLUG 2010
Who Am I?
• Owner/Head Designer at ASND Designs of Laurel, MD
• Certified Developer/Administrator that has been working
with Lotus Notes/Domino since v3 in 1994
• IBM Business Partner and member of Smart Business
Partner Design Council
• One time blogger and current member of 1352 Report
podcast crew
• Avid cook and foodie
• A Very Lazy Developer!
2
IamLUG 2010
What We‟ll Cover …
• Getting Started with jQuery
• Using jQuery UI
• There‟s a Plugin for That!
• Domino Make Over Tips
• Questions
3
IamLUG 20104
What We Won‟t Cover …
• Why Nerd Girls Rock and How To Get One
• How to Build a Server Farm with Legos
• The Perils of Taking Pink Stuff from Irishman
• Blog Post Titles Guaranteed to Increase the Size of Your
Planet Lotus Referrers
• How the Vatican Conspired to Kill Garnet
• What is the Number of IBM Consultants it Takes to Screw
in a Lightbulb
• Protecting Your Mini-bar – Know Where Your Friends Are
• The Tale of Disney‟s Lost Dwarf – The Duffbert Story
IamLUG 2010
What is jQuery?
“jQuery is a fast and concise JavaScript
Library that simplifies HTML document
traversing, event handling, animating, and
Ajax interactions for rapid web
development. jQuery is designed to
change the way that you write
JavaScript.”
5
IamLUG 2010
Why Should You Use jQuery?
• Works on all supported versions of Domino!
• Very small, customizable JavaScript library – 24 KB
• Cross Browser Compliant – Really!
• Widely Used, Open Source Framework Available on
Google‟s CDN
• Access page elements and functions with very little code
• Makes having a polished website almost too easy to
develop
• Doesn‟t require learning Java or XML!!!
• Skills transfer to any other web platform
6
IamLUG 2010
Working with jQuery
• The Ever Popular $ Function
• Launching Code at the Right Time
• Using This to Function Correctly
• Accessing Elements using Selectors
• Adding and Removing Classes
• Capturing Events on the Page
• Using Special Effects
• Callback Functions
• Chaining Done Right
7
IamLUG 2010
The Ever Popular $ Function
• $ function is an alias to the jQuery object and is used to
create a new jQuery object
• The new jQuery object contains all the elements in the
DOM that match the selector listed in the parenthesis
$(„p‟) – returns all <P> objects on the page
$(„p.green‟) - returns all <P> objects on the page that have the
class „green‟
• The .each() function can be used to loop through all the
elements in the jQuery object
8
IamLUG 2010
Launching the Code at the Right Time
• Use $(document).ready() to bind a function that will be
called the instant the DOM is ready to be read and
manipulated, which is when 99.99% of all JavaScript
code needs to run
• Replaces the window.onLoad() event
• This is probably the most important function included in
the event module, as it can greatly improve the response
times of your web applications.
• Doesn‟t wait for the page to be completely loaded before
running, so large images won‟t hold up the code
• Multiple $(document).ready events is supported
9
IamLUG 2010
Using This to Function Correctly
• Similar to the way it can be used within LotusScript and
Java
• 'this' is a DOM element when you are inside of a callback
function (in the context of jQuery) $('a.newTarget').each(function() {
if (this.host != window.location.host) {
$(this).attr('target', '_new');
}
});
• 'this' is a jQuery object when you are inside your own
jQuery functions jQuery.fn.newTarget = function() {
return this.each(function() {
if (this.host != window.location.host) {
$(this).attr('target', '_new');
}
});
};
10Source - http://remysharp.com/2007/04/12/jquerys-this-demystified/
IamLUG 2010
Accessing Elements Using Selectors
• Selectors work very similar to CSS
• $(„div ol li‟) – returns all the <li> objects inside an <ol>
which is also inside a <div>
• $(„#_MyForm :input) – returns all the input objects inside
the Domino form called MyForm
• $(„img[title]‟) – returns all <img> objects that have a title
attribute
• $(„a[rel$=nofollow]‟) – returns all <a> objects that have
the rel attribute that exactly matches „nofollow‟
• $(„tr.ugly:even‟) – returns the even numbered <tr>
objects that have the class „ugly‟
11
IamLUG 2010
Adding and Removing Classes
• .addClass – Adds the specified class(es) to each of the
set of matched elements.
$(„body‟).addClass(„P90X‟)
• .removeClass – Remove a single class, multiple classes,
or all classes from each element in the set of matched
elements.
$(„table.alcohol‟).removeClass(„carKeys‟)
• .toggleClass - Add or remove one or more classes from
each element in the set of matched elements, depending
on either the class's presence or the value of the switch
argument.
$(„div.drunk‟).toggle(„goToBathroom‟)
12
IamLUG 2010
Capturing Events on the Page
• The methods are used to register behaviors to take effect
when the user interacts with the browser, and to further
manipulate those registered behaviors
• jQuery can make anything do anything
.bind() – Attach a handler to an event for the elements
.click() – Bind an event handler to the "click" JavaScript event,
or trigger that event on an element, same as .bind(„click‟)
.toggle() – Bind two or more handlers to the matched elements,
to be executed on alternate clicks, defaults to show and hide
• All JS event code can now be move out of events in field
and form design elements
13
IamLUG 2010
Using Special Effects
• The jQuery library provides several techniques for
adding animation to a web page. These include simple,
standard animations that are frequently used, and the
ability to craft sophisticated custom effects.
.show()
.hide()
.fadeIn() & .fadeOut()
.slideUp() & .slideDown()
.delay() - Set a timer to delay execution of subsequent items in
the queue
• More effects included in jQuery UI library
14
IamLUG 2010
Callback Functions
• A callback is a function that is passed as an argument to
another function and is executed after its parent function
has completed. The special thing about a callback is that
functions that appear after the "parent" can execute
before the callback executes.
$.get('myhtmlpage.html', myCallBack) – the function
myCallBack is run after the code is finished retrieving
myhtmlpage.html from the server
15
IamLUG 2010
Chaining Done Right
• Chaining allows you to put multiple functions in a single
JS line and execute them against all the elements in the
jQuery object $(„.noclass‟).hide().removeClass(„noclass‟).addClass(„serf‟).show()
$(„#dialogdiv‟).load(„comments?OpenForm‟).dialog()
$('#mypanel„)
.find('TABLE .firstCol„)
.removeClass('.firstCol„)
.css('background' : 'red„)
.append('<span>This cell is now red</span>');
• Not all functions are chainable, so check the
documentation
16
IamLUG 2010
Some of My Favorite jQuery Functions
• .each()
• .addClass()
• .removeClass()
• .hasClass()
• .toggleClass()
• .ajax()
• .get(), .getJSON(), &
.getScript()
• .post()
• .load()
• .trim()
• .val()
• .attr()
• .removeAttr()
• .append() & .prepend()
• .after() & .before()
17
IamLUG 2010
Using jQuery UI
“jQuery UI is a widget and interaction library built
on top of the jQuery JavaScript Library, that you
can use to build highly interactive web
applications.”
18
IamLUG 2010
jQuery UI Widgets
• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Progressbar
• Slider
• Tabs
19
IamLUG 2010
jQuery UI Effects
• Blind
• Bounce
• Clip
• Drop
• Explode
• Fold
• Highlight
• Puff
• Pulsate
• Scale
• Shake
• Size
• Slide
• Transfer
20
• Use the .effect() function to easily add
animation effects listed below, many of which
simply extend existing jQuery methods.
IamLUG 2010
jQuery UI Effects – cont‟d
• Visibility Transitions – extends the standard .show(),
.hide(), and toggle() functions
• Color Transitions – extends the .animate() function to
animate colors as well
• Class Transitions – extends the .addClass(),
.removeClass(), .toggleClass(), and .switchClass() to be
able to animate between classes
• Advanced Easing – animates easing of elements based
on jQuery.easing plugin
21
IamLUG 2010
jQuery Interaction and Utilities
• Draggable – make any DOM element able to be dragged
around
• Droppable – make any DOM element to be droppable, a
target for Draggable elements
• Resizable – make any DOM element resizable, duh!
• Selectable – make any DOM element or group of
elements selectable, including multiple selections
• Sortable – make a group of DOM elements sortable, can
connect multiple lists
• Position – allows you to absolutely position any widget
on a page
22
IamLUG 2010
jQuery UI Themes
• All jQuery UI plugins are designed to allow a developer to
seamlessly integrate UI widgets into the look and feel of
their site or application. Each plugin is styled with CSS
and contains two layers of style information: standard
jQuery UI CSS Framework styles and plugin-specific
styles.
• jQuery UI Themeroller allows you to download any of the
24 themes in the gallery or create your own.
• The Downloader allows you to build a custom download
with only the pieces of jQuery and jQuery UI that your
page requires.
23
IamLUG 201024
There‟s a Plug-in for That
• A Plugin is a method for bundling methods and
functionality that enhance and extend the jQuery Core
• There is a Plugin directory on the jQuery site
• Most Plugins are Open Source and free to use
• Plugins can be extremely simple or complex
• Many Plugins have very good documentation
• Anyone can write a plugin – it‟s easier than you think Name your file jquery.[insert name of plugin].js, eg. jquery.debug.js
All new methods are attached to the jQuery.fn object, all functions to the
jQuery object.
inside methods, 'this' is a reference to the current jQuery object.
IamLUG 2010
What can you do with a Plugin?
• Create menus and tabs from simple unordered lists
• Add drag & drop functionality to any element
• Create slide shows and light boxes for displaying images
• Add animation and visual effects to any page
• Handle complex AJAX calls
• Add visually appealing tool tips to any element on a page
• Handle form validation prior to submission
• Make views easier to navigate
• Handle browser navigation issues that AJAX can create
• Add Autocomplete to any text field
25
IamLUG 2010
Domino Beauty Make-over Ritual
1. Build on a Good Foundation
2. Make It Easy on the Eyes
3. Don‟t Make the Them Think
4. Check the Mirror Before Heading Out
5. Flaunt It Once You Got It
26
IamLUG 2010
About the Demo Application – IT Projects
• Simple Project Tracking Application used by a small
team
• Main forms are Projects, Action Items, Issues, and
Requirements
• Originally created in February of 2000 for R5 and last real
development completed in 2002 before the release of R6
• Never intended for write access via browser and has little
HTML and no CSS
• Contains early code of what would become ASND Export
Facility on OpenNTF
27
IamLUG 2010
Step 1 – Apply A Good Foundation
• Use a CSS Framework for page layout
Suggest Looking at BluePrint
3 CSS Files to download and reference
Provides Grid for page layout
• Fix Domino Form Idiosyncrasies
Assign IDs for Form and all Fields
• Select a jQuery UI Theme
Use a standard one or
create your own
Smoothness is good for
corporate applications
28
$('form').each(function(index) {
$(this).attr("id",$(this).attr("name"));
});
$('input').each(function(index) {
$(this).attr("id",$(this).attr("name"));
});
$('textarea').each(function(index) {
$(this).attr("id",$(this).attr("name"));
});
$(‘select').each(function(index) {
$(this).attr("id",$(this).attr("name"));
});
IamLUG 201029
Demo & Code
IamLUG 2010
Step 2 – Make It Easy on the Eyes
• Make the Buttons Look Good
Use .button() from jQuery UI
• Modernize the Form
Use jqTransform(), jNice(), or NiceForms
• Don‟t Pop-Up When You Can Overlay
Use .dialog() from jQuery UI or .overlay() from jQuery Tools
• Submit the Form via AJAX
Use .post() from jQuery Core or .ajaxform() from jQuery Form
• Say No to Scrollbars on TextArea Fields
Use .elastic() to dynamically grow textareas
30
IamLUG 201031
Demo & Code
IamLUG 2010
Step 3 – Don‟t Make Them Think
• Give user‟s help before they need it
Add ToolTips to all fields with .tooltip() from jQuery Tools
• Dynamically show pieces of the form when needed
Use .show(), .hide(), and .toggle()
• Show Calendars for Date Fields
.datepick() in jQuery UI is one of many choices
• Use AutoComplete on Fields when Appropriate
Lots of plugins offer this, but it is also in jQuery UI 1.8
Can use a static list or get data from call to server for JSON
data
32
IamLUG 201033
Demo & Code
IamLUG 2010
Step 4 – Check the Mirror Before Heading Out
• Give visual feedback to users in real time
Highlight fields on events to let user‟s know if they are filling
out everything correctly
• Validate the form prior to sending it to the server
Use .validationEngine() or .validation() to perform validation
without any modification to the field markup
Validation functions can include passing the form values to the
server for backend validation
• Consider adding a password strength validator
Let user‟s know if their passwords are strong enough
34
IamLUG 201035
Demo & Code
IamLUG 2010
Step 5 – Flaunt It Once You Got It
• Make Your Views Clean and Efficient
Use DataTables plug-in for displaying tabular data and views
• Say Good-bye to Ugly Calendar Views
Use FullCalendar to display full-sized, drag & drop enabled
calendars
• Add Charts and Graphs to WOW the Executives
Use the Fusion Charts plugin for jQuery for Flash charts
• Give user‟s the ability to provide ratings as well as
comments on your site
Add Star Ratings Widget to the content pages of your site
Tie ratings to user logins to control rating accuracy
36
IamLUG 201037
Demo & Code
IamLUG 201038
Resources
• jQuery Project – http://jquery.com
• jQuery UI Project – http://jqueryui.com
• BluePrint CSS Framework – http://www.blueprintcss.org
• jQuery Tools – http://flowplayer.org/tools/index.html
• DataTables – http://www.datatables.net/
• FusionCharts for jQuery – http://www.fusioncharts.com/jquery/
• Star Rating Widget – http://orkans-tmp.22web.net/star_rating/