AD111

XPages, jQuery, and Dojo - a new paradigm in Client Side JavaScript

Dr. Mark Roden - PSC Group

In this session we will take a deep look at how Dojo and jQuery can be used to easily manipulate the Document Model of your XPage. This truly opens up a new paradigm for solving every day development problems. Take back your web browser and significantly reduce your compatibility issues. We will look at several useful Tools to use in building your CSJS code, identify resources and illustrate effective methodologies for Client Side JavaScript development in XPages.

About Marky - http://www.xomino.com

15 years Lotus Development Experience - All Web Development

5 years CSJS Libraries experience

3 Years jQuery experience

http://www.xomino.com
Taking Notes Podcast 157 - jQuery in XPages
Notes In 9 - ep 50 and 69
Twitter: @MarkyRoden
Email: marky@xomino.com

Currently
Full time XPages Developer Working for PSC Group Inc
jQuery mobile, XPages OneUI v2, jqPlot graphing dashboard, EXTJS filter grid

Outline

Why should you use a CSJS Library?

Using tools to debug CSJS

Dojo DOM Manipulation

How is jQuery any different than Dojo?

jQuery DOM Manipulation

Enhancing the user experience....

Plugins

Why should you use a CSJS Library ?

http://davidwalsh.name/6-reasons-to-use-javascript-libraries-frameworks
	Don't Reinvent The Wheel
	Do More With Less Code
	Save Time -- You Don't Code Your Own OS, Do You?
	Chances Are, You Aren't The Expert
	Speed Thrills
	Avoid Cryptic JavaScript Base Code

What CSJS comes with XPages?

What Comes out of the box?

XPages 8.5.4	Dojo 1.7.2
XPages 8.5.3	Dojo 1.6
XPages 8.5.2	Dojo 1.4.3
XPages 8.5.1	Dojo 1.3.2

You should really go and see
http://www.slideshare.net/paulswithers1/bp210-xpages-enter-the-dojo

Dojo in XPages - Where is it?

The simple answer is everywhere. Every button, action and effect all dojo

OneUI Styling

Date Picker
TypeAhead
Client Validation
Partial Refresh
Extension Library (Dojo disguised as a custom control)

We even create Client Side JavaScript (CSJS) using Server Side JavaScript (SSJS)

XPages gives us the ability to use SSJS in creating our CSJS. This gives us access to data at runtime
For example - some simple database information

<xp:button value="@DbName()" id="button3">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
		  <![CDATA[alertD('#{javascript: @DbName()}')]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

XPages Dojo Out of The Box

XPages gives us the ability to use some pretty sweet Dojo pre-formatted
for us to provide quick and easy to use functionality out of the box

The XPages extension library provides access to Dojo controls with little to zero
understanding required by the developer

8.5.3 also provides some neat tricks of its own

Using the pre-build Dojo capabilities

Here we have the XPages source code for creating an accordion and then "playing with it"

<xp:scriptGroup>
	<xe:alertAction loaded="true"
		text="Bye Bye !">
	</xe:alertAction>

	<xe:dojofxSlideTo node="djAccordionContainer1"
		duration="1000" left="500" top="100">
	</xe:dojofxSlideTo>


	<xe:dojoFadeOut duration="1000"
		node="djAccordionContainer1">

	</xe:dojoFadeOut>
</xp:scriptGroup>

Using the pre-build Dojo capabilities

MARKY
Fred
Karen
Bill
Billy
Johny

BILLY

Id	E mail
Adriana Kerr	adriana_kerr@renovations.com
Alba Mendoza	alba_mendoza@renovations.com
Albert Dejesus	albert_dejesus@renovations.com

Previous12345678...Next

Id	E mail	Created
Adriana Kerr	adriana_kerr@renovations.com	Apr 27, 2012
Alba Mendoza	alba_mendoza@renovations.com	Apr 27, 2012
Albert Dejesus	albert_dejesus@renovations.com	Apr 27, 2012
Alexandra Mays	alexandra_mays@renovations.com	Apr 27, 2012
Alexandria Roach	alexandria_roach@renovations.com	Apr 27, 2012

Using Tools to debug CSJS

Firebug - https://getfirebug.com/
The most popular and powerful web development tool

    Inspect HTML and modify style and layout in real-time
    Use the most advanced JavaScript debugger available for any browser
    Accurately analyze network usage and performance
    Extend Firebug and add features to make Firebug even more powerful
    Get the information you need to get it done with Firebug.

Firebug - https://getfirebug.com/

Start date:
End date:
Phone:

Select the Element
View the Document Model (DOM)
Change the DOM
Change the CSS
Write some JavaScript yourself!

Firebug - Debugging CSJS

Using "debugger" is your code
	Triggers the Script to stop the code execution so that you can 
	examine the variables and follow your code step by step

	Better than SSJS :)

