What I needed was a way to use the closure compiler in an Ant task. The Ant task that comes with the library is good but there wasn't a way for me to integrate it into an existing system that wasn't going to change. After looking around for some example code and not finding any I went into the library's Ant task and figured out how to wire it all up myself.

It isn't that hard to use the compiler library in your own Java code but without a simple example it takes some work to figure out what is needed and what isn't. The following code is just about as bare bones as you can get. It takes a number of JavaScript files and compile them using the medium setting, more about the choice of settings after the code:

import com.google.javascript.jscomp.*;

import java.io.FileWriter;
import java.util.List;
import java.util.ArrayList;
import java.util.logging.Level;

public class Test
{
  public static void main(String[] args) throws Exception
  {
    // These are external JavaScript files you reference but don't want changed
    String externalJavascriptResources[] = {
        "jquery.js",
        "jqueryui.js"
    };
    // These are the files you want optimized
    String primaryJavascriptToCompile[] = {
        "somejavascript.js",
        "otherjavascript.js"
    };
    // This is where the optimized code will end up
    String outputFilename = "combined.min.js";

    com.google.javascript.jscomp.Compiler.setLoggingLevel(Level.INFO);
    com.google.javascript.jscomp.Compiler compiler = new com.google.javascript.jscomp.Compiler();

    CompilerOptions options = new CompilerOptions();
    CompilationLevel.SIMPLE_OPTIMIZATIONS.setOptionsForCompilationLevel(options);

    WarningLevel.VERBOSE.setOptionsForWarningLevel(options);

    List<JSSourceFile> externalJavascriptFiles = new ArrayList<JSSourceFile>();
    for (String filename : externalJavascriptResources)
    {
      externalJavascriptFiles.add(JSSourceFile.fromFile(filename));
    }

    List<JSSourceFile> primaryJavascriptFiles = new ArrayList<JSSourceFile>();
    for (String filename : primaryJavascriptToCompile)
    {
      primaryJavascriptFiles.add(JSSourceFile.fromFile(filename));
    }

    compiler.compile(externalJavascriptFiles, primaryJavascriptFiles, options);

    for (JSError message : compiler.getWarnings())
    {
      System.err.println("Warning message: " + message.toString());
    }

    for (JSError message : compiler.getErrors())
    {
      System.err.println("Error message: " + message.toString());
    }

    FileWriter outputFile = new FileWriter(outputFilename);
    outputFile.write(compiler.toSource());
    outputFile.close();
  }
}

The above code is doing a number of things:

• It takes both external resources you don't want optimized as well as resources you do want optimized that refer to those external resources. You may not need to list external resources depending on what level of optimization you use.
• It combines all the input files that are not external into one output file.
• It compiles the javascript code given to it using the SIMPLE_OPTIMIZATIONS setting.
• It lists any warnings or errors it found while compiling the code.

One of the nice side effects of using the closure compiler is that because it compiles the code it can alert you to errors or potential issues using warnings.

What is listed above is using the middle of the road optimizations. There is a level above SIMPLE_OPTIMIZATIONS that you can set by changing that line in the above code to:

  CompilationLevel.ADVANCED_OPTIMIZATIONS.setOptionsForCompilationLevel(options);

Be aware that the advanced optimizations will do things, renaming your variables and functions to name two, that can break your code. The compiler gives you a way of alerting it to things you don't want changed using externs and exports. Before using the advanced option you should read the advanced options tutorial.

If you do not like seeing all the steps the compiler takes you can set the logging level to QUIET by changing the WarningLevel line to the following:

  WarningLevel.QUIET.setOptionsForWarningLevel(options);

One last note about the compiler is that the closure inspector is a Firebug plugin that will let you see what the original line of code looked like before it was compiled. This can help a lot when something goes wrong.

I decided to make something that could run anywhere so I created my own AirPlay client called AP4J. I used Java and a pure Java Bonjour implementation called JmDNS so AP4J can run anywhere Java runs.

The current version only has the ability to control an AirPlay device. That means you have to supply a location that has a compatible video (h264 encoded) but once playing you will have control over the video just as you would using the iPad or iPhone. The next step will be to add the ability to directly serve videos instead of only being able to control the playback of videos. My goal will be the ability to run AP4J on my Windows Home Media server where I can have it stream videos to my AppleTV.

I have tested AP4J on Linux, Windows and Mac but only extensively on Linux. I have also tested a number of sites that have compatible videos available, a few of those are listed here:

