Simple animation in JavaFX

Having two weeks off during the Christmas holidays gives you some time to create something in JavaFX. I had already used JavaFX before, but animations were a part I didn't yet have any experience in. So I was thinking of remaking a simple banner application that a client once needed for his website. That version was written in Flash and was created by a third party. You can have a look at that animation at http://vi.be.

The application is quite simple. It reads in an XML-file which contains a list of banners. Each banner has an image, a title, a description and a URL. After the XML-file has been read, it displays the banners one after another. The transition between two different banners is done by using a simple fading out/fading in animation. Doing this animation in JavaFX is simple.

First I create a variable to hold the current opacity and bind this to the opacity of the banner. The SingleBanner class used below is nothing more than a CustomNode in which the image, the title and the description are placed.

var bannerOpacity = 1.0;

insert SingleBanner {
  banner : banner  // the POJO containing all banner info
  visible : false  // initially all banners are invisible
  opacity : bind bannerOpacity  // bind the opacity variable to the banner

  // when the mouse is hovering over the banner, pause the timeline
  onMouseEntered : function(event : MouseEvent) {
    timeline.pause();
  }
  onMouseExited : function(event : MouseEvent) {
    timeline.play();
  }
} into banners;

To do the actual animation in JavaFX, we need to create a Timeline. A Timeline does nothing more than perform actions at specified "keyframes". You can execute this Timeline once, a few times or even infinitely. Here's the code for our Timeline:

var timeline : Timeline = Timeline {
  repeatCount : Timeline.INDEFINITE
  keyFrames: [
    at (4.75s) {
      bannerOpacity => 1.0
    },
    at (4.85s) {
      bannerOpacity => 0.0 tween Interpolator.EASEOUT
    }
    at (5.0s) {
      bannerOpacity => 1.0 tween Interpolator.EASEIN
    }
  ]
}

The syntax is easy to understand and you can clearly see what the Timeline does. 4.75 second after the Timeline was started, it will assign 1.0 to the variable bannerOpacity. Between 4.75 and 4.85 seconds the opacity will be brought down to zero using an EaseOut interpolation. Finally, the opacity will be brought back up to 1.0 with an EaseIn interpolation. The trick is now to make the current banner invisble when the opacity reaches 0. At the same time, the next banner in the array will be made visible. We can do that easily using a replace trigger.

var bannerOpacity = 1.0 on replace {
  if (bannerOpacity == 0.0) {
    counters[index].active = false;
    if (index + 1 >= sizeof(banners)) {
      index = 0;
    } else {
      index++;
    }
    counters[index].active = true;
  }
}

var index = 0;
var banner = bind banners[index] on replace oldBanner {
  oldBanner.visible = false;
  banner.visible = true;
}

That's all that is required to do some simple animation. The code for the project can be downloaded here. There are only two problems that I couldn't resolve:

• I have not yet found a way how to open a URL from within JavaFX. This can be achieved with: AppletStageExtension.showDocument(banner.link, "_new");


• In browser mode the loading of the images takes a long time. In desktop mode it seems to go a lot quicker.

Below you can have a look at the banner application itself.

Easy file upload in Java using Jersey and Uploadify

Uploading a bunch of files to your server. I have come across this particular requirement a few times now during my web development career, but only recently did I discover a very easy way to implement it. And by easy I mean easy on both the client side and the server side.

Server

On the server side we develop our web applications in Java using Glassfish for our deployement server. You can have your standard Servlet class that catches your requests, but recently we bumped into Jersey. And I must say, I really love it. Here is for example the code to accept a file upload request.

@Path("/file")
public class FileHandler {
  @POST
  @Path("/upload")
  @Consumes("multipart/form-data")
  @Produces("text/plain")
  public String uploadFile(@FormParam("file") File file, @FormParam("file") FormDataContentDisposition fcdsFile) {
    String fileLocation = "/files/" + fcdsFile.getFileName();
    File destFile = new File(fileLocation);

    // your code here to copy file to destFile

    return "1";
  }
}

That's it. The FormDataContentDisposition is a recent addition to Jersey which allows you to retrieve the name of the file that is being uploaded.