Firebug - Debugging CSJS - using the console

Start date:
End date:
Phone:

window.validate24 = function(args){
   	var sTemp=dojo.byId('endDate24').value
		if (sTemp==""){
			alert('You must enter an end Date\n\nWho cares about Phone Number!')
	}
};

Using the console give you a quick and easy way to prototype code
Without having to waste time with Build Test/Build Test cycles.

With all the other capabilities of Firebug this is a huge development time saver

Firebug - Debugging CSJS - REALLY using the console

Start date:
End date:
Phone:

window.validate25 = function(args){
   	var sTemp=dojo.byId('endDate25').value
		if (sTemp==""){
			alert('You must enter an end Date\n\nWho cares about Phone Number!')
	} else {
		alert('Yay an End Date')
	}
};

Not only can we prototype code in the console we can also fix our code.

We can over-ride an existing function in the browser and change it to do 
our evil bidding.......yeah this is the scary part!

This allows us to either correct code - or create new code before copying 
it back into our XPage Source.

Firebug - Extending Firebug

http://getfirebug.com/wiki/index.php/Firebug_Extensions

There are multiple FireBug extensions like YSlow and FireQuery 
which will enhance the FireBug console and give you even more 
power in your CSJS development.

http://getfirebug.com/wiki/index.php/Firebug_Extensions

HTTPFox - Complimentary to FireBug

https://addons.mozilla.org/en-US/firefox/addon/httpfox

HTTPFox is a nice complimentary addition to your toolbox. In conjunction 
with FireBug no only can you see any changes which are made to the HTML in 
the console you can also see the HTTP calls made to the server. 

This is especially useful when considering ajax calls. Are they working?

https://addons.mozilla.org/en-US/firefox/addon/httpfox

Chrome Developer Tools

Chrome Developer Tools

CTRL-Shift-J

Very similar in nature to FireBug but with a very nice 
visual representation of how the page downloads

https://developers.google.com/chrome-developer-tools/docs/overview

IE Developer Tools

IE Developer Tools

F12

Again similar to FireBug and Chrome Developer tools but very IE focused

** IE Browser compatibility Toggle **

IE9 is the first browser with a Console!

http://msdn.microsoft.com/en-us/library/gg589507(v=vs.85).aspx

Firefox Web Developer Toolbar

Firefox Web Developer Toolbar 

Similar options to IE Developer Toolbar
Neat Edit HTML option to update mass changes to the web page

https://addons.mozilla.org/en-us/firefox/addon/web-developer/

Dojo DOM manipulation

Document Model (DOM) manipulation is what happens all the time 
in XPages but you might not realize it.

Take the XPage TypeAhead for example. As the user hits the key:

The XPage knows to call the server using AJAX - how?
Takes the response - how?
Manipulates the DOM to show the results and then displays the selection - wow!

Dojo - Type Ahead - DOM manipulation

Custom:

AJAX call to the server - shown with HTTPFox

DOM manipulation takes the response and add a new 
<UL>
  <LI> to the HTML of the page - shown with FireBug

It is then displayed to the user in the form of a fancy dropdown

Dojo Getting a handle on the DOM - dojo.byId

When using a selector in Dojo - what is selected is returned is the DOM node

Start date:
End date:
Phone:

dojo.ready(function(){
    var node = dojo.byId("someId");
    node.value = "Hi, World";
});