• http://blip.tv/
• http://www.archives.org/
• http://confreaks.net/

Now for a couple screen shots. This is what you see after starting the server and going to the web interface:

This is what it looks like when a video is playing:

I'm going to assume you know something about Spring and their MVC configuration in general. If you want a simple MVC example to start with check out their SVN MVC-Basic sample. There is a decent amount of boiler plate work so I've created a project zip file with all the code, a build file and configuration in it (you just need to add the libraries).

First lets start by gathering up all the libraries we are going to need (see the end of the post for the directory layout I used or just unzip the project). Grab a copy of the Spring 3 libraries, at this time the latest version is spring-framework-3.0.1.RELEASE-A.zip and that is what I used for the following example. For the file upload part there are two non-Spring dependencies as well: Apache Commons FileUpload and Apache Commons IO. If you want to use the example project from the zip just copy all the jar files to the lib directory.

Next it is worth a quick look at the information provided in the Spring documentation about MVC multipart. It touches on what needs to be done but leaves out a full example. In documentation you will see that they talk about using a "multipart resolver" and that can be found at the end of web/WEB-INF/spring/app-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="
		http://www.springframework.org/schema/beans	http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

    <!-- Scans the classpath of this application for @Components to deploy as beans -->
    <context:component-scan base-package="net.ioncannon"/>

    <!-- Configures Spring MVC -->
    <import resource="mvc-config.xml"/>

    <!-- Configure the multipart resolver -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- one of the properties available; the maximum file size in bytes -->
        <property name="maxUploadSize" value="100000"/>
    </bean>

</beans>

The above app-config.xml configuration file is referenced from the mvc-config.xml configuration file. The mvc-config.xml configuration file doesn't need anything special for multipart uploads so I'll skip listing it here, have a look in the zip file if you are interested in its contents.

Now that the configuration is set the next step is to create the entry form for the upload. I've done this in the view JSP found in web/WEB-INF/views/upload/uploadForm.jsp:

<%@page contentType="text/html;charset=UTF-8" %>
<%@page pageEncoding="UTF-8" %>
<%@ page session="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
    <head>
        <META http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Upload Example</title>
    </head>
    <body>
        <form:form modelAttribute="uploadItem" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend>Upload Fields</legend>

                <p>
                    <form:label for="name" path="name">Name</form:label><br/>
                    <form:input path="name"/>
                </p>

                <p>
                    <form:label for="fileData" path="fileData">File</form:label><br/>
                    <form:input path="fileData" type="file"/>
                </p>

                <p>
                    <input type="submit" />
                </p>

            </fieldset>
        </form:form>
    </body>
</html>

A few notes about this view JSP:

• The form needs to have the encoding type set correctly. Look for: enctype="multipart/form-data"
• The file input field needs to be set: type="file"
• In the above I've included a Name field in the model as well as the File field just to show that you can mix fields in the same form
• The definition of the model can be found next and I assume that it is introduced into the form as "uploadItem"

The model is pretty simple and can be found in src/net/ioncannon/model/UploadItem.java:

package net.ioncannon.model;

import org.springframework.web.multipart.commons.CommonsMultipartFile;

public class UploadItem
{
  private String name;
  private CommonsMultipartFile fileData;

  public String getName()
  {
    return name;
  }

  public void setName(String name)
  {
    this.name = name;
  }

  public CommonsMultipartFile getFileData()
  {
    return fileData;
  }

  public void setFileData(CommonsMultipartFile fileData)
  {
    this.fileData = fileData;
  }
}

The Name attribute is just an extra input field and not the name of the file. Notice that the File attribute is of type CommonsMultipartFile. The CommonsMultipartFile type has a number of features that give you information about the uploaded file as well as access to its contents.

The controller brings everything together. The source can be found in the file src/net/ioncannon/controller/UploadController.java:

package net.ioncannon.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;

import net.ioncannon.model.UploadItem;

@Controller
@RequestMapping(value = "/upload")
public class UploadController
{
  @RequestMapping(method = RequestMethod.GET)
  public String getUploadForm(Model model)
  {
    model.addAttribute(new UploadItem());
    return "upload/uploadForm";
  }