Client

For the client side, I decided to make use of Uploadify. They basically provided a wrapper around SWFUpload using JQuery. Here is the code I used on the client side:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>SimpleFileUpload</title>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
        <link rel="stylesheet" href="css/uploadify.css" type="text/css" media="screen"/>

        <script type="text/javascript">
            $(function() {
                $('#file_upload').uploadify({
                    'uploader' : 'swf/uploadify.swf',
                    'script' : 'rest/file/upload',
                    'fileDataName' : 'file',
                    'cancelImg' : 'img/cancel.png',
                    'multi' : true
                });
            });
        </script>
    </head>
    <body>
        <h1>Simple File Upload</h1>

        <h3>Multiple file upload made easy</h3>

        <div id="file_upload"></div>
        <br/>
        <input type="button" value="Clear Queue" onclick="$('#file_upload').uploadifyClearQueue();"/>
        <input type="button" value="Submit Queue" onclick="$('#file_upload').uploadifyUpload();"/>
    </body>
</html>

Voila, now you have a simple web application that is able to upload files to your server. You can download a sample application here.

UTF-8 encoding with MySQL and Glassfish

Allright, after 6 hours of coding, googling, experimenting and swearing, I finally managed to develop a website that fully supports UTF-8. The website is running on Glassfish Application Server (build V2 50g to be more precise) with a MySQL database underneath. Listed below, you can find all the steps I had to go through in order to get the website running.

JSP's

• With the JSP @page directive you can specify the desired encoding by specifying both the page encoding and the content type:
  

  <%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>

  pageEncoding specifies in which encoding the jsp page has been saved. contentType defines what content type should be sent in the response to the browser.
  
  
• It is further recommended to provide the content type through the meta-tag within the head-tag of the HTML-document:

  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      ...
    </head>
    ...
  </html>
  

• To be complete, you can also specify the @charset directive at the top of every external css page you are using:

  @charset "utf-8";
  ...

Servlets

• With every request you get in a Servlet, you'll have to set the encoding on the Request object:

  public void doXXXX(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    ...
  }
  

  Beware that if you use a filter that already reads from the Request, you will need to set the character encoding in the filter.
  
  
• At the same time, when you build your response, for example to return XML or JSON data, you set the content type of the Response object:

  response.setContentType("application/json; charset=UTF-8");

  As you probably know, this response header has to be set before you start writing your data.
  

Database

• MySQL supports Unicode as of version 4.1 and by that it is possible to store data in de database in UTF-8 encoding. Activating the UTF-8 encoding on a MySQL table is done during its creation by specifying a CHARACTER SET and a COLLATION:

  CREATE TABLE `USER` (
    ...
  ) ENGINE=MyISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci;
  

  For more information about character sets in MySQL, you can read the document Character Set Support.
  
  
• At least your data is now stored in UTF-8, but it doesn't end there. In Glassfish, you still have to create a JDBC Connection Pool with the correct settings allowing the JDBC driver to actually read and write your data in UTF-8. In the Admin Console you select the desired Connection Pool and then you navigate to Additional Properties. You will already see a number of properties being filled in (like DatabaseName, url, username and password). To enable UTF-8 support for JDBC, you'll have to add two extra properties:

  useUnicode = true
  characterEncoding = utf8

Mail

• To be able to send e-mail messages encoded in UTF-8, you will also need to provide the encoding type on the subject and the content of the message. Finally, you also need to set the content type of the e-mail message itself.

  MimeMessage msg = new MimeMessage(session);
  msg.setSubject(subject, "UTF-8");
  msg.setText(body, "UTF-8");
  if (asHtml) {
    msg.setContent(mailMessage.getBody(), "text/html; charset=UTF-8");
    msg.setHeader("Content-Type", "text/html; charset=UTF-8");
  } else {
    msg.setHeader("Content-Type", "text/plain; charset=UTF-8");
  }

And that's it. You should now have a website that doesn't give problems showing and storing your UTF-8 content. Below you can see a screenshot of my web application that shows data in Georgian (username), in Japanese (Location) and even in Runic alphabet (Tags):