Dojo Getting a handle on the DOM - dojo.query

When using a selector in Dojo - what is selected is returned is the DOM node(s) as an array.

dojo.query('INPUT').style("color", "red");

Start date:
End date:
Phone:

// by class 
dojo.query(".someClass");

// by attributes 
dojo.query("[name^='link']");

// by tag type 
dojo.query("div");

// first-children 
dojo.query("ul > li");

// odd table rows: 
dojo.query("table tr:nth-child(odd)");

// scoped to some other node as parent
dojo.query("a.link", "someNode");

Dojo Manipulating the DOM - dojo.style

Does what it says on the tin - it styles.....not sure what else to tell you...

dojo.style(node, {
	border: "1px solid red",
	fontSize:"14pt",
	letterSpacing:"1.2em"
});

Start date:
End date:
Phone:

// Passing only an ID or node returns the computed style 
// object of the node:
dojo.style("thinger");

// Passing a node and a style property returns the current 
// normalized, computed value for that property:
dojo.style("thinger", "opacity"); // 1 by default

// Passing a node, a style property, and a value changes the 
// current display of the node and returns the new computed value
dojo.style("thinger", "opacity", 0.5); // == 0.5

// Passing a node, an object-style style property sets each of the 
// values in turn and returns the computed style object of the node:
dojo.style("thinger", {
        "opacity": 0.5,
        "border": "3px solid black",
        "height": "300px"
});

Dojo Manipulating the DOM - dojo.connect

Events in JavaScript or Dojo based applications are essential to making applications work. Connecting an event handler (function) to an element or an object is one of the most common things you will do when developing applications using Dojo. Dojo provides a simple API for connecting events via the dojo.connect function.

function helloPressed(){
 alert('You pressed the button');
}

function init(){
   button = dojo.byId('helloButton');
   button.innerHTML = "Ready - Click Me"
   dojo.connect(button, 'onclick', 'helloPressed');
}

Dojo Manipulating the DOM - dojo.attr

dojo.attr allows you to get and set an attribute of the DOM element - just remember not to break anything that XPages needs to function

button = dojo.query('[id$=helloButton77]')[0];
dojo.attr(button, {
	style: "border: 5px solid green",
	onclick: function(e){ helloPressed() }
	})
dojo.query('[id$=helloButton77]')[0].innerHTML =  "Ready - Click me"

// set some node to have a new id
dojo.attr(someNode, "id", "newId");

// get the id of a node reference
var id = dojo.attr(someNode, "id");

// set multiple attributes at once:
dojo.attr(someNode, {
    id:"newId",
    onclick: function(e){ /* handler code */ }
});

Dojo Manipulating the DOM - dojo.nodeList-manipulate

Method extensions to dojo.NodeList/dojo.query that manipulate HTML.
These methods are intended to match the API naming and behavior as the similarly named methods in jQuery.

dojo.require("dojo.NodeList-manipulate");

// Add a span that says Hello World after each div in the DOM
// by using the "after" method added by dojo.NodeList-manipulate
dojo.query("div").after("Hello World");

dojo.query("div").append("append");

dojo.query("span").appendTo("p");

dojo.query("b").wrap("<div><span></span></div>");

dojo.query(".red").clone().appendTo(".container");

Dojo Manipulating the DOM - dojo.place

The dojo.place() method is used to find nodes in the DOM and move them to a different point in the DOM tree

Content

Here is my content - it is very content :)

About

Here is the about - it gets about :)

//get the dojo node for the div with the ID "content"
//and the paragraph with the ID "about"
var content = dojo.byId('content');
var about = dojo.byId('about');

//place the paragraph before the div
dojo.place(about, content, "before"); //there is an "after" as well
//place the paragraph as the first element inside the div
dojo.place(about, content, "first");
//replace the div with the paragraph
dojo.place(about, content, "replace");
//replace the *contents* of the div with the paragraph
dojo.place(about, content, "only");

Dojo Manipulating the DOM - dojo.destroy

dojo.destroy() - Does not do what it says on the tin - it destroys nodes not dojo ;)

Content

Here is my content - it is very content :)