  @RequestMapping(method = RequestMethod.POST)
  public String create(UploadItem uploadItem, BindingResult result)
  {
    if (result.hasErrors())
    {
      for(ObjectError error : result.getAllErrors())
      {
        System.err.println("Error: " + error.getCode() +  " - " + error.getDefaultMessage());
      }
      return "upload/uploadForm";
    }

    // Some type of file processing...
    System.err.println("-------------------------------------------");
    System.err.println("Test upload: " + uploadItem.getName());
    System.err.println("Test upload: " + uploadItem.getFileData().getOriginalFilename());
    System.err.println("-------------------------------------------");

    return "redirect:/app/";
  }
}

Once the file is uploaded I'm just dumping out part of the information. Doing something exciting with the file is up to you.

That is all there is to it. Here is a list of what the project structure looks like with everything pulled together including all the libraries, build file, source and configuration files:

To understand the way this works I think it is easiest to break it down into parts:

1. A file upload extention that counts bytes as they are uploaded
2. An interface that monitors the progress of something running on the server
3. AJAX to pull the monitoring into the current screen

Counting bytes when files are uploaded

This was taken from the example listed above. It extends and wraps parts of the commons File Upload classes so that you can count the bytes as they are uploaded to the server. You can download the source with build file or the binary. You will also need the commons file upload, commons io and commons logging. If you download the source put the commons jars in the lib directory before building.

The code is fairly simple to follow. MonitoredDiskFileItemFactory replaces DiskFileItemFactory and the construction of a MonitoredDiskFileItemFactory takes a OutputStreamListener that will be passed on down the chain. The new factory creates MonitoredDiskFileItems instead of DiskFileItems for each file uploaded. When the file needs to be written to disk a MonitoredOutputStream is given back instead of a normal OutputStream. The MonitoredOutputStream calls the OutputStreamListener methods as the bytes are written and with that you now have a way to monitor the byte count as the file is created on the server.

Now to test this all out we can just have an OutputStreamListener that writes its progress out to a logfile or something.

Now we try it out. You can put this in a servlet or jsp so I'm only going to list the parts that matter.

I'm going to assume you can find the correct way to do the actual form upload part.

Note: One issue that you will face at some point is where the upload post goes to becuase when you get to the AJAXy part of things you want the post to stay on the same page. You can use a hidden iframe and the form's "target" parameter to do this (I have an example later). This is one thing the Java examples I found didn't have but the PHP examples did and I'm not sure exactly how the Java examples work without it.

Monitoring progress on the server

The next step is to monitor the progress of the upload on the server. What you are monitoring on the server doesn't even need to be the upload. For the work I was doing the upload goes fairly quickly but what happens to the file after the upload takes a little longer. I wanted to monitor both and that is one reason I think it helps to break this up into parts because you aren't limited to just monitoring file uploads.

The main thing to keep in mind here is that the application server is multithreaded and you can make more than one request to the server at the same time. You probably know that you can open a tab in firefox or another window in ie and use the same session from the current webapp you are using. Knowing that you can create a page that monitors the status of things as they are running on the server.

From the example above you could toss the listener into the users session. Then insead of logging you just add a couple variables to keep track of the number of bytes that have been uploaded. Then create a simple jsp that pulls the Listener out of the session and dumps its data to a page. Open two windows, one to the upload page and another one to the status page. Start the upload and then start refreshing the status. You should see that the values change as the file is uploaded.

Of course you will probably want more than just the total size and bytes read as well as more formating like a little progress bar or something but I'll leave that up to you.

AJAX integration with prototype

You have the major parts to the upload progress done and now all you need is the AJAX part. To do this I chose to use prototype because it cuts right to what you want to do. One call is all you need to use: Ajax.PeriodicalUpdater.

The Ajax.PeriodicalUpdater call will update a container (in my case a div) on a set interval. Here is an example of how to have it update a div with an id of "status" every second.

The first argument is the id of the div, the second is the jsp that contains the data to stick into the div every second and the 3rd arguement is a set of options. There are more options availabe if you need them.

You would want to kick the update off whenever the form is posted. When the post is complete the iframe used as a place to post to will load with the results of the servlet or jsp that you posted to. If you return some javascript as a result for the iframe you will be able to create a final "finished" message on the page to let the user know the upload has completed and stop the processing of the AJAX updater.

So there you have it. The basics of setting up an upload progress bar using java and AJAX. I have left out a good bit but you should have enough to at least get you started.

By request I have created a simple example that pulls everything together. The source contains everything you need to create a war file including all source and an ant build file.

Example Source

Tags: java, ajax, file upload, prototype, javascript