Applications of JavaScript/DHTML

1. Applications of JavaScript/DHTML Quick tips to improve the usability and scalability of your ColdFusion-based applications Steve Drucker CEO, Fig Leaf Software

2. 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

3. 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)

4. 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>

5. Extending <CFFORM> with the onSubmit attribute • The onSubmit attribute of CFFORM allows you to invoke a JS function after form validation has taken place

6. 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>

7. 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

8. 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>

9. 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>

10. 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>

11. 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)

12. 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

13. 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>

14. 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>

15. 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

16. 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>

17. 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>

18. Code Walkthrough • Sorting Recordsets and a demonstration of the <CF_iTable> custom tag

19. 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

20. 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.

21. 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)">

22. 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">

23. 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

24. Key Technique: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)

25. 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

26. 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)

27. Key Technique: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>

28. 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>' }

29. Code Walkthrough: DHTML Context-Sensitive Navigation

30. 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

31. Demo Drag and Drop in Dreamweaver MX

32. Demo: Putting it all together

33. Summary • Knowing just a few key JavaScript/DHTML techniques can take you a very long way.

34. Questions? • Steve Druckersdrucker@figleaf.comhttp://www.figleaf.comhttp://training.figleaf.comhttp://www.cfugorama.com • Book ResourcesAnything by Danny Goodman or David Flannagan