About

Here is the about - it gets about :)

dojo.destroy(dojo.byId('about'));

How is jQuery any Different than Dojo?

jQuery is just another JavaScript library, same as Dojo right?

It is not as "mature" as Dojo

"jQuery is for building websites and Dojo is for building enterprise applications"
(Kitson Kelly - Dojo committer)

JQuery: A minimalist system focused primarily on operating on existing DOM 
structures, JQuery features a hybrid XPath/CSS query language (Dojo uses 
standard CSS 3 queries) and provides a rich set of options and operations 
on the results of these queries. JQuery packs Ajax, effects, and other 
utilities into a small core (beating all but MooTools). While there is no 
widget or package system in JQuery per sae, 3rd party component libraries 
are available which build on top of JQuery.

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 

Used Everywhere

Open Source

Over 3000 plugins registered

Usage Stats

Used “everywhere”

57% of world’s top 10,000 websites use jQuery
http://trends.builtwith.com/javascript
	
Used by Microsoft .Net v4 as part of the ASP .NET Ajax framework
	
Some websites you probably know using jQuery
	Amazon
	Twitter
	Wordpress
	Stackoverflow
	BestBuy

jQuery 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
	~211,000 questions/answers tagged jQuery !
	(~4,500 questions tagged Dojo)
	(~600 questions tagged XPages)

jQuery Core

Selectors	-	("ELEMENT")	(".class")	("#idTag")	etc
Attributes	-	.attr()		.html()		.toggleClass()	etc
Traversing	-	.children()	.closest()	.find()		etc
Manipulation	-	.appendTo()	.css()		.val()		etc
CSS		-	.height()	.position()	.width()	etc
Events		-	.blur()		.bind()		.keypress()	etc	
Effects		-	.animate()	.fadeIn()	.slideToggle()	etc
Ajax		-	.get()		.getJSON()	.serialize()	etc
Utilities	-	.grep()		.each()		.inArray()	etc
Internals	-	.error()	.pushStack()	.context()	etc

jQuery UI

Going: Return:	Drag me to my target Drop here
Maximum price:
Section 1 MWLUG Rocks People! Section 2 jQuery beats dojo Section 3 jQuery rules Section 4 Mark Roden 2012

jQuery UI created to 2007 is the equivalent to dojo core widgets
	Effects (Animation)
	Date picker
	Slider
	Modal Dialogs
	Accordian
	AutoComplete
	Tabs
	Drag and Drop (pre-HTML5)
	etc
ThemeRoller 
	Something dojo does not have
	Simple way to style your widgets to your corporate colors

jQuery Mobile

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

http://demo.xomino.com/xomino/jquerymobile.nsf/xInvite.xsp

Demo jQuery Mobile Page

http://jquerymobile.com/

jQuery DOM Manipulation

We all take Cascading Style Sheets (CSS) for granted - using a simple <style> we can manipulate all the matching elements on a page.
jQuery uses a different selection model to Dojo but is more than just CSS 3
The selection engine is available independently @ http://www.sizzlejs.com

Start date:
End date:
Phone:

