Friday, November 2, 2012

Spring MVC: from JSP and Tiles to Mixer2

This post is inspired by Spring MVC: from JSP and Tiles to Thymeleaf | SpringSource Team Blog. Of course, This post is not a parody but my honest opinion as the comitter of Java Template Engine mixer2.

Plain JSP

Let us get started with the below code sample:
<html> ...
 
Table is empty.
First Name Last name
${user.firstName} ${user.lastName}
</html>

And Mr Michael Isvy saying that:

2) Verbosity
Our users page is fairly small because it simply displays a list of elements. We already have 50 lines of code (the above code sample has been slightly reduced). You can imagine how big it would be if we had to display a lot of content.

3) HTML/CSS compliance
This page is not HTML/CSS compliant. Suppose a Web Designer has prototyped it, you would have to rewrite it completely in order to use intrusive JSP syntax.

I completely agree above. Also, I agree the solution of Thymeleaf template engine. But today, I suggest another solution, mixer2.

This is template file of mixer2.

<html> ...
 
Table is empty.
First Name Last name
john doe
</html> ...

This is Controller code of Spring MVC with mixer2.

@Controller
public class HomeController {

    @Autowired
    Mixer2Engine mixer2Engine;

    @RequestMapping(value="/userList", method=RequestMethod.GET)
    public ModelAndView mixer2test() 
        throws IOException, TagTypeUnmatchException {

        // load template html
        File file = ResourceUtils.getFile("classpath:userList.html");
        Html html = mixer2Engine.loadHtmlTemplate(file);

        // getting user data from database...
        List<User> userList = ....

        // remove <div id="ifempty"> tag
        html.removeById("ifempty", Div.class);

        // clear "john doe" tr/td tags.
        Tbody tbody = html.getById("users",Table.class)
                              .getTbody().get(0);
        tbody.getTr().clear();

        // embed user data
        for (User user : userList) {
            Tr tr = new Tr();
            Td td1 = new Td();
            Td td2 = new Td();
            td1.getContent().add("Lady");
            td2.getContent().add("Lady");
            tr.getThOrTd().add(td1);            
            tr.getThOrTd().add(td2);     
        }
        // above code is verbose 
        // but you can do KAIZEN by TableBuilder.
        // see http://mixer2.org/site/ja/tablebuilder.html

        Map<String,String> model = new HashMap<String,String>();
        model.put("htmlString", mixer2Engine.saveToString(html));
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("view-for-mixer2");
        modelAndView.addAllObjects(model);
        return modelAndView;
    }
}

and JSP becomes so simple. (you need only one jsp. src/main/webapp/WEB-INF/views/view-for-mixer2.jsp)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
${htmlString}

note: Above code is verbose. now I am writing "Mixer2ViewResolver" for mixer2 on SpringMVC.

Pros and Cons

On the bright side:

  • Web designer friendly template. because there are no jsp custam tag, no other name space but only html/css. 100% pure html/css !
  • You can write View of MVC by java code. You need not to learn about jsp custom tag nor tiles tag. You must only learn pure java. Ctrl+Space key on eclipse can help you.
  • You can write test case for view by pure JUnit because the view code is written by pure java code.

On the down side:

  • Mixer2 is a small open source project. not so popular now.
  • JSP or Template code is less. But java code becomes fat.

If you are a programmer, and starting on a new project with another web designer, I strongly encourage you to compare both Mixer2 and JSPs in order to figure out which one is more suitable to your needs.

other reference: