One of the problem around the file upload functionality is that there is, no matter what, a file size limit set on the server. The limit could be 100Kb such as 100Mb depending on the configuration of the server.
But what happens if the user tries to upload a file bigger than the limit?
It’s simple, the file is going to be uploaded on the server until the limit is reached. Once it happens, the server returns an error message to the client.
Well, this is not ideal!
Indeed, depending on the connection speed of the user, the error message could be displayed a few minutes later. And you know how impatient users are!

So obviously, the solution would be to validate the file size before the upload starts.
To do that, we can simply use the fileSize Javascript function against the upload field.
But, surprising enough, this function doesn’t work on Internet Explorer!

And the only solution I found to get the file size with IE was using ActiveX:

var oas = new ActiveXObject("Scripting.FileSystemObject");
var e = oas.getFile(document.forms[0].file.value);
var size = e.size;

Finally, here is the whole Javascript function to validate the file size:

function validateFileSize(file, maxSize) {
	if (navigator.appName=="Microsoft Internet Explorer") {
		if (file.value) {
			var oas = new ActiveXObject("Scripting.FileSystemObject");
			var e = oas.getFile(file.value);
			var size = e.size;
		}
	} else {
		if (file.files[0]!=undefined) {
			var size = file.files[0].fileSize;
		}
	}
	if (size!=undefined && size > maxSize)
		return false;
	return true;
}

with file the file input field to validate and maxSize the maximum size in bits.

For example, you can call this function as follow:

validateImageSize(document.forms[0].file, 500000)

I successfully tested this code on:

• Google Chrome 6;
• Firefox 3.6;
• Internet Explorer 6;
• Internet Explorer 7.

The error I was continuously getting was:

Network connection closed unexpectedly

Nothing else! Nothing in the log files on both the client and the server.
The funny thing is that it was working perfectly fine using a command line client or even Eclipse Subversive.

After a (too) long time of investigation, I noticed that I was getting the following warnings when I was running the following command line directly on the server:

$ svn list svn+ssh://smoreau@localhost/data/svn/
svn: warning: cannot set LC_CTYPE locale
svn: warning: environment variable LANG is en_US.UTF-8
svn: warning: please check that your locale name is correct
smoreau@localhost's password:
svnserve: warning: cannot set LC_CTYPE locale
svnserve: warning: environment variable LANG is en_US.UTF-8
svnserve: warning: please check that your locale name is correct
branches/
tags/
trunk/

Actually, any svn command was triggering the warning messages:

$ svn info
svn: warning: cannot set LC_CTYPE locale
svn: warning: environment variable LANG is en_US.UTF-8
svn: warning: please check that your locale name is correct

Could it possibly be related with my TortoiseSVN problem?
Because I didn’t have any other idea, I decided to give it a go.

It appears that these warning messages came from a configuration problem around the locale package on the server. Indeed, look what we get if we run the locale command:

$ locale -a
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_MESSAGES to default locale: No such file or directory
locale: Cannot set LC_COLLATE to default locale: No such file or directory
C
POSIX

After some more investigation, it looks like this problem appeared when I upgraded the version of the locale package via APT.

Once again, I asked my friend Google to help me out. It suggested me the following solutions:

• Run locale-gen en_US.UTF-8 – Didn’t work
• Run update-locale LANG=en_US.UTF-8 – Didn’t work
• Run dpkg-reconfigure locales – WORKED

In conclusion, I wasn’t able to use TortoiseSVN because of a configuration problem on the locale package after an upgrade… Does it make sense?

The code I firstly wrote looked like the following:

Dim oXMLHTTP
Set oXMLHTTP = Server.CreateObject("MSXML2.ServerXMLHTTP")
oXMLHTTP.open "POST", sURL, false
oXMLHTTP.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"
oXMLHTTP.send sParams
Response.Write oXMLHTTP.responseText

with sURL the URL to call and sParams the parameters to send with the URL.

The problem was that oXMLHTTP.responseText didn’t return anything. Or to be exact, it returned an empty string, which was obviously not the expected response…

After some investigation, it appeared that the problem was because the server was seating behind a proxy. All this is good and well, but the question now is how to tell the application to use the proxy?


First of all, the ServerXMLHTTP object has a setProxy method:
http://msdn.microsoft.com/en-us/library/ms760236(v=VS.85).aspx
So I tried to add the following line to the previous code:

oXMLHTTP.setProxy 2, "myProxyServer:80", ""

Unfortunately, this didn’t fix the problem. It looks like this line is simply ignored. If somebody knows why, please tell me!


So the solution I finally adopted was to configure the proxy through the proxycfg tool.
There are two ways of using this tool:

• Import the proxy settings from the current user’s Microsoft Internet Explorer manual settings using the command proxycfg.exe -u
• Configure the proxy settings manually using the command proxycfg -p myProxyServer:80

This last solution works for me and I hope it will help a few people.


PS: I found the following page when writing this article: http://support.microsoft.com/kb/289481/. It would have been so good to find it during my investigation but anyway.

Anyway, let’s get back on topic. As I said, the problem occurred if the user was clicking on the Back button but the funniest thing is it was happening when he was clicking twice on it! Why did it work fine when clicking once but not twice?

The solution is quite simple actually.
It was coming from one of the options in MyFaces configuration: com.sun.faces.numberOfViewsInSession.
Here is a quick explanation of this option:

com.sun.faces.numberOfViewsInSession
Specifies the number of views that are stored in the session when Server-Side State Saving is used. If set to true while client-side state saving is being used, reduces the number of bytes sent to the client by compressing the state before it is encoded and written as a hidden field. The default for this parameter is 15.

So basically, JSF is storing each page previously viewed by the user in session. And, as you can see from the description above, JSF will stored a maximum of 15 pages by default. However, it was set to 1 in my application, which means only ONE page would be stored…
This was obviously the reason why the application was working fine if the user was clicking only once on the Back button but not twice!

For the same reason, you should also check the option org.apache.myfaces.NUMBER_OF_VIEWS_IN_SESSION which is default to 20:

org.apache.myfaces.NUMBER_OF_VIEWS_IN_SESSION
Defines the number of the latest views that are stored in session. This option is only applicable if the state saving method is set to server. The default for this parameter is 20.

For more information about JSF options, please have a look at the following page:
http://publib.boulder.ibm.com/infocenter/wasinfo/v7r0/index.jsp?topic=/com.ibm.websphere.express.doc/info/exp/ae/rweb_jsfengine.html

My task was to upload an image from a website (nothing difficult there) but the application has to resize and crop the uploaded image before saving it on the hard drive in order to save space.
Oh, and I forgot to mention that the website is built in VBScript (it would have been too easy if it has been built in ASP.Net…).

I went across a lot of image management libraries which work with VBScript during my search:

• AspImage from ServerObjects Inc;
• ImageGlue from webSupergoo;
• Active Image Processing Component from Ultra Shareware.

But I must admit that the most difficult part of this task was to find a good and FREE library.
The one I finally picked is ImageMagick.

Once the library is installed (click here to go to the download page), you can use the following code to resize the image to a maximum of 800 pixels and crop the white space around it:

Dim imageMagick
Set imageMagick = CreateObject("ImageMagickObject.MagickImage.1")

imageMagick.Convert "C:/testimage.jpg", "-fuzz", "10%", "-trim", "-resize", "800x800>", "C:/thumb-testimage.jpg"

Obviously, this tool can do much more than that, but this will be subject of another topic.
Or you can simply read the documentation: http://www.imagemagick.org/Usage/

The other day, this very useful Linux tool gave me a hard time!
Indeed, one of my commands wasn’t working in cron but was working perfectly fine when written in a shell console.

The faulty command looked like this:

0 5 * * 3 /data/script.sh > /data/script_`date +%y%m%d`.log 2>&1

If I run this command in a shell console, everything works fine and I get a log file containing today’s date in its filename. However, if I set this command line in my crontab, it doesn’t work and no log file is even created!

Reading the documentation of cron, I discovered the following statement:

Percent-signs (%) in the command, unless escaped with backslash (\), will be changed into newline characters, and all data after the first % will be sent to the command as standard input.

Well, this is good to know, isn’t it?
We need to escape the percent-signs on our command line.

So in order to get our ‘faulty’ command to run in cron, it needs to look like the following:

