UTF-8 hell

Localisation is a common requirement. So why is it so nightmarish to actually get it all working? I'm developing an app with Spring MVC and MySQL via Hibernate. You'd think that this should be quite straightforward, right? Think again. I've not got time to lay this all out nicely (as usual), but here's a quick list of things you need to do:

1. First, make sure your tables are created with UTF-8 encoding. e.g.
   

   CREATE TABLE `aTable` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `name` varchar(100) DEFAULT NULL,
   `value` varchar(255) DEFAULT NULL,
   `category` varchar(45) DEFAULT NULL,
   `description` text,
   PRIMARY KEY (`id`),
   UNIQUE KEY `ind_setting_key` (`name`)
   ) ENGINE=InnoDB  DEFAULT CHARSET=utf8

2. Ensure your web pages are served as UTF-8
   

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

3. Set content type in JSPs:
   

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

   
   
4. Add servlet filter to web.xml to set character encoding of request:
   

     <filter>
         <filter-name>charsetFilter</filter-name>
         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
         <init-param>
             <param-name>encoding</param-name>
             <param-value>UTF-8</param-value>
         </init-param>
     </filter>
   
     <filter-mapping>
         <filter-name>charsetFilter</filter-name>
         <url-pattern>/*</url-pattern>
     </filter-mapping>

5. Ensure your forms submit UTF-8:
   

   <form action="targetpage.html" method="post" 
   enctype="application/x-www-form-urlencoded" accept-charset="UTF-8">

6. Set JDBC connection character set:
   jdbc:mysql://localhost:3306/db?characterEncoding=utf8
7. When you read from the DB, issue SET NAMES 'utf8'; or you'll see garbled characters.

I think that's it...

Edited Blogspot template

Some regular blog readers may notice that this blog has a flexible width but still has rounded corners. The template I chose was a fixed width template using images for corners, which I generally dislike, having used them in the past without too much cross-browser success.

For this template, I make a 5-minute edit to remove the CSS for any corners and then just added a couple of JQuery includes and a few lines of Javascript:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://malsup.com/jquery/corner/jquery.corner.js' type='text/javascript'></script>
<script type='text/javascript'>
  $(document).ready(function() {
    $('#header-wrapper').corner();
    $('#main-wrap1').corner();
    $('#sidebartop-wrap').corner();
    $('#sidebarbottom-wrap1').corner();
    $('#footer-wrap1').corner();
  });
</script>

JQuery is so cool. I could have gone further and simplifed the HTML, but I couldn't be bothered. However, I have to say, I'm a recent convert to JQuery, having tried Dojo as well. JQuery is just brilliant! I may post more on that later, since I recently created a nice little linked list mechanism, to move items from one list to another (useful for multiple item selection).

Typos

OK, so maybe it's just me, but I keep typing new ArrayLust(); instead of ArrayList(). It's an honest mistake, but I thought it was a moderately cool name for a blog, and I fancied blogging again. It's been a while since I last blogged (http://nanoitx.blogspot.com).

These days, I generally develop Java apps, although that could change. So, expect to see Spring and Hibernate stuff for a while, and possibly some Google Android notes as I get into that. I've also been having fun with UTF-8 in MySQL recently, so I'll probably dump my thoughts on that here later on as a starter, in case it helps someone out.