<style> 
	INPUT	{border: 1px solid red} 
	TD	{background: #FFFFCC}
</style>

jQuery $

jQuery uses the $ notation to identify the "Selector" and then functions and callbacks to perform actions based on those selectors

http://api.jquery.com/category/selectors/

Start date:
End date:
Phone:

<script> 
	function showDemo(){
		$('INPUT').css('border', '1px solid red')
		$('TD').css('background', '#FFFFCC')
	}
</script>

jQuery Selectors - node iteration

Because we are affecting all elements in the previous example you would normally just use a style sheet.

Using jQuery however we have control over node iteration and can cycle through the selected elements

Start date:
End date:
Phone:

$('INPUT').each(function(i){
	alert('The value of i: '+i)
	$(this).css(
		'border', '1px solid red'
	)
})

jQuery Selectors - Narrowing the selection

Selectors can be cumulative - for example - give me all the INPUT fields within a certain DIV

The selector reads from left to right as the containers move from parent to children

In this case the "." signifies a class - just like a CSS style!

Start date:
End date:
Phone:

$('.demo INPUT').each(function(i){
	alert('The value of i: '+i)
	$(this).css(
		'border', '1px solid red'
	)
})

jQuery Selectors - Returning the jQuery object

When using a selector in jQuery - what is selected is returned as a jQuery object

jQuery objects contain an array of the selected element nodes
Using the browser console we can see this

Start date:
End date:
Phone:

$('.jQueryDiv INPUT')

jQuery Selectors - Chaining

Chaining is a really powerful capability of the jQuery model

All methods can be chained together to perform multiple action on one selection

Start date:
End date:
Phone:

$('.chaining INPUT').css('border', '1px solid red').css('color', 'blue')

$('.thePhone INPUT')
	.css('border', '1px solid red')
	.closest('TR').css('background', '#FFFFCC')

jQuery Selectors - Common

Here are some alternate "selectors" - For more information google "jquery selector"

Attribute Selector: 
	prefix 		[name|="value"]
	any		[name*="value"]
	word selector	[name~="value"]
	ends with	[name$="value"]
	equals		[name="value"]
	not equals 	[name!="value"]
	starts with 	[name^="value"]
	
Id Selector
	("#id")

Class Selector
	(".class")	

Element Selector
	("Element")

jQuery Selectors - Less Common

Here are some alternate "selectors" - For more information google "jquery selector"

Select the element at index n within the matched set.
:eq() 

Select all elements at an index greater than index within the matched set.
:gt() 

Selects all elements that are hidden.	
:hidden 

Selects all elements that are the last child of their parent.
:last-child 

Selects odd elements, zero-indexed. See also even() 
:odd

jQuery Selectors - Less Common

Here are some alternate "selectors" - For more information google "jquery selector"

Selects all elements that are the nth-child of their parent.
:nth-child() 

Selects all elements that do not match the given selector. 
:not() Selector

Selects all direct child elements specified by "child" of elements specified by "parent".
(“parent > child”)

Selects the combined results of all the specified selectors.
(“selector1, selector2, selectorN”)

Multiple Attribute Selector 
[name="value"][name2="value2"]

jQuery Selectors - Custom Selectors

jQuery's api allows you to define your own selectors for your own needs

Start date:	MWLUG
End date:	OPEN NTF
Phone:	Xomino

<a rel="Marky" href="http://www.xomino.com">Xomino</a>


$.expr[':'].withRel = function(obj){
  var $this = $(obj);
  return ($this.attr('rel') != undefined);
};

function getMailLink(){
	$("a:withRel").css("color", "red");
}

Hello World in jQuery

Saying Hello world is the basic starting point for almost all programming languages. jQuery itself is not a programming language.

In JavaScript you would normally just do an alert box which is not user friendly - in jQuery we can "improve" on the user experience....

<script> alert('Hello World') </script>

Adding animation

Your imagination is the only thing stopping you from using animation in your XPage....
and possibly taste/common sense......but hey this is a demonstration.

Select everything with a class = hwButton

Animate a change to color = red and fontSize = 50px

Set a Delay of 1000ms

Run the effect "explode" over 3000ms

<script> 
	function explodeButton(){
		$(".hwButton")
			.animate({ color: 'red', fontSize: '50px'})
			.delay(1000)
			.effect( 'explode', {}, 3000, {}) 
	}
</script>

.slideToggle()

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

<xp:div styleClass="reveal" id="showDiv">
	Your stuff HERE 
</xp:div> 
<script>
	$(".reveal").slideToggle('slow') 
</script>

Nice Rows !

A nice way to enhance the user experience with tables is to provide alternate row coloring. This is simple within jQuery because we can

Select all the odd rows in the table

set a background color for each selected row

First name	Last name	E mail
Adriana	Kerr	adriana_kerr@renovations.com
Alba	Mendoza	alba_mendoza@renovations.com
Albert	Dejesus	albert_dejesus@renovations.com
Alexandra	Mays	alexandra_mays@renovations.com
Alexandria	Roach	alexandria_roach@renovations.com

<script>	
	$("#myTable TR:odd").css('background', '#DDDDFF')	
</script>

Nicer Rows !

Kicking it up a notch we can:

Select all the odd rows in the table

set a background color for each selected row

Toggle the yellowRow class on and off

First name	Last name	E mail
Adriana	Kerr	adriana_kerr@renovations.com
Alba	Mendoza	alba_mendoza@renovations.com
Albert	Dejesus	albert_dejesus@renovations.com
Alexandra	Mays	alexandra_mays@renovations.com
Alexandria	Roach	alexandria_roach@renovations.com

$("#myTable TR:odd").css('background', '#DDDDFF')	
$("#myTable TR").hover(function(){
	$(this).toggleClass("yellowRow");
});

Nicest Rows ! (Dojo and jQuery working in harmony)

Here's where your user's expectation level is at:

Easy access to data - The XPages Repeat control and Pager

Easy readability - Color all the odd rows a different color

Interactivity - Toggle the yellowRow class on and off

Function - Click on theto delete the document

Previous12345678...Next

First namez	Last name	E mail
Adriana	Kerr	adriana_kerr@renovations.com
Alba	Mendoza	alba_mendoza@renovations.com
Albert	Dejesus	albert_dejesus@renovations.com
Alexandra	Mays	alexandra_mays@renovations.com
Alexandria	Roach	alexandria_roach@renovations.com

function nicestRows(){
	$(".myTable TR:odd").css('background', '#DDDDFF')	
	
	$(".myTable TR").hover(function(){
		$(this).toggleClass("yellowRow");
	}); 

	$(".myTable IMG").on("click", function(){
		$(this).parents('tr').effect( 'highlight', '', 500, ''
	).fadeOut('slow') });
	
}

Drag And Drop

HTML5 provides the ability to drag and drop elements but jQuery has been doing it for years in ALL browsers.

Make something draggable

First name	Last name	E mail
Adriana	Kerr	adriana_kerr@renovations.com
Alba	Mendoza	alba_mendoza@renovations.com
Albert	Dejesus	albert_dejesus@renovations.com
Alexandra	Mays	alexandra_mays@renovations.com
Alexandria	Roach	alexandria_roach@renovations.com

<script>	
	$("IMG").draggable()	
</script>

And Droppable

HTML5 provides the ability to drag and drop elements but jQuery has been doing it for years in ALL browsers.

Full Name	Email
Adriana Kerr	adriana_kerr@renovations.com
Alba Mendoza	alba_mendoza@renovations.com
Albert Dejesus	albert_dejesus@renovations.com
Alexandra Mays	alexandra_mays@renovations.com
Alexandria Roach	alexandria_roach@renovations.com

Drop here

<script>
	$( "#droppable" ).droppable({ 
	hoverClass: "ui-state-active", 
	drop: function( event, ui ) { 
		$( this )
			.addClass( "ui-state-highlight" ) 
			.find( "p" ) 
			.html("Dropped!" ); 
		} 
	}); 
</script>

Controlling the Drop

By adding the UNID of the document in the repeat we are able to access the document properties.....

Full Name	Email
Adriana Kerr	adriana_kerr@renovations.com
Alba Mendoza	alba_mendoza@renovations.com
Albert Dejesus	albert_dejesus@renovations.com
Alexandra Mays	alexandra_mays@renovations.com
Alexandria Roach	alexandria_roach@renovations.com

Drop here

<xp:text escape="false">
	<xp:this.value>#{myPeople.Id}</xp:this.value>
	<xp:this.attrs>
		<xp:attr name="id" value="#{javascript:myPeople.getUniversalID()}">
		</xp:attr>
	</xp:this.attrs>
</xp:text>

Getting the Data to do the REST

Using a Dynamic REST service we can get back end data based on the Name as a lookup key

Full Name	Email
Adriana Kerr	adriana_kerr@renovations.com
Alba Mendoza	alba_mendoza@renovations.com
Albert Dejesus	albert_dejesus@renovations.com
Alexandra Mays	alexandra_mays@renovations.com
Alexandria Roach	alexandria_roach@renovations.com

Drop here

$.get('xRestControl.xsp/contactjson?q='+ui.draggable.text(), 
		function(data){		
			$( "#dialog-modal" ).html(data).dialog({
				height: 240,
				width: 400,
				modal: true
			});		
		}
	)}

