Monday April 11, 2005

Spring + Creator

Somebody has posted a "howto" in the forum explaining how to use the Spring Framework within a Creator application - available here.

(I want to give credit, but there's no name listed in the profile for the user. Over a hundred posts in less than a month though - wow!)

(2005-04-11 22:32:31.0) Permalink Comments [1]

Client Side JavaScript

Most JSF components have a number of onXXX properties, such as onClick for buttons. You can attach any JavaScript you want here, and this JavaScript is run in the user's browser.

You can use this to improve the user interaction. For example, let's say you have a text field which can only contain numbers. Clearly, you should put a validator on the number field - never trust client-side validation alone. However, rather than users having to find out after the submit that they made a mistake they need to correct, why not prevent them from typing anything other than a number in the first place?

We can use JavaScript to prevent anything other than digits from being entered into a textfield. Here's how: We need to write a JavaScript function which is run on every keystroke which decides whether the given key is valid, and if not, return false - this will prevent the key from getting added into the textfield.

Did I say write JavaScript? Ooops, I meant "google for reusable JavaScript". The internet is full of little JavaScript snippets for doing things like this. Here's a JavaScript function I found; we can add it to our document by embedding it in a <script> tag, and put the actual JavaScript code in a CDATA section to prevent the XML parser from interpreting it as anything other than raw data:

<script type="text/javascript">
<![CDATA[
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
   key = window.event.keyCode;
else if (e)
   key = e.which;
else
   return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) || 
    (key==9) || (key==13) || (key==27) )
   return true;

// numbers
else if ((("0123456789").indexOf(keychar) > -1))
   return true;

// decimal point jump
else if (dec && (keychar == "."))
   {
   myfield.form.elements[dec].focus();
   return false;
   }
else
   return false;
}
-->
]]>
</script>

Alternatively, you can place this code (without the surrounding <script> tag) in a separate javascript file, for example, digitsOnly.js under resources, and in that case instead of including the large section above, all you need to do is add the following line in your JSP:

 <script src="resources/script.js" type="text/javascript"></script>

Warning: I have seen some reports in the forum that the above XML can get changed into

 <script src="resources/script.js" type="text/javascript"/>

and if this happens, Internet Explorer fails. I fixed this bug (where script and some other tags were getting minimized when they shouldn't) in Creator late last summer, so this shouldn't happen with the recent updates (and I can't reproduce it) but be on the lookout for it and let me know if you see any problems in this area.

Now the final step - select your text field, and bind the onkeypress property to this javascript:

 return numbersonly(this, event)

In other words, your JSP for the text field should look something like this:

  <h:inputText 
      binding="#{Page1.textField1}" 
      id="textField1" 
      onkeypress="return numbersonly(this, event)"
      validator="#{Page1.textField1_validate}"/>

Notice how there is also a validator attached to this component. Don't forget to do server-side validation - that's what counts!

P.S. You should still read the JavaScript code and see if it does what you want. For example, the above JavaScript is not suitable if you want to allow negative numbers (e.g. a minus sign must be allowed). Also, the javascript has special support for jumping to another text field when the user enters a dot, which we're not taking advantage of here - there's a third parameter to the javascript function.

(2005-04-11 21:45:04.0) Permalink Comments [4]