0 5 * * 3 /data/script.sh > /data/script_`date +\%y\%m\%d`.log 2>&1

Because one is never better served than by oneself, I decided to write it myself and share it with you.

function checkEan(eanCode) {
	// Check if only digits
	var ValidChars = "0123456789";
	for (i = 0; i < eanCode.length; i++) {
		digit = eanCode.charAt(i);
		if (ValidChars.indexOf(digit) == -1) {
			return false;
		}
	}

	// Add five 0 if the code has only 8 digits
	if (eanCode.length == 8 ) {
		eanCode = "00000" + eanCode;
	}
	// Check for 13 digits otherwise
	else if (eanCode.length != 13) {
		return false;
	}

	// Get the check number
	originalCheck = eanCode.substring(eanCode.length - 1);
	eanCode = eanCode.substring(0, eanCode.length - 1);

	// Add even numbers together
	even = Number(eanCode.charAt(1)) +
	       Number(eanCode.charAt(3)) +
	       Number(eanCode.charAt(5)) +
	       Number(eanCode.charAt(7)) +
	       Number(eanCode.charAt(9)) +
	       Number(eanCode.charAt(11));
	// Multiply this result by 3
	even *= 3;

	// Add odd numbers together
	odd = Number(eanCode.charAt(0)) +
	      Number(eanCode.charAt(2)) +
	      Number(eanCode.charAt(4)) +
	      Number(eanCode.charAt(6)) +
	      Number(eanCode.charAt(8)) +
	      Number(eanCode.charAt(10));

	// Add two totals together
	total = even + odd;

	// Calculate the checksum
    // Divide total by 10 and store the remainder
    checksum = total % 10;
    // If result is not 0 then take away 10
    if (checksum != 0) {
        checksum = 10 - checksum;
    }

	// Return the result
	if (checksum != originalCheck) {
		return false;
	}

    return true;
}

Note that this code can validate EAN-8 and EAN-13 barcodes.

These tags allow to display information about the first FacesMessage that is assigned to the component referenced by the “for” attribute. The difference is that the RichFaces tag has some extra functionalities such as Ajax rendering, error markers and predefined css class names.
Have a look at the following page for more details: http://livedemo.exadel.com/richfaces-demo/richfaces/message.jsf

This is all nice and well but it is not the only difference. Indeed, the HTML code generated by both these frameworks will also be different!

First of all, let’s see how the tag <h:message styleClass="errormsg" for="element"/> will be transformed. If there is no message to display, nothing will be generated (which is a good behaviour). However, if a message is present, the tag will be replaced by the following HTML code:

<span class="errormsg">Required.</span>

So far, so good!

But now let’s check what code RichFaces is generating for the tag <rich:message styleClass="errormsg" for="element"/>.
The following is the code created if there is NO message to render:

<span class="rich-message errormsg" id="form:j_id255">
    <span class="rich-message-label"></span>
</span>

And here is the code which will replace the RichFaces tag if there is a message to display:

<span id="bookingform:j_id255" class="rich-message errormsg">
    <span class="rich-message-label">Required.</span>
</span>

As you can see, the main difference is that RichFaces is wrapping the original span tag into another span tag. But, it is also generating some code even if there is no message to display! You would ask why is it doing that? The response is simple. The wrapper span element is necessary for RichFaces to Ajax-render the message tag if an error message has to be displayed for the targeting element.

So make sure you don’t put any padding or margin style in your custom CSS class which I called ‘errormsg’ in my example. Otherwise, you might have a gap when you were expecting nothing… (this happened to me)

First of all, for security reason JSF doesn’t allow you to use the GET method for your forms. I didn’t really understand why but this is very (too) restrictive!
Can you imagine Google doing the same thing? We would have the same URL for every search terms http://www.google.co.uk/search instead of something like http://www.google.co.uk/search?hl=en&safe=off&esrch=FT1&q=test&meta=&aq=f&aqi=g10&aql=&oq=&gs_rfai=.
It wouldn’t be very easy to share a search page with a friend if Google was using the POST method.

So the question is how to get around this JSF limitation?

Let’s take a look at how would look our faces-navigation.xml file for a search page:

<navigation-case>
    <from-action>#{searchBean.searchAction}</from-action>
    <from-outcome>success</from-outcome>
    <to-view-id>/search.xhtml</to-view-id>
    <redirect />