jQuery Plugins

Ultimately what is the point of DOM Manipulation? To enhance the user experience !

The jQuery community is much larger than dojo

jQuery plugins massively out number Dojo plugins 

Don't re-invent the wheel

Embrace the plugin!

Labelify

In-line field helper text to set user expectation

Example 1

Vegetable (Cabbage):
Fruit:
How many for Adam?:
How many for Jane?:

Example 2

This field will be manually labellified - click the buttons below in order

Labelify this Field:

This example was built using code created by Stuart Langridge - http://www.kryogenix.org/code/browser/labelify/

<xp:eventHandler event="onClientLoad" submit="true" refreshMode="norefresh">
	<xp:this.script>
		x$("#{id:panel1}", " input").labelify({ 
			text: "label", labelledClass: "labelHighlight"  
		}); 

		x$("#{id:fruit5}").labelify({
			labelledClass: "labelField"
		})				
	</xp:this.script>
</xp:eventHandler>

Masked Input

In-line field helper text to set user expectation (part deux)

Date:	99/99/9999 (cannot enter a letter)
Phone:	(999) 999-9999 (cannot enter a letter)
SSN:	999-99-9999 (cannot enter a letter)
Custom:	99-99-aaaa-9 (only accepts alphanumeric in the format shown)

$("[id$=date6_3]").mask("99/99/9999");
$("[id$=phone6_3]").mask("(999) 999-9999");
$("[id$=SSN6_3]").mask("999-99-9999");
$("[id$=custom6_3]").mask("99-99-aaaa-9");

