1 / 34

Applications of JavaScript/DHTML

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

zada
Download Presentation

Applications of JavaScript/DHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related