</navigation-case>

In this example, all the JSF elements calling the action searchBean.searchAction will be redirected to the search.xhtml page.
But, how are we going to get the search parameters into the URL?

Ideally, it would be great to be able to do something like the following:

<navigation-case>
    <from-action>#{searchBean.searchAction}</from-action>
    <from-outcome>success</from-outcome>
    <to-view-id>/search.xhtml?q=#{param.q}</to-view-id>
    <redirect />
</navigation-case>

This solution would allow us to inject EL expressions into the URL before the page is redirected to the destination page.
In order to do this, we need to create our own view handler and register it to our application.

The code below is the view handler class which also includes some comments:

package com.logikdev.gui.handler;

import javax.el.ExpressionFactory;
import javax.el.ValueExpression;
import javax.faces.application.ViewHandler;
import javax.faces.context.FacesContext;

import com.sun.facelets.FaceletViewHandler;

/**
 * Overrides the Facelet view handler to support EL expressions in URLs.
 * @author Stéphane Moreau
 */
public class DynamicViewHandler extends FaceletViewHandler {

	public DynamicViewHandler(ViewHandler parent) {
		super(parent);
	}

	/* (non-Javadoc)
	 * @see com.sun.facelets.FaceletViewHandler#getActionURL(javax.faces.context.FacesContext, java.lang.String)
	 */
	@Override
	public String getActionURL(FacesContext context, String viewId) {
		String queryString = null;

		// Separate the query string from the URL
		int dotIndex = viewId.lastIndexOf('.');
		int questionMarkIndex = viewId.indexOf('?');
		if (questionMarkIndex != -1) {
			queryString = viewId.substring(questionMarkIndex, dotIndex);
			viewId = viewId.substring(0, questionMarkIndex) + viewId.substring(dotIndex);
		}

		// Call the parent without the query string
		String result = super.getActionURL(context, viewId);

		// Replace the EL expressions in the URL
		ExpressionFactory expressionFactory = context.getApplication().getExpressionFactory();
		ValueExpression valueExpression = expressionFactory.createValueExpression(context.getELContext(), result, String.class);
		result = (String) valueExpression.getValue(context.getELContext());

		// Replace the EL expressions in the query string
		if (queryString != null) {
			valueExpression = expressionFactory.createValueExpression(context.getELContext(), queryString, String.class);
			queryString = (String) valueExpression.getValue(context.getELContext());

	        result += queryString;
		}

	    return result;
	}

}

And the following is the code to put in the faces-config.xml file in order to register the newly created view handler to the application:

<application>
	<variable-resolver>org.springframework.web.jsf.DelegatingVariableResolver</variable-resolver>
	<view-handler>com.logikdev.gui.handler.DynamicViewHandler</view-handler>
</application>

One last thing!
This view handler also has a limitation which I wasn’t able to fix. The file extension has to ALWAYS be placed at the end of the to-view-id URL! The view handler will then put it back before the question mark.
For example:

<navigation-case>
	<from-action>#{searchBean.searchAction}</from-action>
	<from-outcome>success</from-outcome>
	<!-- The extension has to be at the end -->
	<to-view-id>/search?q=#{param.q}.xhtml</to-view-id>
	<redirect />
</navigation-case>

If you perform a search on ‘jsf’ with the above navigation rule, the user will be redirected to the page /search.xhtml?q=jsf.

A lot of tags in RichFaces can AJAX-render elements such as:

<a4j:form>
    <a4j:jsFunction name="updateName" reRender="showname">
        <a4j:actionparam name="param1" assignTo="#{userBean.name}"  />
    </a4j:jsFunction>
</a4j:form>

On the above example, the JavaScript function updateName will AJAX-render the element which has the ID showname.

In some cases, you would have some elements that would AJAX-render without asking them to do so!
I still didn’t figure it out why. (if anybody has an idea, please don’t hesitate to tell me!)

But, I found a way to prevent this!
You simply can add the following attribute to your tag:

limitToList="true"

You even can add it to the tags that don’t have a reRender attribute.
For example:

<a4j:form>
    <a4j:poll id="poll" interval="1000" limitToList="true" />
</a4j:form>