TokenInput Autocomplete

Makes your dojo type ahead look like last year's news...

Plain Vanilla all defaults	With facebook styling with custom labels

Searching a local JSON list search for "a"	Twitter Feed (type Twitter id - e.g. xpages)

$(document).ready(function() {
	$("#[id$=inputText6_43]").tokenInput("xMWLUG_1.xsp/contactjson", {
		propertyToSearch: "email",
		theme: "facebook"
    });
});

JQVMAP

jQuery Vector Map - Just an amazing plugin

labels are turned off for US and Germany


Country Code:
Name:	United Kingdom
Population	62,262,000
Area	242,900

jQuery('#vmap').vectorMap({
		    map: '#{javascript: getComponent("comboBox6_6").getValue()}',
		    backgroundColor: '#333333',
		    color: '#ffffff',
		    hoverOpacity: 0.7,
		    selectedColor: '#666666',
		    enableZoom: true,
		    showTooltip: false,
		    values: sample_data,
		    scaleColors: ['#FFFFCC', '#336600'],
		    normalizeFunction: 'polynomial',
		    etc
		    etc

Pines Notify

A classier and more flexible way to talk to your users

Timer
You can change the delay in removing the popups
Current Timer:

Regular Error	Non-Blocking Notice	Shadow Notice	Notice to Error To Info

Top Error Bar	Rich Notice	Sticky Error (won't close)	Lower Timer

$.pnotify({
	pnotify_title: 'Oh No!',
	pnotify_text: 'Something terrible happened.',
	pnotify_type: 'error'
});

Joy Ride

A really simple way to take your users round your application

Add a New Image
Apparently this functionality is available in the live demo :)
A simple Lightbox
You can produce a lightBox Slide show of the images by clicking on one of these
See YouTube
Clickin on the NotesIn9 image will show you an example of the prettyPhoto running a YouTube video.
You can also include images in the popup!
View Inline Content
Clickin on the globe image will show you an example inline content within the prettyPhoto popup

Add a new image - only jpg, gif, png will be displayed

Click on one of the images to view the slideshow

Image name:
Image description:

The example database contains a working version

Nin9 YouTube Video example

Inline Content

Ajax content - prettyPhoto[ajax]
(content is loaded on the fly)

Ajax content

External Websites openned in an iFrame - prettyPhoto[iFrame]

Apple.com

$(window).joyride()

Flip

No good reason other than a little Wow factor !

Show Chart Show Data

	Adam	Jane
Apples	6.0	9
Bananas	1.0	2
Oranges	2.0	4
Plantains	23.0	1

$(function(){
	$("#flipPad a").bind("click",function(){
		var $this = $(this);
		var thePanel = '[id$="'+$this.attr("thePanel")+'"]'
		$("#flipbox").flip({
			direction: $this.attr("rel"),
			color: '#FFFFFF',
			content: $(thePanel).html()
		})
		return false;
	});			
})

So what was he on about again? (In conclusion)

DOM Manipulation is not rocket science

There are over 100,000 questions tagged "jQuery" on StackOverflow

There are over 245,000 questions tagged "JavaScript" on StackOverflow

Use your imagination and make your user's experience better !

JavaScript libraries are NOT a new paradigm in web-development

Their out of the box inclusion in XPages IS a new paradigm

Use it :)

Questions?

This presentation was made with Ascensor.js

and

HTML5, CSS3, Firefox 14, Firebug, HTTPFox, Chrome Developer Tools, IE developer tools,
Firefox DeveloperToolbar, jQuery and Dojo

and XPages!!!

About Marky - http://www.xomino.com

Outline

Why should you use a CSJS Library ?

What CSJS comes with XPages?

Dojo in XPages - Where is it?

We even create Client Side JavaScript (CSJS) using Server Side JavaScript (SSJS)

XPages Dojo Out of The Box

Using the pre-build Dojo capabilities

Using the pre-build Dojo capabilities

Using Tools to debug CSJS

Firebug - https://getfirebug.com/

Firebug - Debugging CSJS

Firebug - Debugging CSJS - using the console

Firebug - Debugging CSJS - REALLY using the console

Firebug - Extending Firebug

HTTPFox - Complimentary to FireBug

Chrome Developer Tools

IE Developer Tools

Firefox Web Developer Toolbar

Dojo DOM manipulation

Dojo - Type Ahead - DOM manipulation

Dojo Getting a handle on the DOM - dojo.byId

Dojo Getting a handle on the DOM - dojo.query

Dojo Manipulating the DOM - dojo.style

Dojo Manipulating the DOM - dojo.connect

Dojo Manipulating the DOM - dojo.attr

Dojo Manipulating the DOM - dojo.nodeList-manipulate

Dojo Manipulating the DOM - dojo.place

Dojo Manipulating the DOM - dojo.destroy

How is jQuery any Different than Dojo?

What is jQuery anyway?

Usage Stats

jQuery Resources

jQuery Core

jQuery UI

Section 1

Section 2

Section 3

Section 4

jQuery Mobile

jQuery DOM Manipulation

jQuery $

jQuery Selectors - node iteration

jQuery Selectors - Narrowing the selection

jQuery Selectors - Returning the jQuery object

jQuery Selectors - Chaining

jQuery Selectors - Common

jQuery Selectors - Less Common

jQuery Selectors - Less Common

jQuery Selectors - Custom Selectors

Hello World in jQuery

Adding animationwindow.prettyPrint()

.slideToggle()

Nice Rows !

Nicer Rows !

Nicest Rows ! (Dojo and jQuery working in harmony)

Drag And Drop

And Droppable

Controlling the Drop

Getting the Data to do the REST

jQuery Plugins

Labelify

Masked Input

TokenInput Autocomplete

JQVMAP

Pines Notify

Joy Ride

Add a New Image

A simple Lightbox

See YouTube

View Inline Content

Flip

So what was he on about again? (In conclusion)

Questions?

This presentation was made with Ascensor.js and HTML5, CSS3, Firefox 14, Firebug, HTTPFox, Chrome Developer Tools, IE developer tools, Firefox DeveloperToolbar, jQuery and Dojo and XPages!!!

Adding animation

This presentation was made with Ascensor.js

and

HTML5, CSS3, Firefox 14, Firebug, HTTPFox, Chrome Developer Tools, IE developer tools,
Firefox DeveloperToolbar, jQuery and Dojo

and XPages!!!