This was a presentation I wrote for a previous employer, aimed at Java developers. The goal was to help them understand some of the new UI conventions I was putting into their application, so that they would be able to develop "smarter" JSP code.

1. Javascript & Templates Ideas to Inspire Better Coding

9. Object Definition var mailbox = {0: " mail number 1)", 1: "(mail number 2)", 2: "(mail number 3)"}; OR, create your own object type : function FormObject(id) { var obj = oForm[id]; obj.originalValue = obj.value; obj.dirty = false; obj.onchange = doSomething(); };

11. Extending Objects Date.prototype.format = function(vFormat) { //'this' is just like in Java alert("The date to format:"+this); var x = (//...do date formatting w/ ‘this’ & ‘vFormat’); return x; }

13. Questions?

18. Custom Objects, Events and prototype function FormObject(id) { //constructor pattern //set properties to the form element's DOM object dynamically var obj = oForm[id]; obj.originalValue = obj.value; //original value preserved obj.dirty = false; //has object value changed? //register an onchange to each input needing validation obj.onchange = this.validate; } //assign validation function to FormObject's FormObject.prototype.validate = function(e) { //by doing it this way, you don't have to change any occurrence of //"onChange" attributes calling an updated function name var evt = e ? e : window.event; var oElem = oForm[this.name]; if(oElem && oElem.getAttribute("validate")) { //test for null var value = oElem.value; //automatically update the dirty flag oElem.dirty = (value != oElem.originalValue); if("phone" == oElem.getAttribute("validate")) validatePhone(value); else if("email" == oElem.getAttribute("validate")) validateEmail(value); } }

21. Questions?

27. JSON in JSP <%@ taglib uri=&quot;/WEB-INF/c.tld&quot; prefix=&quot;c&quot;%> { &quot;name&quot; : &quot;${initData.name}&quot;, &quot;address&quot; : &quot;${initData.address}&quot;, &quot;phone&quot; : &quot;${initData.phone}&quot;, &quot;serviceType&quot; : &quot;${initData.serviceType}&quot;, &quot;serviceLength&quot; : ${initData.serviceLength}, &quot;prefTechs&quot; : [ <c:if test=&quot;${not empty initData.prefTechs}&quot;> <c:forEach var=&quot;tech&quot; items=&quot;${initData.prefTechs}&quot; varStatus=&quot;status&quot;> { &quot;name&quot; : &quot;${tech.first}&quot;, &quot;techId&quot; : &quot;${tech.second}&quot; }<c:if test=&quot;${!status.last}&quot;>,</c:if> </c:forEach> </c:if> ] }

30. Questions?

39. Questions?