Transcript Ninja JavaScript Techniques

Applications of
JavaScript/DHTML
Quick tips to improve the usability
and scalability of your ColdFusionbased applications
Steve Drucker
CEO, Fig Leaf Software
Topics



Leveraging CFINPUT JS Validation
Routines
Performing in-context validation with hidden
frames
ColdFusion – JavaScript data binding






Client-side record sorting
JS/DHTML Grid Controls
Managing ColdFusion-based session
timeouts through JavaScript
Dynamic HTML context-menus
A custom tag for DHTML draggable dialog
boxes
Demo: Putting it all together
Using JavaScript for Data
Validation

ColdFusion’s CFFORM & CFINPUT
tags allow you to validate data types
for input boxes











Date
Eurodate
Social Security Number
Telephone Number
Integer
Floating Point
Credit Card
Time
Zipcode
Required
Regular Expressions (CF 5)
Code Sample of <CFFORM>
<CFFORM ACTION=“foo.cfm”>
Enter your name:
<CFINPUT TYPE=“text”
NAME=“name”
required=“Yes”
Message=“You must enter your name”>
Enter your date of birth:
<CFINPUT TYPE=“text”
NAME=“birthdate”
required=“Yes”
Validate=“Date”
Message=“You must enter your birth date in the format mm/dd/yyyy”>
<input type=“submit”>
</CFFORM>
Extending <CFFORM> with
the onSubmit attribute

The onSubmit attribute of CFFORM
allows you to invoke a JS function
after form validation has taken place
Extending <CFFORM> with
onSubmit
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function fnValidate() {
if (document.forms[0].education.selectedIndex == 0) {
alert("You must select an education bracket");
return false;
}
}
</SCRIPT>
<CFFORM ACTION=“foo.cfm” onSubmit=“return fnValidate()”>
Select your level of education
<select name="education">
<option value="">Please Select
<option value="1">High School
<option value=“2”>Some College
<option value="5">I'm a freakin' rocket scientist!
</select>
<input type=“submit”>
</CFFORM>
In-context data validation
using a “hidden frame”



In some instances, you may need to
validate data against a database
without leaving the data entry
screen
Requires frames
You must pass information from
JavaScript to a ColdFusion page
Step 1: Defining a “hidden frame”
<frameset rows="*,0" border="0" frameborder="0" framespacing="0">
<frame name="appframe"
src="myform.cfm“
frameborder="0"
scrolling="Auto"
marginwidth="0"
marginheight="0">
<frame name="hiddenframe"
src="myform.cfm"
frameborder="0"
scrolling="0"
marginwidth="0"
marginheight="0">
</FRAMESET>
Step 2: Passing info from
JavaScript into ColdFusion
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-function fnFindProduct(rowid,xval) {
parent.hiddenframe.location.href='lookup.cfm?row=' +
rowid + '&val=' + xval;
}
//-->
</SCRIPT>
<CFFORM … >
<cfinput type="text" name="productid” size="3"
validate="integer"
onChange="fnFindProduct(1,this.value)">
</CFFORM>
Step 3: Outputting a result
<CFQUERY NAME="qdata" datasource="ninjaJavascript">
select productname from product where productid =
#url.productid#
</CFQUERY>
<CFOUPTUT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
parent.appframe.document.forms[0].productname.value =
'#jsStringformat(qdata.productname)#';
</SCRIPT>
</CFOUTPUT>
What is Data-Binding?


Data-binding involves taking information
from the ColdFusion server and making it
available to the browser in an easily
manipulated format.
Data-binding is typically achieved using
one of two techniques


Dynamically outputting JavaScript Objects
Using the Web Distributed Data Exchange
(WDDX) SDK (available at www.openwddx.org)
The advantages of databinding



“Live” data on the client can be
manipulated without making a
server-transaction
Faster “perceived” performance by
end-users
Less web traffic leads to enhanced
scalability
Transferring a CF Recordset to
JavaScript
<CFOUTPUT QUERY=“getbeans” datasource=“ninjaJavaScript”>
select bean_name,price_per_unit from beans
</CFOUTPUT>
<SCRIPT LANGUAGE=“JavaScript”>
function bean(bean_name,price_per_unit) {
this.bean_name = bean_name;
this.price_per_unit = price_per_unit;
}
var beans = new Array();
<CFOUTPUT QUERY=“getbeans”>
beans[#decrementvalue(getbeans.currentrow)#] = new
bean(‘#jsStringFormat(getbeans.bean_name)#’,#getbeans.price_per_unit#);
</CFOUTPUT>
</SCRIPT>
Sorting Records in JavaScript
<SCRIPT LANGUAGE=“JavaScript”>
function sortbeans(sorttype) {
if (sorttype==‘bean_name’) {
beans.sort(SortByBeanName);
} else {
beans.sort(SortByPricePerUnit);
}
}
function SortByBeanName (a,b) {
if (a.bean_name > b.bean_name)
return 1
else
return –1;
}
</SCRIPT>
Outputting Content in
JavaScript


Use the document.write() method
for maximum compatibility
Microsoft Internet Explorer allows
you to redraw sections of a page
using the innerHTML and
outerHTML methods
Outputting Records x-Browser
<SCRIPT LANGUAGE=“JavaScript”>
function drawtable() {
var xstr=“<html><body><table>”;
for (var I=0; I<beans.length; I++) {
xstr=xstr+’<tr><td>’ + beans[I].bean_name;
xstr=xstr+’</td><td>’ + beans[I].price_per_unit;
xstr=xstr+’</td></tr>’;
}
xstr+=‘</table></body></html>’;
parent.document.viewdataframe.open();
parent.document.viewdataframe.write(xstr);
parent.document.viewdataframe.close();
}
</SCRIPT>
Dynamically Changing Content in
Microsoft Internet Explorer
<SCRIPT LANGUAGE=“JavaScript”>
function drawtable() {
var xstr=“<table>”;
for (var I=0; I<beans.length; I++) {
xstr=xstr+’<tr><td>’ + beans[I].bean_name;
xstr=xstr+’</td><td>’ + beans[I].price_per_unit;
xstr=xstr+’</td></tr>’;
}
xstr+=‘</table>’;
document.all.results.innerHTML = xstr;
}
</SCRIPT>
<html><body><div id=“results”></div></body></html>
Code Walkthrough

Sorting Recordsets and a
demonstration of the <CF_iTable>
custom tag
Managing ColdFusion Session
Timeouts



The default installation of CF sets
session timeouts to 20 minutes
Unfortunately, the timeout can activate
prior to a user submitting a complex form,
long data entry task, etc.
You can use JavaScript to proactively
warn an end-user about an impending
timeout
The setTimeout method



JavaScript has a method called
setTimeout that will execute a javascript
expression after a specified number of
miliseconds.
Use setTimeout to invoke a warning
message prior to session timeout.
After the countdown timer expires, you
can redirect the user to a logon page,
thereby securing any content that may
have been left on-screen.
Setting timeout on a page
<html>
<head>
<script language=“JavaScript”>
function fntimeout() {
showModelessDialog("timeout.htm",window,
"status:false;dialogWidth:300px;dialogHeight:300px");
}
</SCRIPT>
</head>
<body onLoad="setTimeout('fntimeout()',5000)">
Presenting the user with a
countdown timer/autologoff
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function fnclear() {
window.dialogArguments.document.location.href='http://www.figleaf.com';
window.close()
}
</SCRIPT>
<body onLoad="setTimeout('fnclear()',5000)">
Danger Will Robinson!
You will lose all your work if you don't save!
<input type="button"
onClick="window.dialogArguments.document.forms[0].submit()" value="Click here
to submit">
DHTML in-context menus

Left/Right Clicking on an Object
displays a menu





Hiding/showing objects in the browser
Tracking Mouse Movements
Dynamically moving objects on the
page
OnContextMenu events
Creating the visual “exploding menu”
effect
Showing/Hiding objects in
browsers

Microsoft Internet Explorer





document.all.objname.style.display=‘none’
document.all.objname.style.display=‘’;
document.all.objname.style.visibility=‘hidden’
document.all.objname.style.visibility=‘visible’
Netscape Navigator 4.x


Move layers to a negative pixel coordinate
document.layername.moveTo(-200,-200)
Key Technique:
Tracking Mouse Movement

Microsoft Internet Explorer



Use the EVENT properties to inspect
mouse disposition
event.clientX, event.clientY
Netscape Navigator 4.x


Use obj.pageX, obj.pageY
Use event capturing
Key Technique:
Moving objects on screen

Microsoft Internet Explorer

Set the top and left coordinates of an
object
document.all.objname.style.top
 document.all.objname.style.left


Netscape Navigator

Move layers

document.layername.moveTo(x,y)
Right Mouse Context Menu
(MSIE)
<SCRIPT FOR = document EVENT = oncontextmenu>
document.oncontextmenu = fnContextMenu;
<SCRIPT>
<SCRIPT>
function fnContextMenu(){
event.returnValue = false; // cancel the default behavior
}
</SCRIPT>
Key Technique:
Menu “Flyout” Animation
function doresize(h,w) {
document.all.menubar.style.height=h;
document.all.menubar.style.width=w;
}
function fnShowmenu() {
document.all.menubar.style.top = event.clientY;
document.all.menubar.style.left = event.clientX;
document.all.menubar.style.display='';
for (var i=1; i<200; i++) {
setTimeout("doresize(" + i + "," + i + ")",i*2);
}
document.all.menuoptions.innerHTML = '<A HREF="http://www.figleaf.com">Click here</A>'
}
Code Walkthrough:
DHTML Context-Sensitive
Navigation
Creating Draggable Layers


Use Dreamweaver MX to generate
x-browser compatible code
Inserting an IFRAME into a
draggable layer has the net effect of
a draggable window
Demo
Drag and Drop in Dreamweaver
MX
Demo: Putting it all together
Summary

Knowing just a few key
JavaScript/DHTML techniques can
take you a very long way.
Questions?


Steve Drucker
[email protected]
http://www.figleaf.com
http://training.figleaf.com
http://www.cfugorama.com
Book Resources
Anything by Danny Goodman or
David Flannagan