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

IamLUG 201039

Follow Up

How to contact me:

Sean Burgess

sean@asnddesigns.com