Applications of
JavaScript/DHTML
Quick tips to improve the usability
and scalability of your ColdFusion-
based 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
Enter your name:
Enter your date of birth:
Extending with
the onSubmit attribute
The onSubmit attribute of CFFORM
allows you to invoke a JS function
after form validation has taken place
Extending with
onSubmit
function fnValidate() {
if (document.forms[0].education.selectedIndex == 0) {
alert("You must select an education bracket");
return false;
}
}
Select your level of education
Please Select
High School
Some College
I'm a freakin' rocket scientist!
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”
Step 2: Passing info from
JavaScript into ColdFusion
Step 3: Outputting a result
select productname from product where productid = #url.productid#
parent.appframe.document.forms[0].productname.value =
'#jsStringformat(qdata.productname)#';
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 data-
binding
“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
select bean_name,price_per_unit from beans
function bean(bean_name,price_per_unit) {
this.bean_name = bean_name;
this.price_per_unit = price_per_unit;
}
var beans = new Array();
beans[#decrementvalue(getbeans.currentrow)#] = new
bean(„#jsStringFormat(getbeans.bean_name)#‟,#getbeans.price_per_unit#);
Sorting Records in 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;
}
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
function drawtable() {
var xstr=“”;
for (var I=0; I‟ + beans[I].bean_name;
xstr=xstr+‟‟ + beans[I].price_per_unit;
xstr=xstr+‟‟;
}
xstr+=„‟;
parent.document.viewdataframe.open();
parent.document.viewdataframe.write(xstr);
parent.document.viewdataframe.close();
}
Dynamically Changing Content in
Microsoft Internet Explorer
function drawtable() {
var xstr=“”;
for (var I=0; I‟ + beans[I].bean_name;
xstr=xstr+‟‟ + beans[I].price_per_unit;
xstr=xstr+‟‟;
}
xstr+=„‟;
document.all.results.innerHTML = xstr;
}
Code Walkthrough
Sorting Recordsets and a
demonstration of the
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
function fntimeout() {
showModelessDialog("timeout.htm",window,
"status:false;dialogWidth:300px;dialogHeight:300px");
}
Presenting the user with a
countdown timer/autologoff
function fnclear() {
window.dialogArguments.document.location.href='http://www.figleaf.com';
window.close()
}
Danger Will Robinson! You will lose all your work if you don't save!
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)
document.oncontextmenu = fnContextMenu;
function fnContextMenu(){
event.returnValue = false; // cancel the default behavior
}
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; iClick here'
}
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
sdrucker@figleaf.com
http://www.figleaf.com
http://training.figleaf.com
http://www.cfugorama.com
Book Resources
Anything by Danny Goodman or
David Flannagan